:root{
  --ink:#1c2438;
  --ink-soft:#4b5471;
  --paper:#faf7f0;
  --paper-line:#e7e0cf;
  --navy:#1f2b4d;
  --navy-2:#2e3d69;
  --gold:#b9862f;
  --gold-soft:#f0e3c6;
  --red-pen:#b3402f;
  --green-ok:#3f7a52;
  --amber:#c07f1f;
  --card:#ffffff;
  --border:#e4e1d6;
  --shadow: 0 1px 2px rgba(28,36,56,.04), 0 8px 24px -12px rgba(28,36,56,.18);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',sans-serif;
  background:#f3f0e8;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.app{display:flex; min-height:100vh;}
.sidebar{
  width:236px; flex-shrink:0;
  background:var(--navy);
  color:#dfe3ee;
  padding:22px 16px;
  display:flex; flex-direction:column; gap:22px;
}
.brand{display:flex; align-items:center; gap:10px; padding:0 6px 14px; border-bottom:1px solid rgba(255,255,255,.1);}
.brand-mark{
  width:30px; height:30px; border-radius:7px;
  background:linear-gradient(135deg,var(--gold) 0%, #8a5f1c 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:'Source Serif 4',serif; font-weight:700; color:var(--navy); font-size:15px;
}
.brand-name{font-family:'Source Serif 4',serif; font-weight:600; font-size:15.5px; color:#fff; letter-spacing:.2px;}
.brand-sub{font-size:10px; color:#9aa4c2; letter-spacing:.08em; text-transform:uppercase; margin-top:1px;}
.nav-group-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:#7783a6; padding:4px 10px 2px;}
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:8px; font-size:13.5px; font-weight:500;
  color:#c3c9dd; cursor:pointer; transition:background .15s, color .15s;
  text-decoration:none;
}
.nav-item svg{width:16px; height:16px; opacity:.85; flex-shrink:0;}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff;}
.nav-item.active{background:rgba(217,175,94,.14); color:#f2dfae; box-shadow: inset 2px 0 0 var(--gold);}
.sidebar-foot{margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.1);}
.persona-toggle{display:flex; background:rgba(255,255,255,.06); border-radius:9px; padding:3px; gap:3px;}
.persona-btn{flex:1; text-align:center; font-size:12px; font-weight:600; padding:7px 6px; border-radius:7px; color:#aab2cc; text-decoration:none;}
.persona-btn.active{background:var(--gold); color:var(--navy);}
.main{flex:1; padding:28px 34px 60px; max-width:1180px;}
.topline{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:10px;}
.eyebrow{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:4px;}
h1.page-title{font-family:'Source Serif 4',serif; font-size:26px; font-weight:600; margin:0; color:var(--navy);}
.page-desc{color:var(--ink-soft); font-size:13.5px; margin-top:5px; max-width:560px;}
.card{background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);}
.pad{padding:22px 24px;}
.btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px; cursor:pointer;
  border-radius:9px; padding:10px 18px; border:1px solid transparent; transition:all .15s;
  text-decoration:none;
}
.btn-primary{background:var(--navy); color:#fff;}
.btn-primary:hover{background:var(--navy-2);}
.btn-gold{background:var(--gold); color:var(--navy);}
.btn-gold:hover{background:#a97a2a;}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--ink-soft);}
.btn-ghost:hover{border-color:#c9c3b0; color:var(--ink);}
.btn-full{width:100%;}
.btn[disabled]{opacity:.45; cursor:not-allowed;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.field.span-2{grid-column:1 / -1;}
label{font-size:12px; font-weight:600; color:var(--ink-soft); letter-spacing:.01em;}
input[type=text], input[type=number], input[type=email], input[type=password], input[type=datetime-local], textarea, select{
  font-family:'Inter',sans-serif; font-size:13.5px; padding:10px 12px;
  border:1px solid var(--border); border-radius:8px; background:#fffdf9; color:var(--ink);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(185,134,47,.15);}
textarea{resize:vertical; min-height:70px; font-family:'Inter',sans-serif; line-height:1.5;}
.rubric-row{
  display:grid; grid-template-columns: 1.3fr 100px 2fr 34px;
  gap:10px; align-items:center; padding:9px 0; border-bottom:1px dashed var(--border);
}
.rubric-row:last-child{border-bottom:none;}
.rubric-sum{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--border);
  font-size:13px; font-weight:600; color:var(--ink-soft);
}
.rubric-sum .ok{color:var(--green-ok);}
.rubric-sum .bad{color:var(--red-pen);}
.tag-chip{
  display:inline-flex; align-items:center; gap:6px; background:var(--paper); border:1px solid var(--paper-line);
  padding:5px 10px 5px 11px; border-radius:20px; font-size:12px; color:var(--ink-soft); margin:3px 5px 0 0;
}
.tag-chip button{border:none; background:none; color:#b3a78a; cursor:pointer; font-size:13px; line-height:1;}
.add-keypoint{display:flex; gap:8px; margin-top:8px;}
.add-keypoint input{flex:1;}
.icon-btn{background:none; border:none; cursor:pointer; color:#b7b09a; padding:4px;}
.icon-btn:hover{color:var(--red-pen);}
.section-label{font-family:'Source Serif 4',serif; font-size:15px; font-weight:600; color:var(--navy); margin:26px 0 10px;}
.q-banner{
  background:linear-gradient(180deg,#fffefb, var(--paper));
  border:1px solid var(--paper-line); border-radius:12px; padding:18px 20px; margin-bottom:22px;
}
.q-meta{display:flex; gap:8px; margin-bottom:9px; flex-wrap:wrap;}
.pill{font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; background:#eef1f8; color:var(--navy-2);}
.pill.marks{background:var(--gold-soft); color:#7a591e;}
.q-text{font-family:'Source Serif 4',serif; font-size:16.5px; line-height:1.5; color:var(--ink); margin:0;}
.upload-zone{
  border:2px dashed #cfc6a8; border-radius:14px; background:#fffdf7;
  padding:38px 20px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s;
}
.upload-zone:hover{border-color:var(--gold); background:#fff9ec;}
.upload-zone svg{width:34px; height:34px; color:#b9a874; margin-bottom:10px;}
.upload-title{font-weight:600; font-size:14.5px; color:var(--ink);}
.upload-sub{font-size:12.5px; color:var(--ink-soft); margin-top:4px;}
.page-thumbs{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap;}
.page-thumb{
  width:92px; height:120px; border-radius:8px; border:1px solid var(--border);
  background:#fff repeating-linear-gradient(180deg, transparent 0 9px, #f0ece0 9px 10px);
  position:relative; box-shadow:var(--shadow); overflow:hidden;
}
.page-thumb img{width:100%; height:100%; object-fit:cover;}
.page-thumb .num{position:absolute; bottom:5px; right:6px; font-size:10px; background:var(--navy); color:#fff; padding:1px 6px; border-radius:10px;}
.page-thumb .scrawl{position:absolute; top:10px; left:8px; right:8px; font-family:'Caveat',cursive; font-size:11px; color:#5b6172; line-height:1.7; opacity:.8;}
.status-track{display:flex; align-items:center; gap:0; margin:26px 0 6px;}
.status-step{display:flex; flex-direction:column; align-items:center; flex:1; position:relative;}
.status-dot{width:26px; height:26px; border-radius:50%; background:#ece7d8; border:2px solid #d9d2ba; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#8f8567; z-index:1;}
.status-step.done .status-dot{background:var(--green-ok); border-color:var(--green-ok); color:#fff;}
.status-step.active .status-dot{background:var(--gold); border-color:var(--gold); color:var(--navy); animation:pulse 1.4s infinite;}
.status-step.fail .status-dot{background:var(--red-pen); border-color:var(--red-pen); color:#fff;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(185,134,47,.35)}50%{box-shadow:0 0 0 7px rgba(185,134,47,0)}}
.status-line{position:absolute; top:12px; left:50%; width:100%; height:2px; background:#e3ddc9; z-index:0;}
.status-step:first-child .status-line{display:none;}
.status-step.done .status-line, .status-step.active .status-line{background:var(--green-ok);}
.status-label{font-size:11px; color:var(--ink-soft); margin-top:7px; text-align:center; max-width:90px;}
.result-top{display:grid; grid-template-columns:230px 1fr; gap:26px; align-items:stretch;}
.score-ring-wrap{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:22px 10px;}
.score-num{font-family:'Source Serif 4',serif; font-size:15px; font-weight:600; color:var(--ink-soft); margin-top:10px;}
.band-chip{margin-top:8px; font-size:11.5px; font-weight:700; padding:4px 12px; border-radius:20px;}
.band-average{background:#faf0da; color:var(--amber);}
.band-good{background:#e4f2e7; color:var(--green-ok);}
.band-needs{background:#fbe6e2; color:var(--red-pen);}
.result-right{display:flex; flex-direction:column; gap:14px;}
.result-q{font-family:'Source Serif 4',serif; font-size:17px; line-height:1.5; color:var(--ink); margin:0;}
.tag-row{display:flex; flex-wrap:wrap; gap:8px;}
.eval-tag{font-size:12px; font-weight:600; padding:5px 11px; border-radius:20px; display:inline-flex; align-items:center; gap:5px;}
.eval-tag.miss{background:#fbe6e2; color:var(--red-pen);}
.eval-tag.hit{background:#e4f2e7; color:var(--green-ok);}
.meta-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px;}
.accordion{margin-top:22px; display:flex; flex-direction:column; gap:10px;}
.acc-item{border:1px solid var(--border); border-radius:11px; overflow:hidden; background:#fff;}
.acc-head{
  display:flex; align-items:center; gap:14px; padding:14px 16px; cursor:pointer;
  border-left:4px solid var(--gold);
}
.acc-head.c-amber{border-left-color:var(--amber);}
.acc-head.c-green{border-left-color:var(--green-ok);}
.acc-head.c-red{border-left-color:var(--red-pen);}
.acc-score{font-family:'Source Serif 4',serif; font-weight:700; color:var(--navy-2); font-size:14.5px; width:78px; flex-shrink:0;}
.acc-body-txt{flex:1;}
.acc-name{font-weight:600; font-size:13.5px; color:var(--ink);}
.acc-comment{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
.acc-band{font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:20px; background:#faf0da; color:var(--amber); flex-shrink:0;}
.acc-head.c-green .acc-band{background:#e4f2e7; color:var(--green-ok);}
.acc-head.c-red .acc-band{background:#fbe6e2; color:var(--red-pen);}
.acc-caret{color:#b7b09a; transition:transform .2s; flex-shrink:0;}
.acc-item.open .acc-caret{transform:rotate(180deg);}
.acc-detail{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.acc-item.open .acc-detail{max-height:220px;}
.acc-detail-inner{padding:0 16px 16px 16px; font-size:12.5px; color:var(--ink-soft); line-height:1.6; border-top:1px dashed var(--border); margin-top:0; padding-top:12px;}
.result-actions{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap;}
.sheet-wrap{display:flex; gap:24px; margin-top:26px; flex-wrap:wrap;}
.sheet-paper{
  position:relative; width:340px; background:#fdfbf4; border:1px solid var(--paper-line); border-radius:4px;
  box-shadow:var(--shadow); padding:22px 20px 26px; flex-shrink:0;
}
.sheet-paper::before{
  content:'UPSC — Mains Answer Sheet (Practice)'; display:block; text-align:center; font-size:9.5px;
  letter-spacing:.06em; color:#a49f8a; text-transform:uppercase; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--paper-line);
}
.sheet-hand{font-family:'Caveat',cursive; font-size:16.5px; line-height:2.05; color:#2b3350; white-space:pre-wrap;}
.sheet-hand b{font-weight:700;}
.sheet-img{width:100%; border-radius:4px; display:block;}
.pin{
  position:absolute; background:#fff7ea; border:1px solid var(--gold); color:var(--red-pen);
  font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:5px; box-shadow:var(--shadow);
  font-family:'Inter',sans-serif; white-space:nowrap;
}
.pin::after{content:''; position:absolute; left:-5px; top:8px; width:0; height:0; border-top:4px solid transparent; border-bottom:4px solid transparent; border-right:5px solid var(--gold);}
.model-answer-box{flex:1; min-width:280px;}
.model-answer-box h3{font-family:'Source Serif 4',serif; font-size:14.5px; margin:0 0 10px; color:var(--navy);}
.model-answer-box .card{padding:16px 18px; font-size:12.8px; line-height:1.7; color:var(--ink-soft);}
.model-answer-box ul{margin:8px 0 0; padding-left:18px;}
.footnote{font-size:11.5px; color:#a49f8a; margin-top:26px; text-align:center;}
.flash{border-radius:10px; padding:10px 14px; margin-bottom:16px; font-size:13.5px;}
.flash-ok{background:#e4f2e7; color:var(--green-ok);}
.flash-err{background:#fbe6e2; color:var(--red-pen);}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:22px;}
.stat{background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow);}
.stat .n{font-family:'Source Serif 4',serif; font-size:22px; font-weight:700; color:var(--navy);}
.stat .l{font-size:11.5px; color:var(--ink-soft); margin-top:2px;}
.table{width:100%; border-collapse:collapse; font-size:13.5px;}
.table th{text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#8a846f; padding:8px 10px; border-bottom:1px solid var(--border);}
.table td{padding:10px; border-bottom:1px solid var(--border); vertical-align:top;}
.table tr:hover td{background:#fffdf7;}
.muted{color:var(--ink-soft); font-size:12.5px;}
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.login-card{width:420px; max-width:100%;}
.user-chip{font-size:12px; color:#c3c9dd;}
.user-chip strong{color:#fff; font-weight:600;}
.hidden-file{display:none;}
.list-card{margin-bottom:12px;}
.q-item{display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px dashed var(--border);}
.q-item:last-child{border-bottom:none;}
.faculty-box{margin-top:22px; background:#fffdf7; border:1px solid var(--paper-line); border-radius:12px; padding:18px;}
.split-copy{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px;}
.copy-pane{background:#fffdf7; border:1px solid var(--paper-line); border-radius:10px; padding:12px; min-height:180px;}
.copy-pane h4{margin:0 0 10px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#8a846f;}
@media (max-width: 860px){
  .app{flex-direction:column;}
  .sidebar{width:100%; flex-direction:row; align-items:center; overflow-x:auto;}
  .sidebar-foot{display:none;}
  .nav-group-label{display:none;}
  .main{padding:20px;}
  .result-top{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .split-copy{grid-template-columns:1fr;}
}