:root {
  color-scheme:light;
  --ink:#203943;
  --muted:#61737c;
  --blue:#356a7e;
  --line:#e2e9ec;
  --paper:#f5f7f8;
  --white:#fff;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
}

button,input,select,textarea {
  font:inherit;
}

button,a,input,select,textarea {
  outline-offset:4px;
}

button {
  cursor:pointer;
}

button:disabled {
  opacity:.55;
  cursor:not-allowed;
}

a {
  color:inherit;
  text-decoration:none;
}

[hidden] {
  display:none!important;
}

.header {
  max-width:1180px;
  margin:auto;
  padding:24px 36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}

.brand {
  display:flex;
  gap:11px;
  align-items:center;
  font-weight:650;
  letter-spacing:.07em;
}

.brand-wordmark {
  font-size:15px;
  letter-spacing:.13em;
  font-weight:600;
}

.brand-mark {
  display:block;
  width:40px;
  height:40px;
  flex-shrink:0;
  object-fit:contain;
}

#session-nav {
  display:flex;
  align-items:center;
  gap:22px;
  font-size:13px;
}

main {
  max-width:1108px;
  margin:0 auto;
  padding:48px 0 56px;
  min-height:calc(100vh - 100px);
}

h1,h2,p {
  margin-top:0;
}

h1 {
  font-size:34px;
  letter-spacing:-.025em;
  font-weight:550;
  line-height:1.45;
  margin-bottom:12px;
}

h2 {
  font-size:17px;
  font-weight:600;
  margin-bottom:15px;
}

.muted {
  color:var(--muted);
  font-size:14px;
}

.fine {
  font-size:12px;
  color:var(--muted);
  margin:16px 0 0;
}

.login-layout {
  display:grid;
  grid-template-columns:minmax(0,1.8fr) minmax(300px,1fr);
  align-items:center;
  gap:clamp(32px,4vw,56px);
  max-width:1108px;
  margin:0 auto;
}

.login-card {
  padding:32px 0;
  width:100%;
  max-width:360px;
  justify-self:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.login-card h1 {
  font-size:30px;
  font-weight:550;
}

.login-intro {
  margin:4px 0 28px;
}

.coast-scene {
  overflow:hidden;
  background:var(--paper);
  margin:0;
  align-self:center;
  min-width:0;
}

.coast-image {
  display:block;
  width:100%;
  height:auto;
  mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 89%,transparent);
}

.loading {
  text-align:center;
  padding:150px 0;
  color:var(--muted);
}

label {
  display:block;
  font-size:13px;
  color:#4c6069;
  margin-bottom:16px;
}

input,select,textarea {
  display:block;
  width:100%;
  border:1px solid #dce4e7;
  background:white;
  border-radius:7px;
  padding:11px 12px;
  margin-top:7px;
  color:var(--ink);
  min-height:48px;
  min-width:0;
}

input::placeholder {
  color:#75858e;
}

input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid #b6ced8;
  border-color:#89afbf;
}

.primary,.secondary,.text-button {
  border:0;
  border-radius:7px;
  padding:10px 17px;
  font-size:13px;
  min-height:44px;
}

.primary {
  background:var(--blue);
  color:white;
}

.primary:hover {
  background:#28596d;
}

.primary.danger {
  background:#a63d3d;
}

.primary.danger:hover {
  background:#862f2f;
}

.secondary {
  background:white;
  border:1px solid var(--line);
  color:var(--ink);
}

.text-button {
  background:transparent;
  color:var(--blue);
  padding:7px;
}

.full {
  width:100%;
}

.page-heading,.section-heading,.card-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.page-heading {
  margin-bottom:26px;
}

.page-heading h1 {
  margin:0;
  font-size:30px;
}

.dashboard-grid {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:24px;
}

.card {
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  padding:30px;
}

.card-heading h2 {
  margin:0;
}

.remaining {
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:24px 0 22px;
}

.remaining span:first-child {
  font-size:clamp(44px,5.4vw,76px);
  overflow-wrap:anywhere;
  line-height:1.1;
  font-weight:450;
  letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
}

.remaining span:last-child {
  font-size:19px;
  color:var(--muted);
}

progress {
  width:100%;
  height:7px;
  appearance:none;
  border:0;
  border-radius:5px;
  overflow:hidden;
  background:#eaf0f2;
}

progress::-webkit-progress-bar {
  background:#eaf0f2;
}

progress::-webkit-progress-value {
  background:#709cac;
  border-radius:5px;
}

progress::-moz-progress-bar {
  background:#709cac;
}

.usage-caption {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted);
  margin-top:8px;
}

.usage-caption strong {
  color:var(--ink);
  font-weight:500;
}

.usage-details {
  display:flex;
  gap:20px 32px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  margin-top:26px;
  padding-top:20px;
}

.usage-details div {
  display:flex;
  flex-direction:column;
  font-size:12px;
}

