:root{
  color-scheme: light dark;
  --bg: Canvas;
  --fg: CanvasText;
  --muted: color-mix(in oklab, var(--fg) 30%, var(--bg) 70%);
  --card: color-mix(in oklab, var(--bg) 98%, var(--fg) 2%);
  --border: color-mix(in oklab, var(--fg) 15%, var(--bg) 85%);
  --accent: color-mix(in oklab, #ff3b30 55%, #0ab9e6 45%);
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;margin:0;background:var(--bg);color:var(--fg)}
a{color:inherit}
.header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(90deg,#ff3b30,#0ab9e6);color:#fff}
.container{max-width:1200px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;margin:16px 0}
.btn{appearance:none;border:1px solid var(--border);padding:8px 12px;border-radius:10px;background:var(--bg);color:var(--fg);cursor:pointer}
input,select,textarea{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--fg);width:100%}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.notice{padding:10px 12px;border-radius:10px;background:color-mix(in oklab, yellow 20%, var(--bg) 80%);border:1px solid color-mix(in oklab, orange 35%, var(--bg) 65%)}
.table-wrap{overflow:auto}
.table{width:100%;min-width:820px;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border);white-space:normal;text-align:left}
code{background:color-mix(in oklab, var(--bg) 85%, var(--accent) 15%);padding:2px 6px;border-radius:6px}
@media (max-width: 900px){ .grid2{grid-template-columns:1fr} }


.break-any{ word-break: break-all; overflow-wrap:anywhere; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace }
.table-sticky thead th{ position: sticky; top: 0; background: var(--bg); z-index: 1; }


/* Brand & toolbar */
.header .brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700}
.header .brand img{height:28px;width:auto;border-radius:6px;display:block}
.header .actions a{margin-left:8px}
.toolbar{
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    margin: 8px 0;
}
.btn.primary{background:linear-gradient(90deg,#ff3b30,#0ab9e6);color:#fff;border-color:transparent}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.btn.link{background:transparent;border-color:transparent;text-decoration:underline;padding-left:0}

a {
    text-decoration: none;
}

.pager {
    padding: 20px;
    text-align: center;
}