:root{
  --bg:#0b0f14;
  --card:#0f1722;
  --border:#223044;
  --text:#e7eefb;
  --muted:#a9b6cc;
  --accent:#5b8dff;
  --good:#34d399;
  --bad:#fb7185;
  --warn:#fbbf24;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

*{ box-sizing:border-box; }

/* Critical: prevent right-side bleed on mobile */
html, body{
  height:100%;
  margin:0;
  max-width:100%;
  overflow-x:hidden;
}

body{
  background: radial-gradient(1200px 600px at 20% 0%, rgba(91,141,255,.18), transparent 60%), var(--bg);
  color:var(--text);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.topbar{
  position: sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(11,15,20,.75);
  border-bottom:1px solid rgba(34,48,68,.6);
  padding: 14px 18px;
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap; /* mobile-safe */
}

.brand{ display:flex; align-items:center; gap:12px; }
.logo{
  width:40px; height:40px; display:grid; place-items:center;
  background:rgba(91,141,255,.12);
  border:1px solid rgba(91,141,255,.35);
  border-radius:12px;
}
.title{ font-weight:700; letter-spacing:.2px; }
.subtitle{ color:var(--muted); font-size:13px; margin-top:2px; }

.tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.tab{
  border:1px solid rgba(34,48,68,.8);
  background: rgba(17,24,36,.6);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 12px;
  cursor:pointer;
}
.tab.is-active{ border-color: rgba(91,141,255,.75); background: rgba(91,141,255,.12); }

.wrap{ max-width:1200px; margin: 18px auto; padding: 0 18px 26px; }
.panel{ display:none; }
.panel.is-active{ display:block; }

.grid-3{ display:grid; grid-template-columns: 1.1fr 1fr 1fr; gap:16px; }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:16px; }

.card{
  background: linear-gradient(180deg, rgba(15,23,34,.85), rgba(15,23,34,.65));
  border: 1px solid rgba(34,48,68,.85);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}

.card-h{ font-weight:700; margin-bottom:10px; letter-spacing:.2px; }
.stack{ display:grid; gap:10px; }

label{ display:grid; gap:6px; color: var(--muted); font-size:13px; }

/* Fix iOS/Android date input overflow */
.stack, label, .card {
  min-width: 0;
}

input, select, button, .btn {
  max-width: 100%;
  min-width: 0;
}

/* Date inputs are special snowflakes */
input[type="date"]{
  width: 100%;
  display: block;
  box-sizing: border-box;
}
/* iOS Safari: prevent date field from ignoring container sizing */
@supports (-webkit-touch-callout: none) {
  input[type="date"]{
    -webkit-appearance: none;
    appearance: none;
  }
}

.card{
  overflow: hidden;
}


input, select{
  background: rgba(17,24,36,.75);
  border:1px solid rgba(34,48,68,.9);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  outline:none;
  max-width: 100%;
}
input:focus, select:focus{ border-color: rgba(91,141,255,.85); }

.btn{
  background: rgba(17,24,36,.75);
  border: 1px solid rgba(34,48,68,.95);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
}
.btn.primary{ border-color: rgba(91,141,255,.85); background: rgba(91,141,255,.16); }
.btn.danger{ border-color: rgba(251,113,133,.85); background: rgba(251,113,133,.12); }

.hint{ color: var(--muted); font-size: 12.5px; margin-top:10px; line-height:1.35; }

.kv{ display:grid; grid-template-columns: 1fr 1fr; gap:6px 10px; margin-top:6px; }
.k{ color: var(--muted); font-size: 12.5px; }
.v{ font-weight:600; }

.bar-block{ margin-top:12px; }
.bar-title{ color: var(--muted); font-size: 12.5px; margin-bottom:6px; }
.bar{
  height:10px;
  background: rgba(34,48,68,.7);
  border-radius: 999px;
  overflow:hidden;
  border:1px solid rgba(34,48,68,.95);
}
.bar-fill{ height:100%; width:0%; background: linear-gradient(90deg, rgba(91,141,255,.95), rgba(52,211,153,.9)); }
.bar-meta{ color: var(--muted); font-size: 12.5px; margin-top:6px; }

.statusline{ margin-top:10px; font-weight:700; }

.list{ display:grid; gap:10px; }

.item{
  border: 1px solid rgba(34,48,68,.85);
  background: rgba(17,24,36,.65);
  border-radius: 14px;
  padding: 10px 12px;
}
.item .t{ font-weight:700; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.item .m{ color: var(--muted); font-size: 12.5px; margin-top:4px; }

.badge{
  display:inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  border:1px solid rgba(34,48,68,.95);
}
.badge.good{ border-color: rgba(52,211,153,.6); color: rgba(52,211,153,.95); }
.badge.bad{ border-color: rgba(251,113,133,.6); color: rgba(251,113,133,.95); }
.badge.warn{ border-color: rgba(251,191,36,.6); color: rgba(251,191,36,.95); }

.file{ display:inline-grid; gap:8px; color:var(--muted); font-size:13px; }
.file input{ padding:10px; }

.foot{
  color: var(--muted);
  font-size: 12.5px;
  padding: 18px;
  text-align:center;
  border-top:1px solid rgba(34,48,68,.6);
}

/* Book clickable title */
.book-link{
  cursor:pointer;
  text-decoration: underline;
  text-decoration-color: rgba(91,141,255,.55);
  text-underline-offset: 3px;
}

/* Modal */
.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  place-items:center;
  padding: 18px;
  z-index: 9998;
}
.modal.show{ display:grid; }
.modal-card{
  background: linear-gradient(180deg, rgba(15,23,34,.95), rgba(15,23,34,.80));
  border: 1px solid rgba(34,48,68,.9);
  border-radius: 16px;
  box-shadow: var(--shadow);
  max-width: 560px;
  width: 100%;
  padding: 14px;
}
.modal-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.modal-title{ font-weight:800; letter-spacing:.2px; }
.modal-body{ color: var(--text); }

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(20px);
  background: rgba(17,24,36,.92);
  border: 1px solid rgba(34,48,68,.95);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  font-size: 13px;
  z-index: 9999;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Table handling — mobile-safe */
.tablewrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  border: 1px solid rgba(34,48,68,.85);
}

