:root{
  --bg:#0f172a; --panel:#111827; --muted:#94a3b8; --text:#e5e7eb; --accent:#3aa8ff; --border:#1f2937;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  background:var(--bg); color:var(--text); margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  font-size:16px;
}
.iphone-safe{ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

.topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; background:var(--panel); border-bottom:1px solid var(--border); }
.brand{ display:flex; align-items:center; gap:10px }
.logo-small{ width:36px; height:36px; border-radius:8px }
.badge{ padding:4px 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted) }

.container{ max-width:1000px; margin:16px auto; padding:0 12px; display:grid; gap:16px; }
.narrow-iphone{ max-width:414px; }
.panel{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:0 10px 25px rgba(0,0,0,.25) }
.table-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.table-scroll{ overflow:auto; -webkit-overflow-scrolling:touch }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.field{ display:flex; flex-direction:column; gap:6px }
.field.full{ grid-column:1 / -1 }
label{ color:var(--muted); font-size:.95rem }
input, select{ width:100%; padding:14px 12px; border-radius:12px; border:1px solid var(--border); background:#0b1222; color:var(--text); outline:none; }
input:focus, select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(58,168,255,.25) }
table{ width:100%; border-collapse:separate; border-spacing:0 }
th, td{ padding:10px 12px; border-bottom:1px solid var(--border) }
th{ text-align:left; color:var(--muted); position:sticky; top:0; background:var(--panel) }
.right{ text-align:right }
.empty{ color:var(--muted); text-align:center; padding:16px }
.btn-primary{ background:var(--accent); color:#0b1020; padding:12px 14px; border:none; border-radius:12px; font-weight:700; cursor:pointer }
.btn-ghost{ background:transparent; color:#fff; border:1px solid var(--accent); padding:10px 12px; border-radius:12px; cursor:pointer }
.btn-danger{ background:#ef4444; color:white; padding:10px 12px; border:none; border-radius:12px; cursor:pointer }
.block{ width:100% }
.card{ border:1px solid var(--border); border-radius:16px; background:var(--panel); box-shadow:0 10px 25px rgba(0,0,0,.3) }
.page-center{ display:flex; justify-content:center; align-items:center; min-height:100vh; padding:16px }
.logo-large{ width:80px; height:80px; border-radius:14px; margin:0 auto 16px; display:block }
.stack.gap > * + *{ margin-top:10px }
.sep{ border:0; border-top:1px solid var(--border); margin:18px 0 }
.center{ text-align:center }
.mobile-footer{ position:fixed; bottom:env(safe-area-inset-bottom); left:0; right:0; padding:10px; display:flex; justify-content:flex-end; pointer-events:none }
.fab{ pointer-events:auto; width:56px; height:56px; border-radius:50%; border:none; background:var(--accent); color:#0b1020; font-size:28px; font-weight:900; box-shadow:0 12px 30px rgba(0,0,0,.4) }
@media (max-width: 430px){
  .grid-2{ grid-template-columns:1fr }
  .narrow-iphone{ max-width:414px; margin:12px auto; padding:0 8px }
  .panel{ padding:12px }
  .mobile-card-table thead{ display:none }
  .mobile-card-table, .mobile-card-table tbody, .mobile-card-table tr, .mobile-card-table td{ display:block; width:100% }
  .mobile-card-table tr{ border:1px solid var(--border); border-radius:12px; padding:10px; margin-bottom:10px; background:rgba(255,255,255,.02) }
  .mobile-card-table td{ display:flex; justify-content:space-between; align-items:center; border-bottom:none; padding:8px 6px }
  .mobile-card-table td::before{ content: attr(data-label); color:var(--muted); margin-right:12px; }
  .mobile-card-table td:last-child{ padding-top:10px; gap:8px; justify-content:flex-end }
}
.muted{ color: var(--muted); } .small{ font-size:.9rem; }