.usage-details span {
  color:var(--muted);
  margin-bottom:5px;
}

.usage-details strong {
  font-weight:500;
}

.status {
  font-size:12px;
  padding:4px 10px;
  border-radius:20px;
  background:#edf5f1;
  color:#48745d;
}

.status.paused {
  background:#fff2e5;
  color:#92602a;
}

.subscription-card .muted {
  margin-bottom:24px;
}

.subscription-meta {
  border-top:1px solid var(--line);
  margin-top:22px;
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
}

.subscription-meta span {
  color:var(--muted);
}

.subscription-meta strong {
  font-weight:500;
}

.activity-strip {
  display:flex;
  align-items:center;
  gap:22px;
  padding:23px 5px;
  color:var(--muted);
  font-size:12px;
  flex-wrap:wrap;
}

.activity-strip>div {
  display:flex;
  align-items:center;
  gap:8px;
}

.activity-strip strong {
  font-weight:500;
  color:#556c76;
}

.activity-dot {
  width:7px;
  height:7px;
  background:#b7c3c9;
  border-radius:50%;
}

.activity-dot.live {
  background:#6a9d80;
}

.section-heading {
  margin:26px 0 14px;
}

.section-heading h2 {
  margin:0;
}

.section-heading p {
  margin:5px 0 0;
  font-size:12px;
}

.actions {
  display:flex;
  gap:10px;
}

.table-card {
  padding:0;
  overflow:hidden;
}

.table-scroll {
  overflow:auto;
}

table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  white-space:nowrap;
  font-size:13px;
}

th {
  font-weight:500;
  color:var(--muted);
  font-size:12px;
  background:#fbfcfc;
}

th,td {
  padding:15px 22px;
  border-bottom:1px solid #edf1f3;
}

tbody tr:last-child td {
  border-bottom:0;
}

.history-scroll {
  max-height:360px;
}

thead {
  position:sticky;
  top:0;
}

.history-section {
  margin-top:22px;
}

.table-card .text-button {
  min-height:44px;
  min-width:44px;
  padding:3px 6px;
}

.notice {
  padding:13px 17px;
  margin:0 0 18px;
  border:1px solid #e4d9bf;
  background:#fbf7ed;
  color:#836b3e;
  border-radius:8px;
  font-size:13px;
}

.form-error {
  font-size:13px;
  color:#a63d3d;
  margin:12px 0 0;
  min-height:0;
}

.form-error:empty {
  display:none;
}

dialog {
  border:1px solid var(--line);
  border-radius:14px;
  padding:30px;
  width:min(460px,calc(100vw - 32px));
  box-shadow:0 20px 100px #263e4c26;
  color:var(--ink);
}

dialog::backdrop {
  background:#1c36484d;
  backdrop-filter:blur(3px);
}

.dialog-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}

.dialog-heading h2 {
  margin:0;
  font-size:21px;
}

.close {
  border:0;
  background:transparent;
  font-size:28px;
  color:var(--muted);
  padding:0 5px;
  min-width:44px;
  min-height:44px;
  flex-shrink:0;
}

.dialog-heading+.muted {
  margin-bottom:22px;
}

#toast {
  position:fixed;
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  left:50%;
  transform:translateX(-50%);
  padding:12px 22px;
  background:#203943;
  color:white;
  border-radius:8px;
  box-shadow:0 4px 30px #20394326;
  z-index:10;
  max-width:90vw;
  font-size:13px;
}

#copy-fallback {
  margin-top:15px;
}

#subscription-text {
  font-size:13px;
}

@media(max-width:1180px) {
  main {
    margin-left:30px;
    margin-right:30px;
  }
  .header {
    padding-left:30px;
    padding-right:30px;
  }
}

@media(max-width:760px) {
  main {
    padding-top:26px;
    margin:0 18px;
  }
  .header {
    padding:20px 18px;
  }
  .brand {
    font-size:14px;
  }
  #session-nav {
    gap:8px;
  }
  .login-layout {
    display:block;
    min-height:0;
  }
  .coast-scene {
    width:100%;
    max-width:480px;
    margin:0 auto 24px;
  }
  .login-card {
    padding:0 0 24px;
    margin:auto;
    max-width:400px;
  }
  .login-card h1 {
    font-size:29px;
  }
  .login-intro {
    margin:14px 0 23px;
  }
  .dashboard-grid {
    grid-template-columns:1fr;
    gap:16px;
  }
  .card {
    padding:23px;
  }
  .remaining span:first-child {
    font-size:clamp(38px,10vw,65px);
  }
  .usage-details {
    gap:22px;
    flex-wrap:wrap;
  }
  .page-heading h1 {
    font-size:27px;
  }
  .page-heading {
    gap:8px;
  }
  .activity-strip {
    gap:10px 15px;
  }
  .section-heading {
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .actions {
    gap:6px;
  }
  .actions button {
    padding:8px 11px;
    font-size:12px;
  }
  th,td {
    padding:13px 16px;
  }
  .table-card {
    padding:0;
  }
  .subscription-card .muted {
    margin-bottom:18px;
  }
}

