:root{
  --paper:#EFEDE3;
  --paper-2:#E6E2D4;
  --ink:#1F2A3C;
  --ink-soft:#4B5668;
  --ink-faint:#8891A0;
  --line:#D9D4C2;
  --gold:#A9802F;
  --gold-soft:#E7D9B4;
  --teal:#2E6659;
  --teal-soft:#DCEAE4;
  --rose:#A3463A;
  --rose-soft:#F1DEDA;
  --card:#FFFFFF;
  --radius:14px;
  --shadow:0 1px 2px rgba(31,42,60,.06), 0 8px 24px -12px rgba(31,42,60,.18);
  font-size:16px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces',serif; margin:0; font-weight:600; letter-spacing:-0.01em;}
p{margin:0;}
button{font-family:inherit;cursor:pointer;}
code{background:var(--paper-2); padding:.15em .4em; border-radius:6px; font-size:.9em;}

/* ===================== LOGIN ===================== */
.login-screen{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px;
  background:
    radial-gradient(circle at 15% 10%, var(--gold-soft) 0%, transparent 40%),
    radial-gradient(circle at 85% 90%, var(--teal-soft) 0%, transparent 45%),
    var(--paper);
}
.login-card{
  width:100%; max-width:420px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:44px 36px;
  text-align:center;
  box-shadow:var(--shadow);
}
.login-mark{
  width:56px; height:56px; margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--ink);
  color:var(--gold-soft);
  font-size:1.6rem;
  font-family:'Fraunces',serif;
}
.login-mark.blocked{background:var(--rose); color:#fff;}
.login-eyebrow{font-size:.8rem; color:var(--gold); font-weight:600; margin-bottom:6px;}
.login-card h1{font-size:2rem; margin-bottom:12px;}
.login-desc{color:var(--ink-soft); font-size:.95rem; line-height:1.6; margin-bottom:26px;}
.google-btn-slot{display:flex; justify-content:center; margin-bottom:18px; min-height:44px;}
.login-note{font-size:.8rem; color:var(--ink-faint);}
.login-error{margin-top:14px; color:var(--rose); background:var(--rose-soft); padding:10px 14px; border-radius:10px; font-size:.85rem;}
.login-footer{margin-top:26px; font-size:.8rem; color:var(--ink-faint);}

/* ===================== APP SHELL ===================== */
.app{display:flex; min-height:100vh;}
.sidebar{
  width:268px; flex-shrink:0;
  background:var(--ink);
  color:#EDEAE0;
  display:flex; flex-direction:column;
  padding:28px 20px;
}
.brand{display:flex; align-items:center; gap:12px; margin-bottom:34px;}
.brand-mark{
  width:40px; height:40px; border-radius:50%;
  background:var(--gold-soft); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-size:1.1rem;
}
.brand-title{font-family:'Fraunces',serif; font-size:1.05rem; font-weight:600; color:#fff;}
.brand-sub{font-size:.72rem; color:#9AA3B5;}

.nav{display:flex; flex-direction:column; gap:4px; flex:1;}
.nav-item{
  text-align:left; background:none; border:none; color:#C7CBD8;
  padding:11px 14px; border-radius:10px; font-size:.88rem; font-weight:500;
  transition:background .15s, color .15s;
}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff;}
.nav-item.active{background:var(--gold-soft); color:var(--ink); font-weight:600;}

.sidebar-user{
  display:flex; align-items:center; gap:10px;
  padding:12px 10px; margin-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:18px;
}
.sidebar-user img{width:34px; height:34px; border-radius:50%; background:#444; object-fit:cover;}
.user-name{font-size:.84rem; font-weight:600; color:#fff;}
.user-email{font-size:.72rem; color:#9AA3B5; word-break:break-all;}

.btn-ghost{
  background:none; border:1px solid rgba(255,255,255,.18); color:#D7DAE3;
  padding:9px 12px; border-radius:10px; font-size:.82rem; margin-top:12px;
}
.btn-ghost:hover{background:rgba(255,255,255,.08);}
.btn-ghost.small{padding:7px 10px; font-size:.78rem;}

.content{flex:1; padding:40px 48px; max-width:980px;}
.view-header{margin-bottom:28px;}
.eyebrow{font-size:.78rem; font-weight:600; color:var(--gold); margin-bottom:8px;}
.view-header h1{font-size:1.9rem; margin-bottom:10px;}
.lede{color:var(--ink-soft); font-size:1rem; line-height:1.6; max-width:640px;}

/* ===================== CARDS ===================== */
.grid-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:8px;}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
}
.card h3{font-size:1.05rem; margin-bottom:8px;}
.card p{color:var(--ink-soft); font-size:.88rem; line-height:1.55; margin-bottom:14px;}
.link-btn{background:none; border:none; color:var(--teal); font-weight:600; font-size:.86rem; padding:0;}
.link-btn:hover{text-decoration:underline;}

/* ===================== SOP ===================== */
.sop-tabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px;}
.sop-tab{
  background:var(--card); border:1px solid var(--line); color:var(--ink-soft);
  padding:8px 14px; border-radius:999px; font-size:.82rem; font-weight:500;
}
.sop-tab.active{background:var(--ink); color:var(--gold-soft); border-color:var(--ink);}
.sop-list{display:flex; flex-direction:column; gap:12px; padding-left:22px; max-width:680px;}
.sop-list li{color:var(--ink); line-height:1.6; font-size:.94rem;}
.sop-list li::marker{color:var(--gold); font-weight:600;}

/* ===================== TABLES ===================== */
.table-wrap{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
}
.edit-table{width:100%; border-collapse:collapse;}
.edit-table th{
  text-align:left; font-size:.76rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-faint); font-weight:600; padding:12px 18px; border-bottom:1px solid var(--line);
  background:var(--paper-2);
}
.edit-table td{padding:10px 18px; border-bottom:1px solid var(--line); font-size:.9rem;}
.edit-table tr:last-child td{border-bottom:none;}
.edit-table .num{text-align:right;}
.edit-table tfoot td{font-weight:700; background:var(--paper-2);}
.edit-table input{
  width:100%; border:1px solid transparent; background:transparent;
  padding:6px 8px; border-radius:7px; font-size:.9rem; font-family:inherit; color:var(--ink);
}
.edit-table input:hover{border-color:var(--line);}
.edit-table input:focus{outline:none; border-color:var(--gold); background:#fff;}
.edit-table input.num-input{text-align:right;}
.row-del{background:none; border:none; color:var(--rose); font-size:1.1rem; padding:4px 8px; border-radius:6px;}
.row-del:hover{background:var(--rose-soft);}

.table-actions{display:flex; align-items:center; gap:12px; margin-top:16px;}
.saved-note{font-size:.82rem; color:var(--teal); opacity:0; transition:opacity .3s;}
.saved-note.show{opacity:1;}

.btn-primary{
  background:var(--ink); color:var(--gold-soft); border:none;
  padding:11px 20px; border-radius:10px; font-size:.88rem; font-weight:600;
  text-decoration:none; display:inline-block;
}
.btn-primary:hover{background:#2A3A52;}
.btn-primary.big{padding:14px 26px; font-size:.95rem; margin-top:6px;}
.btn-secondary{
  background:var(--card); color:var(--ink); border:1px solid var(--line);
  padding:11px 18px; border-radius:10px; font-size:.88rem; font-weight:600;
}
.btn-secondary:hover{border-color:var(--gold);}

/* status badges */
.badge{padding:4px 11px; border-radius:999px; font-size:.78rem; font-weight:600; display:inline-block;}
.badge.allowed{background:var(--teal-soft); color:var(--teal);}
.badge.blocked{background:var(--rose-soft); color:var(--rose);}
.badge.admin{background:var(--gold-soft); color:#7A5C1E;}

.status-toggle{border:none; background:none; font-size:.8rem; font-weight:600; padding:4px 0; }
.status-toggle.to-block{color:var(--rose);}
.status-toggle.to-allow{color:var(--teal);}

@media (max-width: 860px){
  .app{flex-direction:column;}
  .sidebar{width:100%; flex-direction:row; flex-wrap:wrap; align-items:center; padding:16px 20px;}
  .nav{flex-direction:row; flex-wrap:wrap; order:3; width:100%; margin-top:14px;}
  .sidebar-user{margin-top:0; border-top:none; padding-top:0;}
  .content{padding:28px 20px;}
}