/* Shared, accessible workspace surfaces. The ontology remains the home destination. */
.surface-page {
  --surface-line: #293b47;
  --surface-soft: #12212b;
  --surface-panel: #101d26;
  --surface-ink: #f0efe7;
  --surface-muted: #a6b6be;
  --surface-teal: #7ad4c5;
  --surface-gold: #d3bc88;
  min-height: 100%;
  height: auto;
  color-scheme: dark;
  background: #0b151d;
  color: var(--surface-ink);
  font-size: 15px;
  line-height: 1.55;
}
.ui-icon { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; vertical-align: middle; pointer-events: none; }
.surface-page a { text-underline-offset: 4px; }
.surface-page .muted, .surface-page .hint, .surface-page .tagline { color: var(--surface-muted); }
.surface-page .small, .surface-page .hint { font-size: 13px; line-height: 1.55; }
.surface-page .error { color: #ffacaa; }
.surface-page button, .surface-page .btn, .surface-page .connection-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 10px 15px; border: 1px solid transparent; border-radius: 7px;
  background: var(--surface-teal); color: #0b2725; font: inherit; font-weight: 650;
  transition: background .15s, border-color .15s, transform .15s;
}
.surface-page button:hover, .surface-page .btn:hover { background: #a3e9dc; }
.surface-page button:disabled { opacity: .48; cursor: not-allowed; }
.surface-page .ghost-btn, .surface-page .stop, .surface-page .conn-actions .check {
  background: transparent; color: var(--surface-ink); border-color: var(--surface-line);
}
.surface-page .ghost-btn:hover, .surface-page .conn-actions .check:hover { background: #203640; border-color: #48616c; }
.surface-page .stop { color: #f7abaa; }
.surface-page .stop:hover { background: #351f27; border-color: #895059; }
.surface-page :is(a, button, summary, input, textarea, select):focus-visible { outline: 2px solid #9ae5d7; outline-offset: 4px; }
.surface-page input:not([type=checkbox]):not([type=radio]), .surface-page select, .surface-page textarea {
  display: block; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px;
  border: 1px solid #3a4e5a; border-radius: 6px; background: #0b161f; color: var(--surface-ink);
  font: inherit; box-sizing: border-box;
}
.surface-page input::placeholder, .surface-page textarea::placeholder { color: #849ba8; }
.surface-page textarea { resize: vertical; line-height: 1.55; }
.surface-page input[type=checkbox], .surface-page input[type=radio] { width: 18px; height: 18px; accent-color: var(--surface-teal); vertical-align: middle; }
.surface-page label { font-size: 14px; font-weight: 550; }
.surface-page label > :is(input, textarea, select) { margin-top: 6px; }
.surface-page fieldset { min-width: 0; border: 1px solid var(--surface-line); border-radius: 8px; padding: 16px; }
.surface-page legend { padding: 0 6px; color: var(--surface-muted); font-size: 13px; }
.surface-page .choice { font-weight: 400; }
.surface-page .choice input { margin-top: 0; }
.surface-page h1, .surface-page h2, .surface-page h3 { color: var(--surface-ink); line-height: 1.25; letter-spacing: -.025em; }
.surface-page h1 { font-size: clamp(27px, 3vw, 38px); font-weight: 600; }
.surface-page h2 { font-size: 20px; font-weight: 600; }
.surface-page h3 { font-size: 17px; font-weight: 600; }
.surface-page p { overflow-wrap: anywhere; }
.surface-page code { font-size: 13px; color: #bed8df; }
.surface-page pre { font-size: 13px; line-height: 1.6; }
.surface-page .page, .surface-page .inbox, .surface-page .agora {
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 48px 36px 64px;
}
.surface-page .surface-topbar {
  min-height: 80px; gap: 28px; padding: 0 32px; border-bottom: 1px solid var(--surface-line);
  background: #0c1821; box-shadow: 0 1px 0 #060f1580; position: relative; z-index: 20;
}
.surface-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--surface-ink, #f0efe7); text-decoration: none; white-space: nowrap; }
.surface-brand > .ui-icon { width: 29px; height: 29px; color: var(--surface-gold, #d3bc88); }
.surface-brand > span { font-size: 18px; font-weight: 650; letter-spacing: .04em; }
.surface-brand small { display: block; margin-top: 2px; color: var(--surface-muted); font-size: 10px; letter-spacing: .08em; font-weight: 400; }
.surface-nav { display: flex; align-self: stretch; align-items: stretch; gap: 6px; margin-right: auto; }
.surface-nav a { display: flex; align-items: center; gap: 8px; padding: 12px; color: var(--surface-muted); text-decoration: none; font-size: 13px; white-space: nowrap; border-bottom: 2px solid transparent; }
.surface-nav .ui-icon { width: 17px; height: 17px; }
.surface-nav a:hover { color: var(--surface-ink); background: #ffffff04; }
.surface-nav a[aria-current=page] { color: var(--surface-teal); border-bottom-color: var(--surface-teal); background: linear-gradient(transparent,#7ad4c50b); }
.surface-account { position: relative; font-size: 13px; min-width: 0; }
.surface-account summary { display: flex; align-items: center; gap: 9px; list-style: none; cursor: pointer; white-space: nowrap; }
.surface-account summary::-webkit-details-marker { display: none; }
.surface-account summary > span:last-child { max-width: 160px; text-overflow: ellipsis; overflow: hidden; }
.surface-avatar { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid #465955; border-radius: 50%; background: #23352f; color: #d5e6ce; font-size: 12px; font-weight: 650; }
.surface-account > div { position: absolute; right: 0; top: calc(100% + 15px); width: 160px; padding: 8px; background: var(--surface-panel); border: 1px solid var(--surface-line); border-radius: 8px; box-shadow: 0 12px 35px #0005; }
.surface-account > div a { display: block; padding: 10px; color: var(--surface-ink); text-decoration: none; }
.surface-account > div a:hover { background: var(--surface-soft); }
.surface-skip { position: fixed; top: -100px; left: 16px; z-index: 1000; padding: 12px 18px; background: var(--surface-teal); color: #0b151d !important; border-radius: 6px; }
.surface-skip:focus { top: 12px; }
.surface-heading { display: flex; align-items: flex-start; gap: 20px; margin: 0 0 32px; }
.surface-heading-icon { display: grid; place-items: center; flex-shrink: 0; width: 54px; height: 54px; margin-top: 6px; color: var(--surface-gold); background: #d3bc8810; border: 1px solid #d3bc8830; border-radius: 12px; }
.surface-heading-icon .ui-icon { width: 27px; height: 27px; }
.surface-page .surface-heading h1 { margin: 0; }
.surface-page .surface-eyebrow { color: var(--surface-gold); font-size: 10px; font-weight: 650; letter-spacing: .16em; line-height: 1.5; margin: 0 0 10px; }
.surface-description { max-width: 720px; margin: 12px 0 0; color: var(--surface-muted); font-size: 15px; line-height: 1.65; }
.surface-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 28px 0 14px; }
.surface-section-heading strong { color: var(--surface-ink); }
.surface-page .surface-section-title { font-size: 16px; margin: 28px 0 18px; }
.surface-empty { width: 100%; padding: 52px 24px; border: 1px dashed #354b58; border-radius: 12px; text-align: center; background: #101f2855; }
.surface-empty > .ui-icon { width: 38px; height: 38px; margin-bottom: 14px; color: var(--surface-gold); }
.surface-empty h2 { margin: 0 0 12px; }
.surface-empty p { max-width: 500px; margin: 0 auto 20px; color: var(--surface-muted); }
.surface-link { display: inline-flex; align-items: center; gap: 10px; color: var(--surface-teal); text-decoration: none; }
.surface-disclosure { padding: 18px 24px; border: 1px solid var(--surface-line); border-radius: 10px; background: var(--surface-panel); margin: 16px 0; }
.surface-disclosure > summary { cursor: pointer; color: var(--surface-ink); font-weight: 550; padding: 3px 0; }
.surface-disclosure[open] > summary { margin-bottom: 20px; }
.surface-page .card { padding: 24px; margin: 0 0 18px; border: 1px solid var(--surface-line); background: var(--surface-panel); border-radius: 10px; }
.surface-page .card h3 { margin: 0 0 12px; }
.surface-page .pill { display: inline-flex; align-items: center; border: 1px solid #43505a; padding: 3px 8px; border-radius: 5px; font-size: 11px; line-height: 1.5; background: #ffffff05; color: #b9c8d0; }
.surface-page .pill.dest, .surface-page .pill.noun { color: #9edfd1; border-color: #2f5c53; background: #16332d; }
.surface-page .pill.warn, .surface-page .pill.sens { color: #e6c595; border-color: #66563b; background: #342b1e; }
.surface-page .modal { background: #030a12b8; backdrop-filter: blur(8px); z-index: 100; }
.surface-page .modal-box { border: 1px solid #405661; background: #11212c; border-radius: 16px; box-shadow: 0 25px 100px #0008; padding: 30px; }
.surface-page .modal-box.wide { width: min(700px, calc(100vw - 32px)); max-width: 700px; }
.surface-page .modal-box .close { width: 40px; height: 40px; padding: 8px; color: #b8c9d0; background: transparent; }
.surface-page .modal-box h3 { padding-right: 28px; }
.surface-page .modal-actions { flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* Systems are recognizable before a user reads the technical kind. */
.connection-journey { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; padding: 22px; margin: 0; background: #111f28; border: 1px solid var(--surface-line); border-radius: 10px; }
.connection-journey li { display: flex; gap: 12px; padding: 0 18px; border-right: 1px solid var(--surface-line); }
.connection-journey li:first-child { padding-left: 0; }
.connection-journey li:last-child { border: 0; padding-right: 0; }
.journey-number { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border: 1px solid #4d625b; border-radius: 50%; color: var(--surface-gold); font-size: 12px; }
.connection-journey strong { font-size: 13px; font-weight: 550; }
.connection-journey p { margin: 6px 0 0; color: var(--surface-muted); font-size: 12px; line-height: 1.6; }
.surface-page .conn-list { display: grid; gap: 12px; margin: 0; }
.surface-page .conn { display: flex; justify-content: space-between; gap: 22px; padding: 24px; border: 1px solid var(--surface-line); border-radius: 10px; background: var(--surface-panel); }
.surface-page .conn-head { gap: 12px; }
.connection-identity { display: flex; flex-direction: column; gap: 3px; margin-right: 8px; overflow-wrap: anywhere; }
.connection-identity b { font-size: 15px; font-weight: 550; }
.connection-identity > span { color: var(--surface-muted); font-size: 12px; }
.service-icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 11px; border: 1px solid #354957; border-radius: 11px; color: #8ec1f0; background: #162b39; }
.service-icon svg { width: 24px; height: 24px; }
.service-gdrive { background: #f1f4ed; border-color: #c7d5cb; }
.service-files { color: #e0bf7c; background: #302e23; border-color: #534b34; }
.service-http { color: #bcb1ef; background: #29253c; border-color: #454060; }
.surface-page .conn-actions { justify-content: flex-end; margin: 0; gap: 8px; max-width: 48%; }
.surface-page .conn-actions button { min-height: 36px; font-size: 12px; padding: 7px 10px; }
.surface-page .conn-actions a { font-size: 12px; color: var(--surface-teal); }
.surface-page .conn-status { flex-basis: 100%; text-align: right; }
.surface-page .kind-picker { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 22px; }
.surface-page .kind-card { display: flex; align-items: flex-start; justify-content: flex-start; gap: 12px; width: 100%; padding: 18px 14px; background: #0b1922; border: 1px solid #344b58; color: var(--surface-ink); text-align: left; }
.surface-page .kind-card:hover { background: #183038; border-color: var(--surface-teal); }
.kind-card-copy { display: flex; flex-direction: column; gap: 7px; font-weight: 400; }
.kind-card-copy b { font-size: 14px; font-weight: 550; }
.surface-page .kind-card .small { font-size: 12px; }
.kind-card > .ui-icon { display: none; }
.surface-page .kind-card .service-icon { width: 36px; height: 36px; padding: 7px; border-radius: 8px; }
.surface-page .kind-card .service-icon svg { width: 21px; height: 21px; }
.surface-page .banner { padding: 14px 18px; border-radius: 8px; }
.surface-page .banner.ok { border: 1px solid #336357; color: #b4e3cf; background: #16342d; }
.surface-page .oauth-box { padding: 18px; border: 1px solid var(--surface-line); border-radius: 8px; }

/* Task-focused applications and decisions. */
.app-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.app-grid > .surface-empty { grid-column: 1/-1; }
.surface-page .app-tile { display: flex; flex-direction: column; gap: 12px; min-height: 250px; padding: 28px; margin: 0; color: var(--surface-ink); transition: border-color .18s, transform .18s; }
.surface-page .app-tile:hover { transform: translateY(-3px); border-color: #65988e; }
.app-tile-icon { display: grid; place-items: center; width: 45px; height: 45px; border: 1px solid #3c5750; border-radius: 10px; background: #213730; color: var(--surface-teal); margin-bottom: 12px; }
.surface-page .app-tile h3 { font-size: 19px; margin: 0; }
.surface-page .app-tile p { margin: 0 0 18px; font-size: 14px; }
.app-tile-action { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--surface-line); color: var(--surface-teal); font-size: 13px; font-weight: 550; }
.surface-page .decisions-page { max-width: 1000px; }
.decisions-page #cards > .card { border-left: 3px solid var(--surface-gold); }
.surface-page .card .situation { max-height: 24rem; margin: 18px 0; padding: 18px; background: #0b1720; border: 1px solid #263b48; border-radius: 6px; font: inherit; font-size: 14px; line-height: 1.7; }
.surface-page .card .options { gap: 10px; }
.surface-page .history-title { margin: 42px 0 6px; padding-top: 28px; border-top: 1px solid var(--surface-line); }
.surface-page .hist-row { padding: 18px 0; border-bottom: 1px solid var(--surface-line); line-height: 1.8; }
.surface-page .hist-row b { color: var(--surface-ink); font-size: 14px; font-weight: 550; }
.surface-page .placeholder { padding: 28px; border: 1px dashed #3a4c57; border-radius: 8px; text-align: center; font-size: 14px; }
.surface-page .withheld { display: inline-flex; align-items: center; gap: 6px; }
.surface-page .withheld .ui-icon { width: 15px; height: 15px; }
.surface-page .stats-row { gap: 16px; margin-bottom: 24px; }
.surface-page .card.stat { min-width: 170px; padding: 24px; text-align: left; border-top: 2px solid #749789; }
.surface-page .stat-value { font-size: 34px; font-weight: 550; color: var(--surface-ink); font-variant-numeric: tabular-nums; }
.surface-page .stat-hint { font-size: 12px; margin-top: 8px; }
.surface-page .table-wrap table { font-size: 14px; }
.surface-page .table-wrap th, .surface-page .table-wrap td { padding: 12px; border-bottom-color: var(--surface-line); }
.surface-page .table-wrap th { font-size: 12px; color: var(--surface-muted); background: var(--surface-panel); }
.surface-page .table-wrap tbody tr:hover { background: #ffffff03; }
.surface-page .table-wrap .act-btn { min-height: 34px; font-size: 12px; padding: 6px 10px; }
.surface-page .search-form { gap: 12px; margin: 18px 0; }
.surface-page .record { border-color: var(--surface-line); }
.surface-page .record-fields { gap: 14px; }
.surface-page .record-fields dt { font-size: 12px; }
.surface-page .record-fields dd { font-size: 15px; }
.surface-page .bar-row { margin: 18px 0; font-size: 14px; }
.surface-page .bar-track { height: 9px; background: #233943; }
.surface-page .bar-track i, .surface-page .score-bar i { background: var(--surface-teal); }

/* Roles, permissions, and work retain their existing form contracts. */
.surface-page .access-page { max-width: 1050px; }
.surface-page .access-page section { padding: 26px; margin: 22px 0; border: 1px solid var(--surface-line); border-radius: 10px; background: var(--surface-panel); }
.surface-page .access-page section h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.surface-page .access-page section h2 > .ui-icon { color: var(--surface-gold); }
.surface-page .access-page section > .muted { margin: 0 0 24px; }
.surface-page .access-page form { gap: 14px; }
.surface-page .access-page form label { margin: 0; }
.surface-page .access-page .choice { margin: 5px 20px 5px 0; }
.surface-page .access-page :is(td,th) { padding: 13px 10px; font-size: 13px; border-bottom-color: var(--surface-line); }
.surface-page .access-page th { color: var(--surface-muted); font-weight: 550; font-size: 12px; }
.surface-page .access-page td button { min-height: 32px; font-size: 12px; }
.surface-page .access-page pre:empty { display: none; }
.surface-page #credential { border: 1px solid #977e46; border-radius: 8px; background: #2a271b; padding: 20px; }
.surface-page .connection-message { border-color: #b0985c; background: #322c1f; color: #ead29e; border-radius: 5px; }
.surface-page .connection-message.success { border-color: #528975; color: #bde4d1; background: #19342d; }
.surface-page .agora-columns { gap: 28px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.surface-page .agora-columns > section { min-width: 0; }
.surface-page .agora-columns > section > h2 { display: flex; align-items: center; gap: 10px; }
.surface-page .agora-columns > section > h2 .ui-icon { color: var(--surface-gold); }
.surface-page .agora-columns > section > .muted { font-size: 14px; min-height: 45px; margin-bottom: 24px; }
.surface-page .agora form, .surface-page .agora article { padding: 22px; border: 1px solid var(--surface-line); border-radius: 10px; background: var(--surface-panel); margin: 18px 0; }
.surface-page .agora form h3 { margin: 0 0 20px; }
.surface-page .agora form p { font-size: 13px; }
.surface-page .agora form label { margin-bottom: 18px; }
.surface-page .agora .meta { color: var(--surface-muted); font-size: 12px; }
.surface-page .agora #search-form { display: flex; gap: 10px; padding: 0; border: 0; background: none; }
.surface-page .agora #search-form input { flex: 1; }
.surface-page .agora #search-form button { margin: 0; flex-shrink: 0; }
.surface-page .agora #work-detail:not(:empty) { padding: 24px; border: 1px solid #4d756b; border-radius: 10px; background: #112b2a; }
.surface-page .agora dialog { color: var(--surface-ink); background: var(--surface-panel); border: 1px solid #45616d; border-radius: 14px; padding: 24px; box-shadow: 0 24px 100px #0009; }
.surface-page .agora dialog::backdrop { background: #030a12ad; backdrop-filter: blur(6px); }
.surface-page .agora dialog form[method=dialog] { display: flex; justify-content: flex-end; padding: 0; margin: 0; border: 0; }
.surface-context-note { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-left: 2px solid var(--surface-gold); background: #d3bc8808; color: var(--surface-muted); font-size: 13px; }
.surface-context-note > .ui-icon { color: var(--surface-gold); }
.surface-page .stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 14px; margin: 30px 0; }
.surface-page .stats li { padding: 20px; background: var(--surface-panel); border: 1px solid var(--surface-line); border-radius: 8px; font-size: 13px; }
.surface-page .stats b { font-size: 28px; color: var(--surface-ink); font-weight: 550; }
.surface-page .bulk { flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.surface-page .disc { border: 1px solid var(--surface-line); border-radius: 8px; padding: 18px; margin: 10px 0; background: var(--surface-panel); }
.surface-page .disc.known { opacity: .65; }
.surface-page .disc label { gap: 10px; }
.surface-page .disc label b { font-size: 14px; }
.surface-page .disc-why { margin: 10px 0 0 28px; }
.surface-page .sticky-actions { gap: 14px; flex-wrap: wrap; padding: 18px 24px; border: 1px solid #426559; border-radius: 10px; background: #142820; box-shadow: 0 -8px 30px #0004; }

/* Cost information uses the same visual grammar without changing its precision. */
.surface-page .costs-main { max-width: 1320px; padding: 48px 36px 64px; }
.surface-page .costs-heading { margin-bottom: 30px; }
.surface-page .costs-heading h1 { font-size: 36px; }
.surface-page .costs-heading h1 .ui-icon { width: 28px; height: 28px; margin-right: 8px; color: var(--surface-gold); }
.surface-page .costs-filters, .surface-page .costs-evidence-card, .surface-page .costs-total, .surface-page .costs-billing { border-color: var(--surface-line); background: var(--surface-panel); border-radius: 10px; padding: 24px; }
.surface-page .costs-filter-row > label, .surface-page .costs-picker summary > span, .surface-page .costs-segments legend { font-size: 12px; color: var(--surface-muted); }
.surface-page .costs-picker summary b { background: #0b161f; border-color: #3a4e5a; min-height: 44px; }
.surface-page .costs-options { background: #142731; border-color: #49616b; padding: 6px; border-radius: 8px; box-shadow: 0 12px 32px #0006; }
.surface-page .costs-options button { justify-content: flex-start; color: var(--surface-ink); background: transparent; }
.surface-page .costs-options button[aria-pressed=true] { background: #254138; color: var(--surface-teal); }
.surface-page .costs-segments span { border-color: #3a4e5a; font-size: 13px; }
.surface-page .costs-segments input:checked + span { background: #233e37; border-color: #71b9a6; color: #b3e8d5; }
.surface-page .costs-summary { padding: 22px 0; }
.surface-page .costs-stat b { font-size: 27px; }
.surface-page .costs-stat span, .surface-page .costs-evidence-card dt, .surface-page .costs-reservation-values dt { font-size: 12px; }
.surface-page .costs-evidence-card dd, .surface-page .costs-total dt { font-size: 13px; }
.surface-page .costs-section { margin-top: 38px; }
.surface-page .costs-main h2 { font-size: 21px; }
.surface-page .costs-table { font-size: 13px; }
.surface-page .costs-table th, .surface-page .costs-table td { padding: 12px; border-color: var(--surface-line); }
.surface-page .costs-table th { color: var(--surface-muted); background: var(--surface-panel); }
.surface-page .costs-trend-options button { background: var(--surface-panel); border-color: var(--surface-line); color: var(--surface-muted); font-size: 12px; }
.surface-page .costs-trend-options button[aria-pressed=true] { color: var(--surface-teal); border-color: var(--surface-teal); }
.surface-page .costs-chart { background: var(--surface-panel); border-color: var(--surface-line); border-radius: 8px; }
.surface-page .costs-empty, .surface-page .costs-notice { border-color: #435860; border-radius: 8px; background: var(--surface-panel); }
.surface-page .costs-definitions summary { color: var(--surface-teal); }

/* The entrance has the same identity as the work itself. */
.surface-page.auth-page { background: radial-gradient(ellipse at 15% 30%,#1b3738 0,transparent 60%),#0b151d; }
.login-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); min-height: 100vh; min-height: 100dvh; max-width: 1440px; margin: auto; }
.login-story { display: flex; flex-direction: column; justify-content: space-between; padding: 54px 64px; border-right: 1px solid var(--surface-line); background-image: radial-gradient(#87ada31a 1px,transparent 1px); background-size: 28px 28px; }
.login-story > div { max-width: 540px; padding: 60px 0; }
.surface-page .login-story h1 { margin: 16px 0 20px; font-size: clamp(40px,5vw,66px); font-weight: 500; letter-spacing: -.045em; line-height: 1.1; }
.login-story > div > p:not(.surface-eyebrow) { max-width: 400px; color: var(--surface-muted); font-size: 17px; }
.login-story > small { color: var(--surface-gold); font-size: 12px; }
.login-constellation { display: flex; align-items: center; max-width: 365px; margin-top: 52px; }
.login-constellation > span { display: grid; place-items: center; width: 65px; height: 65px; flex-shrink: 0; border: 1px solid #476059; border-radius: 14px; background: #102824; color: var(--surface-teal); box-shadow: 0 0 50px #2d816114; }
.login-constellation > span:nth-of-type(2) { width: 85px; height: 85px; border-color: #8b835c; color: var(--surface-gold); background: #292e22; }
.login-constellation .ui-icon { width: 28px; height: 28px; }
.login-constellation i { flex: 1; height: 1px; background: linear-gradient(90deg,#476059,#a29761); }
.surface-page .login-layout .login { width: 100%; max-width: 440px; align-self: center; margin: 48px auto; padding: 40px; border: 0; border-radius: 0; background: transparent; }
.login-mark { display: inline-flex; color: var(--surface-gold); margin-bottom: 22px; }
.login-mark > .ui-icon { width: 36px; height: 36px; }
.surface-page .login h2 { margin: 0 0 10px; font-size: 27px; }
.surface-page .login .tagline { margin-bottom: 30px; font-size: 14px; }
.surface-page .login form { margin: 26px 0 0; }
.surface-page .login form label { margin-bottom: 20px; }
.surface-page .login form button, .surface-page .login .btn { width: 100%; }
.surface-page .google-signin { border-color: #40545f; background: #f2f1e9; color: #1d292d; }
.surface-page .google-signin:hover { background: white; }
.surface-page .standalone-auth, .surface-page .renewal-page, .surface-page .connection-setup { max-width: 560px; margin: 9vh auto; padding: 36px; background: var(--surface-panel); border: 1px solid var(--surface-line); border-radius: 14px; }
.surface-back { display: flex; align-items: center; gap: 8px; margin-bottom: 30px; font-size: 13px; color: var(--surface-muted); text-decoration: none; }
.surface-page .renewal-page h1 { font-size: 27px; overflow-wrap: anywhere; }
.surface-page .renewal-page form { margin: 28px 0; }
.surface-page .connection-setup section { padding: 0; border: 0; }

@media (max-width: 1150px) {
  .surface-page .surface-topbar { gap: 16px; padding: 0 22px; }
  .surface-brand small { display: none; }
  .surface-nav { gap: 2px; }
  .surface-nav a { padding: 12px 9px; font-size: 12px; }
  .surface-account summary > span:last-child { max-width: 110px; }
  .surface-page .conn { flex-direction: column; gap: 18px; }
  .surface-page .conn-actions { max-width: none; justify-content: flex-start; }
  .surface-page .conn-status { text-align: left; }
  .login-story { padding: 40px; }
}
@media (max-width: 850px) {
  .surface-page .surface-topbar { flex-wrap: wrap; gap: 0; padding: 14px 20px 0; }
  .surface-brand { margin: 0 0 12px; }
  .surface-nav { order: 3; width: 100%; overflow-x: auto; min-width: 0; }
  .surface-nav a { padding: 13px 12px; font-size: 13px; }
  .surface-account { margin: 0 0 12px auto; }
  .surface-account summary > span:last-child { max-width: 160px; }
  .surface-page .page, .surface-page .inbox, .surface-page .agora, .surface-page .costs-main { padding: 32px 24px 50px; }
  .app-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .connection-journey { grid-template-columns: 1fr; gap: 18px; }
  .connection-journey li { border: 0; padding: 0; }
  .connection-journey strong { font-size: 14px; }
  .surface-page .agora-columns { grid-template-columns: 1fr; }
  .surface-page .agora-columns > section > .muted { min-height: 0; }
  .login-layout { grid-template-columns: 1fr; }
  .login-story { min-height: 280px; padding: 30px; border-right: 0; border-bottom: 1px solid var(--surface-line); }
  .login-story > div { padding: 24px 0 10px; }
  .surface-page .login-story h1 { font-size: 42px; }
  .login-story > small, .login-constellation { display: none; }
  .surface-page .login-layout .login { margin: 24px auto; }
}
@media (max-width: 520px) {
  .surface-page { font-size: 14px; }
  .surface-page .surface-topbar { padding: 12px 16px 0; }
  .surface-nav a { padding: 12px 10px; font-size: 12px; }
  .surface-nav .ui-icon { width: 16px; height: 16px; }
  .surface-brand > span { font-size: 16px; }
  .surface-page .page, .surface-page .inbox, .surface-page .agora, .surface-page .costs-main { padding: 26px 16px 40px; }
  .surface-heading { gap: 13px; margin-bottom: 26px; }
  .surface-heading-icon { width: 40px; height: 40px; border-radius: 9px; }
  .surface-heading-icon .ui-icon { width: 22px; height: 22px; }
  .surface-page h1 { font-size: 27px; }
  .surface-description { font-size: 14px; }
  .surface-section-heading { align-items: flex-start; gap: 12px; }
  .surface-section-heading > p { font-size: 12px; }
  .surface-page .connect-btn { margin: 0; font-size: 12px; }
  .surface-page .conn, .surface-page .card, .surface-page .access-page section { padding: 18px; }
  .surface-page .conn-head { gap: 10px; }
  .connection-identity b { font-size: 13px; }
  .surface-page .kind-picker { grid-template-columns: 1fr; }
  .surface-page .modal-box { padding: 22px; }
  .surface-page .modal-box.wide { max-height: 88dvh; overflow-y: auto; }
  .surface-page .modal-actions { justify-content: stretch; }
  .surface-page .modal-actions > button { flex: 1; }
  .app-grid { grid-template-columns: 1fr; }
  .surface-page .app-tile { min-height: 220px; }
  .surface-page .card.stat { min-width: 125px; padding: 18px; }
  .surface-page .search-form { flex-wrap: wrap; }
  .surface-page .search-form input { flex-basis: 100%; }
  .surface-page .agora #search-form { flex-wrap: wrap; }
  .surface-page .agora #search-form input { flex-basis: 100%; }
  .surface-page .access-page table { display: block; max-width: 100%; overflow-x: auto; }
  .surface-page .access-page th, .surface-page .access-page td { padding: 10px 8px; }
  .surface-page .agora form, .surface-page .agora article, .surface-disclosure { padding: 18px; }
  .surface-page .costs-filters, .surface-page .costs-evidence-card, .surface-page .costs-total, .surface-page .costs-billing { padding: 18px; }
  .surface-page .costs-heading h1 { font-size: 28px; }
  .surface-page .sticky-actions { padding: 14px; }
  .surface-page .standalone-auth, .surface-page .renewal-page, .surface-page .connection-setup { max-width: calc(100% - 32px); padding: 24px; margin: 32px auto; }
  .surface-page .login-layout .login { padding: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .surface-page *, .surface-page *::before, .surface-page *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.surface-page .service-file_table { color: #a1dec0; background: #17392c; border-color: #3c6550; }
.surface-account > div { width: 200px; }
/* Author display rules must never make native hidden states visible. */
.surface-page [hidden] { display: none !important; }
@media (min-width: 851px) and (max-width: 1050px) {
  .surface-page .surface-topbar { flex-wrap: wrap; gap: 0; padding: 14px 22px 0; }
  .surface-brand { margin-bottom: 12px; }
  .surface-nav { order: 3; width: 100%; min-width: 0; overflow-x: auto; }
  .surface-nav a { padding: 13px 12px; font-size: 13px; }
  .surface-account { margin: 0 0 12px auto; }
}