:root{
    --navy:#102135;
    --navy-2:#1b3552;
    --ink:#111827;
    --muted:#667085;
    --line:#d6dce5;
    --panel:#ffffff;
    --bg:#eef2f6;
    --soft:#f7fafc;
    --gold:#be9b47;
}
*{box-sizing:border-box}
body{
    margin:0;
    background:linear-gradient(180deg,#eef2f6 0%,#e6edf4 100%);
    color:var(--ink);
    font-family:Inter, Arial, Helvetica, sans-serif;
}
.topbar{
    background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);
    color:#fff;
    padding:16px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    border-bottom:3px solid rgba(190,155,71,.35);
}
.topbar a{color:#fff;text-decoration:none;margin-right:16px;font-weight:700;opacity:.95}
.topbar a:hover{opacity:1;text-decoration:underline}
.wrap{max-width:1680px;margin:0 auto;padding:22px;}
.notice{padding:12px 14px;border-radius:12px;background:#e8f5e9;border:1px solid #95c89d;margin-bottom:16px;color:#174d20;font-weight:600}
.error{padding:12px 14px;border-radius:12px;background:#fde8e8;border:1px solid #e5a3a3;margin-bottom:16px;color:#7a2020;font-weight:600}
.screen-grid{display:grid;grid-template-columns:560px 1fr;gap:22px;align-items:start;}
.panel{
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(6px);
    border:1px solid #d8e0ea;
    border-radius:22px;
    box-shadow:0 18px 40px rgba(16,33,53,.08);
    padding:20px;
}
.panel h1,.panel h2,.panel h3{margin:0 0 12px 0;color:#12253b}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;}
.field label{font-size:12px;font-weight:800;color:#334155;letter-spacing:.2px;text-transform:uppercase}
.field input,.field select,.field textarea{
    border:1px solid #bfcbda;
    border-radius:12px;
    padding:10px 12px;
    font-size:14px;
    width:100%;
    background:#fff;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#4f6d8a;box-shadow:0 0 0 3px rgba(79,109,138,.12)}
.inline-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 8px}
.btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:11px 16px;border-radius:12px;border:0;cursor:pointer;
    background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);
    color:#fff;font-weight:800;text-decoration:none;letter-spacing:.2px;
    box-shadow:0 8px 18px rgba(16,33,53,.14);
}
.btn.secondary{background:#fff;color:#16304d;border:1px solid #cad5e2;box-shadow:none}
.btn.danger{background:linear-gradient(135deg,#7a1f1f 0%,#a23838 100%)}
.editor-block{border:1px solid #d8e0ea;border-radius:18px;padding:14px;margin-bottom:14px;background:linear-gradient(180deg,#ffffff 0%,#f9fbfd 100%)}
.small{font-size:12px;color:#555}
.muted{font-size:12px;color:#667085}
.slot-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;margin:8px 0}
.a4-stage{overflow:auto}
.paper{
    width:794px;
    height:1123px;
    margin:0 auto;
    background:#fff;
    position:relative;
    box-shadow:0 18px 42px rgba(0,0,0,.22);
    border-radius:4px;
}
.paper.roster{font-family:"Arial Narrow", Arial, Helvetica, sans-serif;}
.paper.nominal{font-family:"Times New Roman", Times, serif;}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at top,#f7fafc 0%,#e8eef5 48%,#dde6ef 100%)}
.login-card{width:100%;max-width:440px;background:#fff;border:1px solid #d7e0ea;border-radius:24px;box-shadow:0 18px 40px rgba(16,33,53,.10);padding:28px}
.page-number{position:absolute;left:0;right:0;text-align:center;font-size:11px;color:#111;}
.preview-note{padding:10px 12px;background:#f4f7fb;border:1px solid #d7e1ef;border-radius:12px;margin-bottom:12px}
.eyebrow{font-size:12px;font-weight:700;color:#5f6c7b;text-transform:uppercase;letter-spacing:.6px}
.tight-note{font-size:12px;color:#5c6470;margin-top:6px}
table{border-collapse:collapse}
@media (max-width:1360px){.screen-grid{grid-template-columns:1fr}}
@media print{
  @page{size:A4 portrait;margin:0}
  body{background:#fff}
  .topbar,.controls-only,.notice,.error{display:none !important}
  .wrap{padding:0;max-width:none}
  .screen-grid{display:block}
  .panel{border:none;box-shadow:none;padding:0;background:#fff}
  .a4-stage{overflow:visible}
  .paper{box-shadow:none;margin:0 auto;border-radius:0}
}

.topbar nav{display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:flex-end;align-items:center}
.topbar nav a{margin-right:0;padding:6px 0}
.compact-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:10px}
.preview-shell{background:linear-gradient(135deg,#102135 0%,#1b3552 100%);padding:18px;border-radius:20px;max-width:100%}
.a4-stage{width:100%;overflow:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.paper{width:min(794px,100%);height:auto;aspect-ratio:794/1123;min-height:0;overflow:hidden}
@media (max-width:900px){
  body{background:#eef2f6}.wrap{padding:14px}.panel{padding:14px;border-radius:18px}.screen-grid{gap:14px}
  .topbar{padding:13px 14px;align-items:flex-start;flex-direction:column}.topbar nav{justify-content:flex-start}.topbar a{font-size:13px}
  .field-grid,.compact-grid{grid-template-columns:1fr}.inline-actions .btn,.inline-actions button{flex:1 1 160px}
  .preview-shell{padding:10px;border-radius:16px}.paper{width:100%}
}
@media (max-width:520px){
  .wrap{padding:10px}.panel{padding:12px}.login-card{padding:20px;border-radius:18px}.btn{width:100%}
}
@media print{
  .paper{width:794px !important;height:1123px !important;aspect-ratio:auto !important;overflow:hidden !important}
  .preview-shell{background:#fff !important;padding:0 !important;border-radius:0 !important}
}

.topbar{position:sticky;top:0;z-index:1000}
@media (max-width:900px){
  .topbar{gap:8px}
  .topbar > div{font-size:16px;line-height:1.2}
  .topbar nav{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .topbar nav a{display:flex;align-items:center;justify-content:center;min-height:34px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.06)}
  .field input,.field select,.field textarea{min-height:44px;font-size:16px}
  .inline-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.inline-actions .btn,.inline-actions button{width:100%;min-height:44px}
}
@media (max-width:440px){.inline-actions{grid-template-columns:1fr}.topbar nav{grid-template-columns:1fr 1fr}}


.fixed-paper-stage{max-width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;touch-action:auto}
.fixed-paper-stage .paper{flex:0 0 auto}