:root { color-scheme: light; font-family: Inter, "Segoe UI", sans-serif; color: #15221d; background: #eef2ef; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
.shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.card { width: min(100%, 540px); background: white; border: 1px solid #dce4df; border-radius: 18px; padding: clamp(28px, 6vw, 52px); box-shadow: 0 22px 60px rgba(23, 47, 36, .10); }
.brand { color: #16784b; font-size: 13px; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 12px 0 10px; font-size: clamp(30px, 7vw, 44px); line-height: 1.05; }
.lead { color: #52645c; line-height: 1.6; margin: 0 0 28px; }
.status { border-radius: 10px; background: #f3f6f4; padding: 14px 16px; margin-bottom: 20px; color: #40534a; }
.status.error { background: #fff0ee; color: #9b2d20; }
form { display: grid; gap: 12px; }
label { font-weight: 650; }
input { width: 100%; border: 1px solid #bfcac4; border-radius: 10px; padding: 14px 16px; font: inherit; font-size: 22px; letter-spacing: .12em; text-transform: uppercase; }
.button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 10px; padding: 12px 17px; background: #16784b; color: white; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.button.secondary { border-color: #c9d5cf; background: white; color: #263b31; }
.button:disabled { opacity: .55; cursor: wait; }
.result { border-radius: 12px; padding: 18px; background: #eaf7ef; color: #145b3b; line-height: 1.55; }
#auth:empty { display: none; }
.home-card { width: min(100%, 620px); }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.portal-body { color: #e8edf7; background: #07101f; color-scheme: dark; }
.portal-header { position: sticky; z-index: 20; top: 0; min-height: 68px; display: grid; grid-template-columns: 230px 1fr auto; align-items: center; gap: 24px; padding: 0 24px; border-bottom: 1px solid #25334a; background: rgba(8, 17, 32, .96); backdrop-filter: blur(16px); }
.portal-brand { display: flex; align-items: baseline; gap: 9px; color: white; text-decoration: none; }
.portal-brand span { color: #ffca0a; font-size: 11px; font-weight: 850; letter-spacing: .18em; }
.portal-brand strong { font-size: 19px; }
.portal-header nav { display: flex; align-items: stretch; align-self: stretch; gap: 2px; }
.portal-header nav a { display: flex; align-items: center; padding: 0 15px; border-bottom: 2px solid transparent; color: #8e9ab0; font-size: 13px; text-decoration: none; }
.portal-header nav a:hover, .portal-header nav a.active { border-bottom-color: #ffca0a; color: white; }
.account-summary { display: grid; justify-items: end; gap: 2px; }
.account-summary strong { font-size: 12px; }
.account-summary small { color: #8e9ab0; font-size: 10px; }
.portal-layout { min-height: calc(100vh - 68px); display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.product-sidebar { padding: 24px 14px; border-right: 1px solid #25334a; background: #0b1527; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 18px; }
.sidebar-heading small { display: block; overflow: hidden; max-width: 190px; color: #8492a9; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-heading h1 { margin: 4px 0 0; font-size: 20px; }
.icon-button { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid #33425a; border-radius: 10px; background: #142139; color: white; font: inherit; font-size: 22px; cursor: pointer; }
.icon-button:hover { border-color: #ffca0a; color: #ffca0a; }
.icon-button.quiet { border: 0; background: transparent; }
.product-list { display: grid; gap: 6px; }
.product-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #dce3ef; text-align: left; cursor: pointer; }
.product-item:hover { background: #111e33; }
.product-item.active { border-color: #3a4a65; background: #17243a; box-shadow: inset 3px 0 #ffca0a; }
.product-item span, .product-item strong, .product-item small { display: block; min-width: 0; }
.product-item strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.product-item small { margin-top: 4px; color: #7f8da4; font-size: 9px; }
.status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #647084; }
.status-dot.on { background: #46db9b; box-shadow: 0 0 0 4px rgba(70, 219, 155, .10); }
.sidebar-empty, .skeleton { padding: 16px 12px; color: #7f8da4; font-size: 11px; line-height: 1.6; }
.management-content { width: min(1180px, 100%); display: grid; align-content: start; gap: 16px; margin: 0 auto; padding: 30px clamp(20px, 4vw, 48px) 60px; }
.portal-empty { min-height: 55vh; display: grid; place-content: center; justify-items: center; text-align: center; }
.portal-empty h2 { margin: 12px 0 7px; font-size: 28px; }
.portal-empty p { max-width: 520px; margin: 0 0 22px; color: #8c99ae; line-height: 1.6; }
.content-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 5px 2px 10px; }
.content-heading h2 { margin: 5px 0 5px; font-size: clamp(24px, 4vw, 34px); }
.content-heading p { max-width: 700px; margin: 0; color: #8c99ae; font-size: 12px; line-height: 1.55; }
.eyebrow { color: #ffca0a; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.badge { display: inline-flex; align-items: center; width: fit-content; padding: 5px 8px; border: 1px solid #3c4a60; border-radius: 999px; background: #172237; color: #aab6c9; font-size: 9px; font-weight: 750; white-space: nowrap; }
.badge.green { border-color: rgba(70, 219, 155, .2); background: rgba(70, 219, 155, .10); color: #64e6ab; }
.badge.gray { color: #929caf; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.metric { display: grid; gap: 5px; padding: 16px; border: 1px solid #27364d; border-radius: 12px; background: #0e192b; }
.metric small { color: #8b98ad; font-size: 9px; }
.metric strong { font-size: 23px; }
.metric span { color: #6f7d93; font-size: 9px; }
.portal-panel { overflow: hidden; border: 1px solid #28374e; border-radius: 13px; background: #0e192b; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid #28374e; }
.panel-heading h3 { margin: 0; font-size: 13px; }
.panel-heading p { margin: 5px 0 0; color: #8491a7; font-size: 10px; line-height: 1.5; }
.panel-heading code { padding: 6px 8px; border: 1px solid #344258; border-radius: 7px; background: #091321; color: #ffda53; font-size: 10px; }
.integration-panel pre { overflow-x: auto; margin: 0; padding: 18px; background: #07111f; color: #c8d6e8; font: 11px/1.75 Consolas, "Cascadia Code", monospace; }
.integration-panel pre code { white-space: pre; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid.compact { padding: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid label, .inline-form label { display: grid; gap: 6px; color: #aab5c7; font-size: 10px; font-weight: 650; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea, .inline-form input, .inline-form select { width: 100%; min-width: 0; border: 1px solid #35435a; border-radius: 8px; padding: 10px 11px; background: #091321; color: #e6ebf4; font: inherit; font-size: 11px; letter-spacing: normal; text-transform: none; }
.form-grid textarea { resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .inline-form input:focus, .inline-form select:focus { border-color: #ffca0a; outline: 2px solid rgba(255, 202, 10, .10); }
.form-actions { display: flex; justify-content: flex-end; }
.inline-form { display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(110px, .7fr)) auto; align-items: end; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #28374e; background: #111d30; }
.data-list { display: grid; }
.data-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(130px, .8fr) minmax(150px, 1fr); align-items: center; gap: 18px; padding: 13px 18px; border-top: 1px solid #202f44; }
.data-row:first-child { border-top: 0; }
.data-row:hover { background: #111d30; }
.data-row span, .data-row strong, .data-row small { display: block; min-width: 0; }
.data-row strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.data-row small { overflow: hidden; margin-top: 4px; color: #7f8ca1; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.row-actions { display: flex !important; align-items: center; justify-content: flex-end; gap: 10px; }
.text-button { border: 0; padding: 4px; background: transparent; color: #9eabc0; font: inherit; font-size: 9px; cursor: pointer; }
.text-button.danger { color: #ff8e88; }
.empty-row, .notice { padding: 22px 18px; color: #7f8ca1; font-size: 10px; text-align: center; }
.notice { border-bottom: 1px solid #28374e; background: rgba(255, 202, 10, .05); color: #d3b955; text-align: left; }
.timeline { display: grid; padding: 12px 18px; }
.timeline > div { display: grid; grid-template-columns: 12px 1fr; gap: 10px; padding: 9px 0; }
.timeline i { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: #4a5a71; }
.timeline strong, .timeline small { display: block; }
.timeline strong { font-size: 10px; }
.timeline small { margin-top: 3px; color: #78869c; font-size: 9px; }
.portal-dialog { width: min(650px, calc(100% - 30px)); border: 1px solid #35445b; border-radius: 15px; padding: 0; background: #0e192b; color: #e6ebf4; box-shadow: 0 28px 90px rgba(0, 0, 0, .55); }
.portal-dialog::backdrop { background: rgba(1, 6, 14, .75); backdrop-filter: blur(4px); }
.portal-dialog form { display: block; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid #2b3a50; }
.dialog-heading small { color: #ffca0a; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.dialog-heading h2 { margin: 5px 0 0; font-size: 20px; }
.portal-dialog .form-grid { padding: 22px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 16px 22px; border-top: 1px solid #2b3a50; }
.auth-overlay { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 22px; background: #07101f; }
.auth-overlay[hidden] { display: none; }
.auth-card { color: #15221d; }
.toast { position: fixed; z-index: 80; right: 22px; bottom: 22px; max-width: min(420px, calc(100% - 44px)); padding: 12px 16px; border: 1px solid #2d8b60; border-radius: 10px; background: #123624; color: #8df0ba; font-size: 11px; box-shadow: 0 15px 50px rgba(0, 0, 0, .35); }
.toast.error { border-color: #8e403c; background: #3b1c20; color: #ffaaa5; }

@media (max-width: 980px) {
  .portal-header { grid-template-columns: auto 1fr; }
  .portal-header nav { display: none; }
  .portal-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .metric-grid, .form-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inline-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inline-form .button { align-self: stretch; }
}

@media (max-width: 700px) {
  .portal-header { min-height: 58px; padding: 0 14px; }
  .account-summary small { display: none; }
  .portal-layout { display: block; }
  .product-sidebar { position: static; padding: 14px; border-right: 0; border-bottom: 1px solid #25334a; }
  .product-list { grid-auto-flow: column; grid-auto-columns: minmax(170px, 75vw); overflow-x: auto; padding-bottom: 4px; }
  .management-content { padding: 22px 14px 48px; }
  .content-heading { align-items: flex-start; }
  .metric-grid, .form-grid, .form-grid.compact, .inline-form { grid-template-columns: 1fr; }
  .data-row { grid-template-columns: 1fr; gap: 8px; }
  .row-actions { justify-content: flex-start; }
  .form-grid.compact .full { grid-column: 1; }
}