.table{
  width:100%;
  border-collapse:collapse;
  min-width: 0; /* critical: prevents forced overflow */
}

.table th, .table td{
  padding: 10px 10px;
  border-bottom:1px solid rgba(34,48,68,.65);
  text-align:left;
  font-size: 13px;
  white-space: nowrap; /* keeps columns legible; wrapper scrolls if needed */
}

.table th{
  color: var(--muted);
  font-weight:600;
  background: rgba(17,24,36,.55);
}
.table tr:hover td{ background: rgba(91,141,255,.06); }

/* iOS polish */
@supports (-webkit-touch-callout: none) {
  body{ -webkit-tap-highlight-color: transparent; }
}

/* Responsive layout tightening */
@media (max-width: 980px){
  .wrap{ padding: 0 12px 22px; }

  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }

  .topbar{ padding: 12px 12px; }
  .tabs{ width: 100%; justify-content:flex-start; }
  .card{ padding: 12px; }

  input, select, .btn{ width:100%; }
}

/* Premium mobile: tables become cards */
@media (max-width: 700px){
  .tablewrap{ border: 0; overflow: visible; }

  .table thead{ display:none; }
  .table, .table tbody, .table tr, .table td{
    display:block;
    width:100%;
  }

  .table tr{
    border: 1px solid rgba(34,48,68,.85);
    background: rgba(17,24,36,.65);
    border-radius: 14px;
    padding: 10px 12px;
    margin: 10px 0;
  }

  .table td{
    border: 0;
    padding: 6px 0;
    white-space: normal;
  }

  .table td::before{
    content: attr(data-label);
    display:block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 2px;
  }
}