:root { color: #13213c; background: #f7f9ff; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-synthesis: none; }
* { box-sizing: border-box; } body { min-width: 320px; min-height: 100vh; margin: 0; background: radial-gradient(circle at 8% 0%, #eaf1ff 0, transparent 27rem), #f7f9ff; } button, input { font: inherit; } button { cursor: pointer; }
.shell { min-height: 100vh; }.login-view { width: min(100% - 40px, 490px); margin: 0 auto; padding: 10vh 0 40px; }.brand-mark { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 18px; background: linear-gradient(145deg, #2868ff, #75a2ff); color: #fff; font-size: 1.55rem; font-weight: 800; box-shadow: 0 12px 30px #2768ff33; }.eyebrow { margin: 23px 0 8px; color: #60708d; font-size: .73rem; font-weight: 800; letter-spacing: .13em; }.login-view h1, .topbar h1 { max-width: 620px; margin: 0; color: #101f3a; font-size: clamp(2.1rem, 5vw, 3.5rem); letter-spacing: -.055em; line-height: 1.03; }.intro, .topbar p { max-width: 500px; color: #63708a; font-size: 1rem; line-height: 1.65; }.login-view form { display: grid; gap: 17px; margin-top: 37px; padding: 28px; border: 1px solid #e2e8f6; border-radius: 22px; background: #fff; box-shadow: 0 18px 45px #1b3b7820; }.login-view label { display: grid; gap: 7px; color: #3c4d6b; font-size: .85rem; font-weight: 700; }.login-view input { width: 100%; padding: 12px 13px; border: 1px solid #cfd9ec; border-radius: 10px; outline: 0; color: #17233b; }.login-view input:focus { border-color: #2768ff; box-shadow: 0 0 0 3px #2768ff1c; }.primary-button { display: flex; justify-content: center; gap: 10px; align-items: center; min-height: 48px; margin-top: 4px; border: 0; border-radius: 11px; background: #1f5df0; color: #fff; font-weight: 750; box-shadow: 0 8px 20px #1f5df044; }.primary-button:hover { background: #164bd0; }.primary-button:disabled { opacity: .72; cursor: wait; }.form-message { min-height: 1.2rem; margin: -3px 0 0; color: #b42318; font-size: .83rem; }.hint { color: #75829a; font-size: .78rem; text-align: center; }
.app-view { display: grid; min-height: 100vh; grid-template-columns: 256px minmax(0, 1fr); }.sidebar { display: flex; flex-direction: column; padding: 29px 17px; border-right: 1px solid #e3e9f5; background: #fff; }.logo { display: inline-flex; gap: 10px; align-items: center; padding: 0 10px; color: #13213c; font-size: 1.1rem; font-weight: 800; letter-spacing: -.03em; text-decoration: none; }.logo b { color: #2768ff; }.brand-mark.small { width: 31px; height: 31px; border-radius: 10px; font-size: .9rem; }.sidebar nav { display: grid; gap: 5px; margin-top: 52px; }.sidebar nav a { display: flex; gap: 13px; align-items: center; padding: 12px 13px; border-radius: 10px; color: #65728c; font-size: .9rem; font-weight: 650; text-decoration: none; }.sidebar nav a span { width: 17px; color: #7b8aa5; text-align: center; }.sidebar nav a.active { background: #edf3ff; color: #1d5ced; }.sidebar nav a.active span { color: #1d5ced; }.sidebar-footer { display: grid; gap: 14px; margin-top: auto; padding: 13px 10px 0; }.test-badge { width: fit-content; padding: 5px 7px; border-radius: 6px; background: #fff5dc; color: #96680e; font-size: .61rem; font-weight: 800; letter-spacing: .07em; }.quiet-button { width: fit-content; padding: 0; border: 0; background: transparent; color: #76839a; font-size: .8rem; }.content { width: min(100%, 1240px); padding: 50px clamp(25px, 5vw, 76px); }.topbar { display: flex; justify-content: space-between; gap: 25px; align-items: flex-start; }.topbar .eyebrow { margin-top: 0; }.topbar h1 { font-size: clamp(2rem, 4vw, 2.75rem); }.account-chip { display: flex; gap: 10px; align-items: center; flex-shrink: 0; padding: 9px 12px 9px 9px; border: 1px solid #e1e8f5; border-radius: 13px; background: #fff; }.account-chip > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: #dfeaff; color: #215ce5; font-size: .87rem; font-weight: 800; }.account-chip strong, .account-chip small { display: block; max-width: 180px; overflow: hidden; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }.account-chip small { margin-top: 2px; color: #77849a; font-size: .67rem; }.notice { display: flex; gap: 13px; margin: 39px 0 25px; padding: 18px 20px; border: 1px solid #dbe7ff; border-radius: 15px; background: #f1f6ff; }.notice > span { display: grid; width: 21px; height: 21px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #3671ed; color: #fff; font-size: .76rem; font-weight: 800; }.notice strong { color: #254f9d; font-size: .88rem; }.notice p { margin: 4px 0 0; color: #5270a6; font-size: .82rem; line-height: 1.5; }.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }.metrics article, .panel { border: 1px solid #e4e9f4; border-radius: 17px; background: #fff; box-shadow: 0 8px 22px #1c3b6910; }.metrics article { min-height: 170px; padding: 19px; }.metric-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; font-size: 1.05rem; font-weight: 700; }.blue { background: #e5efff; color: #2d68ee; }.violet { background: #f0eaff; color: #7953d8; }.mint { background: #ddf7ed; color: #199d70; }.amber { background: #fff3d9; color: #c98713; }.metrics p { margin: 15px 0 3px; color: #68758c; font-size: .78rem; font-weight: 650; }.metrics strong { color: #14223c; font-size: 1.9rem; letter-spacing: -.05em; }.metrics small { display: block; margin-top: 5px; color: #8a96aa; font-size: .69rem; }.grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-top: 16px; }.panel { padding: 24px; }.panel-title { display: flex; justify-content: space-between; gap: 16px; }.panel .eyebrow { margin-top: 0; }.panel h2 { margin: 0; color: #1b2a43; font-size: 1.18rem; letter-spacing: -.025em; }.panel > p { color: #68758e; font-size: .86rem; line-height: 1.6; }.progress { height: fit-content; padding: 6px 8px; border-radius: 7px; background: #eef4ff; color: #2862de; font-size: .68rem; font-weight: 800; }.roadmap ol { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }.roadmap li { display: flex; gap: 10px; align-items: center; color: #6b7890; font-size: .8rem; }.roadmap i { display: grid; width: 21px; height: 21px; place-items: center; border: 1px solid #dbe2ef; border-radius: 50%; color: #8090a6; font-size: .68rem; font-style: normal; }.roadmap .done { color: #243b5f; }.roadmap .done i { border-color: #ceefdf; background: #dff7ea; color: #1a9b6e; }.safeguards { background: linear-gradient(140deg, #fafdff, #f2f7ff); }.safeguards > div { display: flex; gap: 8px; align-items: center; margin-top: 11px; color: #53647f; font-size: .76rem; }.safeguards > div span { color: #189b6c; font-weight: 900; }
@media (max-width: 860px) { .app-view { grid-template-columns: 1fr; }.sidebar { display: block; padding: 15px 18px; border-right: 0; border-bottom: 1px solid #e3e9f5; }.sidebar nav { display: flex; overflow: auto; gap: 4px; margin-top: 16px; }.sidebar nav a { flex: 0 0 auto; }.sidebar-footer { display: none; }.content { padding-top: 32px; }.metrics { grid-template-columns: repeat(2, 1fr); }.grid { grid-template-columns: 1fr; } } @media (max-width: 550px) { .topbar { display: block; }.account-chip { width: fit-content; margin-top: 20px; }.metrics { grid-template-columns: 1fr; }.content { padding: 28px 18px; }.login-view { padding-top: 46px; } }
.sidebar nav .planned { display: flex; gap: 13px; align-items: center; padding: 12px 13px; border-radius: 10px; color: #8793a8; font-size: .9rem; font-weight: 650; cursor: default; }.sidebar nav .planned > span { width: 17px; text-align: center; }.sidebar nav .planned small { margin-left: auto; color: #9aa5b7; font-size: .65rem; font-weight: 500; }
@media (max-width: 860px) { .sidebar nav .planned { flex: 0 0 auto; }.sidebar nav .planned small { display: none; }.sidebar-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 0 10px; } }
[hidden] { display: none !important; }
.product-section { margin-top: 20px; }
.stripe-section { display: grid; gap: 16px; margin-top: 20px; }
.stripe-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; background: linear-gradient(130deg, #fff 35%, #f2f7ff); }
.stripe-hero .eyebrow, .stripe-next .eyebrow { margin-top: 0; }
.stripe-hero h2 { margin: 0; color: #182b49; font-size: 1.42rem; letter-spacing: -.025em; }
.stripe-hero p:not(.eyebrow) { max-width: 660px; margin: 11px 0 0; color: #62718b; font-size: .85rem; line-height: 1.6; }
.stripe-state { display: inline-flex; flex: 0 0 auto; gap: 8px; align-items: center; padding: 8px 11px; border: 1px solid #f0dfbd; border-radius: 999px; background: #fff8e9; color: #94671b; font-size: .73rem; font-weight: 800; }
.stripe-state span { width: 7px; height: 7px; border-radius: 50%; background: #d49b38; }
.stripe-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stripe-status-grid article { display: flex; flex-direction: column; align-items: flex-start; min-height: 222px; }
.stripe-card-icon { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: #e9f1ff; color: #2862de; font-size: 1rem; }
.stripe-status-grid h3, .stripe-next h3 { margin: 15px 0 0; color: #1b2a43; font-size: .98rem; }
.stripe-status-grid p { margin: 9px 0 18px; color: #68758e; font-size: .8rem; line-height: 1.55; }
.stripe-card-state { margin-top: auto; padding: 5px 8px; border-radius: 7px; background: #f1f4fa; color: #697a94; font-size: .68rem; font-weight: 800; }
.stripe-next ol { display: grid; gap: 11px; margin: 18px 0 0; padding-left: 21px; color: #40536f; font-size: .83rem; line-height: 1.5; }
.stripe-next > p { margin: 21px 0 0; padding-top: 16px; border-top: 1px solid #e8edf6; color: #7b879b; font-size: .74rem; }
@media (max-width: 900px) { .stripe-status-grid { grid-template-columns: 1fr; }.stripe-status-grid article { min-height: 0; }.stripe-hero { flex-direction: column; } }
.product-section .eyebrow { margin-top: 0; }
.product-section h2 { margin: 0; color: #1b2a43; font-size: 1.3rem; }
#products-list { display: grid; gap: 14px; margin-top: 22px; }
.product-card { padding: 20px; border: 1px solid #e2e8f4; border-radius: 14px; background: #fbfcff; }
.product-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.product-heading h3 { margin: 0; font-size: 1rem; color: #182b49; }
.product-heading code { color: #65748e; font-size: .78rem; }
.price-list { display: grid; gap: 10px; margin-top: 16px; }
.price-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 18px; padding-top: 10px; border-top: 1px solid #e8edf6; }
.price-label { display: flex; gap: 11px; align-items: baseline; }
.price-label strong, .price-amount { color: #253653; font-size: .85rem; }
.price-label small { color: #617491; font-size: .72rem; }
.empty-state, .empty-price { color: #68758e; font-size: .86rem; }
.nav-divider { margin: 18px 13px 4px; color: #a0aabd; font-size: .64rem; font-weight: 800; letter-spacing: .12em; }
.sidebar nav .planned { padding-top: 9px; padding-bottom: 9px; font-size: .82rem; font-weight: 550; }
.contracts-section { margin-top: 20px; }
.section-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.section-heading .eyebrow { margin-top: 0; }
.section-heading h2 { margin: 0; color: #1b2a43; font-size: 1.3rem; }
.section-heading p:not(.eyebrow) { max-width: 680px; color: #68758e; font-size: .86rem; line-height: 1.6; }
.contract-controls { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 18px; }
.contract-controls label { display: grid; gap: 7px; color: #596b85; font-size: .72rem; font-weight: 700; }
.contract-controls input, .contract-controls select { min-height: 41px; padding: 9px 12px; border: 1px solid #dbe4f2; border-radius: 10px; background: #fff; color: #24334e; outline: 0; }
.contract-controls input:focus, .contract-controls select:focus { border-color: #2768ff; box-shadow: 0 0 0 3px #2768ff1c; }
.search-label { flex: 1 1 260px; }.filter-label { flex: 0 1 190px; }
.contract-row { display: grid; width: 100%; grid-template-columns: minmax(170px, 2fr) minmax(110px, 1fr) minmax(110px, 1fr) auto 14px; gap: 14px; align-items: center; padding: 16px 12px; border: 0; border-top: 1px solid #edf0f6; background: #fff; color: #30405d; text-align: left; }
.contract-row:hover, .contract-row:focus-visible { background: #f6f9ff; outline: 0; }
.contract-main { display: grid; gap: 4px; min-width: 0; }.contract-main strong { overflow: hidden; color: #1b2b49; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }.contract-main small, .contract-date { color: #77849b; font-size: .74rem; }.contract-price { color: #273c5e; font-size: .8rem; font-weight: 700; }.contract-chevron { color: #7486a1; font-size: 1.4rem; }
.status-pill { display: inline-flex; width: fit-content; padding: 6px 9px; border-radius: 999px; background: #eef3fc; color: #5c6f8f; font-size: .69rem; font-weight: 750; white-space: nowrap; }.status-active { background: #e0f7ec; color: #137956; }.status-trialing { background: #e7f0ff; color: #315fc1; }.status-past_due { background: #fff0e7; color: #a8511e; }.status-ended { background: #f0f1f4; color: #687283; }
.contract-empty { margin: 0; padding: 34px 18px; border: 1px dashed #dbe4f2; border-radius: 12px; background: #fbfcff; text-align: center; }.list-note { min-height: 1em; margin: 14px 0 0; color: #8a96aa; font-size: .72rem; }
.drawer-open { overflow: hidden; }.drawer-backdrop { position: fixed; z-index: 20; inset: 0; background: #17243b78; }.contract-drawer { position: fixed; z-index: 21; inset: 0 0 0 auto; width: min(100%, 490px); overflow: auto; padding: 28px; background: #fff; box-shadow: -15px 0 45px #18284130; }.drawer-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid #e9edf5; }.drawer-header .eyebrow { margin: 0 0 7px; }.drawer-header h2 { margin: 0; color: #14213c; font-size: 1.45rem; }.drawer-close { width: 36px; height: 36px; border: 1px solid #e1e8f5; border-radius: 9px; background: #fff; color: #53637c; font-size: 1.5rem; line-height: 1; }.drawer-close:hover { background: #f4f7fe; }.drawer-status { display: flex; gap: 12px; align-items: center; margin: 23px 0; color: #73819a; font-size: .76rem; }.detail-facts { display: grid; gap: 0; margin: 0; }.detail-fact { display: grid; grid-template-columns: 135px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid #edf0f6; font-size: .78rem; }.detail-fact dt { color: #8190a7; }.detail-fact dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #273954; font-weight: 650; }.drawer-note { margin-top: 24px; padding: 15px; border-radius: 11px; background: #eff5ff; color: #4568a3; font-size: .77rem; line-height: 1.5; }
@media (max-width: 860px) { .sidebar nav .nav-divider { flex: 0 0 auto; align-self: center; margin: 0 12px; white-space: nowrap; }.sidebar nav .planned { flex: 0 0 auto; }.contract-row { grid-template-columns: minmax(150px, 2fr) minmax(100px, 1fr) auto 14px; }.contract-date { display: none; } }
@media (max-width: 550px) { .section-heading { display: block; }.contract-row { grid-template-columns: minmax(130px, 2fr) auto 14px; gap: 8px; }.contract-price { display: none; }.contract-drawer { padding: 20px; }.detail-fact { grid-template-columns: 112px minmax(0, 1fr); } }
.catalog-project { padding: 22px; border: 1px solid #e1e9f6; border-radius: 16px; background: #fbfcff; }
.catalog-project-header, .catalog-project-heading { display: flex; gap: 14px; align-items: center; }.catalog-project-header { justify-content: space-between; }
.catalog-project-icon { display: grid; flex: 0 0 auto; width: 43px; height: 43px; place-items: center; border-radius: 13px; background: #e5efff; color: #2864e1; font-size: 1.1rem; font-weight: 800; }.catalog-project:nth-child(2) .catalog-project-icon { background: #e0f8ee; color: #138765; }
.catalog-project-name h3 { margin: 0 0 2px; color: #142440; font-size: 1.1rem; }.catalog-project-name p { margin: 0; color: #71809a; font-size: .78rem; line-height: 1.45; }.catalog-count { padding: 6px 9px; border-radius: 7px; background: #edf3ff; color: #4168ae; font-size: .72rem; font-weight: 750; white-space: nowrap; }
.catalog-model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 21px; }.catalog-model { display: flex; flex-direction: column; min-width: 0; padding: 18px; border: 1px solid #e2e8f3; border-radius: 13px; background: #fff; }.catalog-model-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }.catalog-model-top code { overflow: hidden; color: #8a97ad; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }.catalog-model h4 { margin: 13px 0 4px; color: #192b49; font-size: 1rem; }.catalog-description { min-height: 2.4em; margin: 0 0 14px; color: #6d7d96; font-size: .77rem; line-height: 1.5; }.catalog-prices { display: grid; gap: 6px; margin-top: auto; }.catalog-price { display: flex; flex-wrap: wrap; gap: 5px 10px; align-items: baseline; }.catalog-price strong { color: #17315c; font-size: 1.16rem; }.catalog-price span, .catalog-price-open { color: #86721e; font-size: .72rem; }.catalog-price-open { margin-top: auto; font-weight: 700; }.catalog-pricing-note { margin: 14px 0 10px; padding: 10px; border-radius: 8px; background: #fff8e8; color: #715d23; font-size: .7rem; line-height: 1.5; }.catalog-source { margin-top: auto; color: #909db0; font-size: .65rem; }
@media (max-width: 720px) { .catalog-model-grid { grid-template-columns: 1fr; }.catalog-project { padding: 16px; } }