@media(prefers-reduced-motion:no-preference) {
  button {
    transition:background .15s ease;
  }
  dialog[open] {
    animation:appear .15s ease;
  }
  @keyframes appear {
    from {
      opacity:0;
      transform:translateY(6px);
    }
    to {
      opacity:1;
      transform:translateY(0);
    }
  }
}



/* Quiet surfaces; touch-friendly controls and stable data alignment. */
.skip-link { position:fixed; top:8px; left:16px; padding:10px 16px; background:var(--white); z-index:20; clip-path:inset(50%); }
.skip-link:not(:focus) { width:1px; height:1px; padding:0; overflow:hidden; white-space:nowrap; }
.skip-link:focus { clip-path:none; }
main:focus { outline:none; }
button,a,input,select,textarea { -webkit-tap-highlight-color:#356a7e18; }
button,a { touch-action:manipulation; }
button:focus-visible,a:focus-visible,.table-scroll:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.heading-actions { display:flex; gap:10px; flex-wrap:wrap; }
.page-heading { flex-wrap:wrap; }
.page-heading>div:first-child { margin-right:auto; }
.card,.login-card,.usage-details>div { min-width:0; }
.card-heading { align-items:flex-start; flex-wrap:wrap; gap:10px; }
.card-heading h2 { padding-top:3px; }
.status { max-width:100%; }
.usage-caption { gap:12px; flex-wrap:wrap; }
.usage-caption strong,.usage-details strong,td,.subscription-meta strong { font-variant-numeric:tabular-nums; }
.subscription-meta { flex-wrap:wrap; }
.table-scroll { overscroll-behavior-x:contain; }
.table-hint { display:none; }
.history-scroll th:not(:first-child),.history-scroll td:not(:first-child),#admin-section th:nth-child(2),#admin-section td:nth-child(2),#admin-section th:nth-child(4),#admin-section td:nth-child(4) { text-align:right; }
.history-scroll table { min-width:400px; }
#admin-section table { min-width:640px; }
#nav-user { overflow:hidden; text-overflow:ellipsis; max-width:220px; white-space:nowrap; }
#logout { white-space:nowrap; }
dialog { max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; }
.dialog-heading h2 { overflow-wrap:anywhere; }
textarea { resize:vertical; }
#mfa-controls { border-top:1px solid var(--line); margin-top:24px; padding-top:20px; }
#logout-all { margin-top:16px; }
.primary.is-copied { background:#426c58; }
@media(hover:hover) {
  .secondary:hover,.text-button:hover,.close:hover { background:#eaf0f2; color:var(--ink); }
  tbody tr:hover { background:#f6f9fa; }
}
@media(min-width:761px) and (max-width:980px) {
  .dashboard-grid { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:18px; }
  .card { padding:24px; }
  .table-card { padding:0; }
}
@media(max-width:760px) {
  .header { flex-wrap:wrap; gap:14px; }
  #session-nav { margin-left:auto; }
  .brand-wordmark { font-size:13px; }
  .brand-mark { width:34px; height:34px; }
  #nav-user { max-width:160px; }
  .page-heading { gap:16px; margin-bottom:22px; }
  .heading-actions { gap:8px; }
  .heading-actions button { flex:1; }
  input,select,textarea { font-size:16px; }
  .section-heading { gap:12px; }
  .actions { flex-wrap:wrap; }
  dialog { padding:22px; }
  .fine { font-size:13px; }
  .table-hint { display:block; margin:0; padding:12px 16px; color:var(--muted); font-size:12px; border-bottom:1px solid var(--line); }
  #admin-section th:last-child,#admin-section td:last-child { position:sticky; right:0; background:var(--white); box-shadow:-1px 0 var(--line); }
  #admin-section th:last-child { background:#fbfcfc; }
  .history-scroll table { min-width:340px; }
  .history-scroll th,.history-scroll td { font-size:12px; padding:13px 9px; }
}
@media(max-width:420px) {
  .heading-actions { width:100%; }
  .card { padding:20px; }
  .table-card { padding:0; }
  .usage-caption { font-size:13px; }
  .activity-strip { align-items:flex-start; flex-direction:column; }
  .section-heading .actions { width:100%; }
  .section-heading .actions button { flex:1; }
  .subscription-meta { gap:6px; }
}
@media(prefers-reduced-motion:no-preference) {
  .login-layout { animation:page-in .32s ease-out both; }
  button { transition:background .16s ease,color .16s ease,transform .12s ease; }
  button:active:not(:disabled) { transform:translateY(1px) scale(.985); }
  @keyframes page-in { from { opacity:0; } to { opacity:1; } }
}