/* Paybill Studio — web edition.
 *
 * The palette and the card layout are taken from the site that is already at
 * paybillstudio.com, so the conversion does not change what the office already
 * recognises. There is deliberately no left sidebar: every function is a card
 * on the dashboard, and a card opens a workspace in place.
 */

@font-face{font-family:'Noto Sans Gujarati';src:url('../fonts/NotoSansGujarati-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Sans Gujarati';src:url('../fonts/NotoSansGujarati-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Noto Sans Gujarati';src:url('../fonts/NotoSansGujarati-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --navy:#0d2747; --navy2:#163f73; --blue:#175cd3; --blue-dark:#1249a8;
  --sky:#36bffa; --blue-soft:#eaf2ff;
  --ink:#182230; --muted:#667085; --line:#e3e9f1; --bg:#f4f7fb; --card:#fff;
  --green:#087e5b; --green-soft:#ecfdf3;
  --red:#c72c41; --red-soft:#ffeaed;
  --amber:#b54708; --amber-soft:#fff4e8;
  --radius:12px; --shadow:0 1px 3px rgba(16,42,67,.06), 0 8px 24px rgba(16,42,67,.05);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Segoe UI',system-ui,-apple-system,'Noto Sans Gujarati',Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.5; min-height:100vh;
  font-size:19px;
}
:lang(gu),.gu{font-family:'Noto Sans Gujarati','Nirmala UI','Segoe UI',sans-serif}

.wrap{max-width:1180px;margin:0 auto;padding:32px 20px 64px}
@media(max-width:640px){.wrap{padding:18px 14px 44px}}

/* ------------------------------------------------------------ app header */
.app-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.app-head h1{font-size:30px;font-weight:700;letter-spacing:-.01em}
.app-head p{color:var(--muted);font-size:19px;margin-top:3px}
.head-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:7px 13px;font-size:16.5px;color:var(--muted);white-space:nowrap}
.pill .dot{width:7px;height:7px;border-radius:50%;background:#12b76a;flex:none}
.pill.warn .dot{background:var(--amber)}

/* ------------------------------------------------------------------- hero */
.hero{background:linear-gradient(105deg,var(--navy2),var(--blue));border-radius:var(--radius);
  padding:24px 28px;color:#fff;display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;box-shadow:var(--shadow)}
.hero h2{font-size:23px;font-weight:700;margin-bottom:5px}
.hero p{color:#cfe3ff;font-size:16.5px}

/* ------------------------------------------------------------- dashboard */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:18px}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}

.card-btn{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;text-align:left;cursor:pointer;font:inherit;color:inherit;
  display:flex;flex-direction:column;gap:6px;min-height:132px;transition:.15s;box-shadow:var(--shadow)}
.card-btn:hover{border-color:#9bbcff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(23,92,211,.14)}
.card-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.card-btn .icon{width:38px;height:38px;border-radius:10px;background:var(--blue-soft);color:var(--blue);
  display:grid;place-items:center;font-size:19px;font-weight:700;margin-bottom:6px}
.card-btn b{font-size:19px;font-weight:600}
.card-btn small{color:var(--muted);font-size:17.5px;line-height:1.45}

.foot-note{margin-top:20px;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:13px 16px;font-size:16.5px;color:var(--muted);line-height:1.6}

/* ------------------------------------------------------------- workspace */
.ws-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  margin-bottom:18px;flex-wrap:wrap}
.ws-head h1{font-size:27px;font-weight:700}
.ws-head p{color:var(--muted);font-size:16.5px;margin-top:3px}

.btn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:9px;
  padding:12px 19px;font:inherit;font-size:20px;cursor:pointer;white-space:nowrap;transition:.12s;
  display:inline-flex;align-items:center;gap:8px;line-height:1.3}
.btn i{font-size:.9em;flex:none}
.btn:hover{background:#f7f9fc;border-color:#c6d4e6}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--blue);font-weight:600}
.btn.danger{color:var(--red);border-color:#f3c9cf}
.btn.danger:hover{background:var(--red-soft)}
.btn.sm{padding:9px 15px;font-size:17.5px;gap:6px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;margin-bottom:18px;box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  margin-bottom:16px;flex-wrap:wrap}
.panel-head h2{font-size:22px;font-weight:600}
.panel-head p{color:var(--muted);font-size:16.5px;margin-top:2px}
.panel h3{font-size:19px;font-weight:600;margin:18px 0 10px;color:var(--navy2)}
.panel h3:first-child{margin-top:0}

/* ----------------------------------------------------------------- forms */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:820px){.grid,.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.grid,.grid.two{grid-template-columns:1fr}}

.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.wide{grid-column:1/-1}
.field label{font-size:19px;font-weight:600;color:#344054}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{
  width:100%;border:1px solid #ccd5e0;border-radius:9px;padding:13px 15px;
  font:inherit;font-size:24px;background:#fff;color:var(--ink);min-width:0}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,92,211,.12)}
.field textarea{min-height:88px;resize:vertical;line-height:1.6}
.field .hint{font-size:17.5px;color:var(--muted);line-height:1.45}

.check{display:flex;align-items:flex-start;gap:9px;font-size:19px;cursor:pointer;line-height:1.45}
.check input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--blue)}

/* --------------------------------------------------------------- notices */
.notice,.alert-ok,.alert-warn{border-radius:10px;padding:12px 15px;font-size:16.5px;
  line-height:1.6;margin:12px 0;border-left:4px solid}
.notice{background:#eff8ff;border-color:var(--sky);color:#344054}
.alert-ok{background:var(--green-soft);border-color:var(--green);color:#054f3b}
.alert-warn{background:var(--amber-soft);border-color:var(--amber);color:#7a3a06}
/* only the leading label is a heading; bold inside the sentence stays inline */
.notice>b:first-child,.alert-ok>b:first-child,.alert-warn>b:first-child{display:block;margin-bottom:3px}
/* Home page welcome notice — shown prominently with a large font */
.home-notice{font-size:20px;padding:18px 22px;line-height:1.65;background:#e6f4ff;
  border-color:var(--blue);border-left-width:5px;margin:18px 0}

.empty{padding:38px 20px;text-align:center;color:var(--muted);font-size:19px}

/* ---------------------------------------------------------------- tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
table.data{width:100%;border-collapse:collapse;font-size:16.5px}
table.data th{background:#f8fafc;color:#475467;font-size:15px;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;text-align:left;padding:10px 12px;white-space:nowrap}
table.data td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
table.data tr:hover td{background:#fbfcfe}
table.data td.num{text-align:right;font-variant-numeric:tabular-nums}

.badge{display:inline-block;font-size:15px;font-weight:600;padding:3px 8px;border-radius:999px;
  background:#eef2f6;color:#475467}
.badge.info{background:var(--blue-soft);color:var(--blue)}
.badge.ok{background:var(--green-soft);color:var(--green)}
.badge.warn{background:var(--amber-soft);color:var(--amber)}
.badge.crit{background:var(--red-soft);color:var(--red)}

/* ------------------------------------------------------------------ misc */
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:16.5px}

#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:#17324f;color:#fff;padding:12px 20px;border-radius:10px;font-size:16.5px;
  opacity:0;pointer-events:none;transition:.22s;z-index:90;max-width:90vw;box-shadow:0 8px 30px rgba(0,0,0,.25)}
#toast.show{opacity:1;transform:translate(-50%,0)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===========================================================================
 * The dashboard, as tiles.
 *
 * The shape is taken from chintanmahida.in, where every tool is a small white
 * card with a thin coloured rule and a short capitalised label. Paybill Studio
 * is the one thing people come here for, so it gets a tile of its own, twice
 * the height of the rest, and the eighteen bill codes sit below the functions
 * in their own block so a code can be found by eye.
 * ======================================================================== */

.masthead{background:linear-gradient(160deg,#0b2244 0%,#123a6b 55%,#175cd3 100%);
  color:#fff;padding:46px 20px 40px;text-align:center;position:relative;overflow:hidden}
.masthead::after{content:'';position:absolute;inset:auto -10% -60% -10%;height:160px;
  background:radial-gradient(60% 100% at 50% 0,rgba(54,191,250,.35),transparent 70%)}
.masthead .crest{width:54px;height:54px;border-radius:14px;margin:0 auto 14px;
  display:grid;place-items:center;font-size:26px;font-weight:700;color:#0b2244;
  background:linear-gradient(140deg,#7fd4ff,#eaf4ff);box-shadow:0 8px 22px rgba(0,0,0,.25)}
.masthead h1{font-size:clamp(34px,6.4vw,56px);font-weight:800;letter-spacing:-.022em;line-height:1.05;
  background:linear-gradient(92deg,#ffffff 20%,#bfe4ff 85%);-webkit-background-clip:text;
  background-clip:text;color:transparent;text-shadow:0 2px 26px rgba(0,0,0,.18)}
.masthead .rule{width:120px;height:3px;margin:16px auto 13px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#5cc6ff,transparent)}
.masthead .sub{font-size:clamp(12.5px,2.2vw,15px);letter-spacing:.24em;text-transform:uppercase;
  color:#bcd9ff;font-weight:600}
.masthead .tag{margin-top:14px;font-size:17.5px;color:#d7e8ff;max-width:640px;
  margin-left:auto;margin-right:auto;line-height:1.6}
.masthead .tools{margin-top:20px;display:flex;gap:9px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2}
.masthead .tools .btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);color:#fff}
.masthead .tools .btn:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}
@media(max-width:640px){.masthead{padding:34px 16px 30px}}

/* section headings between tile blocks */
.tile-head{display:flex;align-items:center;gap:14px;margin:34px 0 15px}
.tile-head:first-child{margin-top:0}
.tile-head h2{font-size:16.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy2);white-space:nowrap}
.tile-head .line{flex:1;height:1px;background:var(--line)}
.tile-head .count{font-size:15px;color:var(--muted);white-space:nowrap}

/* the headline tile */
.tile-lead{width:100%;display:flex;align-items:center;gap:26px;text-align:left;cursor:pointer;
  font:inherit;color:#fff;border:0;border-radius:16px;padding:30px 34px;
  background:linear-gradient(115deg,#123a6b,#175cd3 60%,#1b74e4);
  box-shadow:0 12px 34px rgba(18,58,107,.26);transition:.16s;position:relative;overflow:hidden}
.tile-lead::before{content:'';position:absolute;right:-40px;top:-60px;width:250px;height:250px;
  border-radius:50%;background:rgba(255,255,255,.07)}
.tile-lead:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(18,58,107,.34)}
.tile-lead:focus-visible{outline:3px solid #7fd4ff;outline-offset:3px}
.tile-lead .mark{width:74px;height:74px;flex:none;border-radius:18px;display:grid;place-items:center;
  font-size:34px;font-weight:700;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28)}
.tile-lead .txt{min-width:0;position:relative;z-index:2}
.tile-lead .txt b{display:block;font-size:24px;font-weight:700;letter-spacing:-.01em}
.tile-lead .txt span{display:block;font-size:16.5px;color:#d5e8ff;margin-top:5px;line-height:1.55}
.tile-lead .go{margin-left:auto;flex:none;position:relative;z-index:2;
  background:#fff;color:#123a6b;font-weight:700;font-size:17.5px;border-radius:999px;padding:12px 22px;
  letter-spacing:.02em;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
@media(max-width:700px){
  .tile-lead{flex-wrap:wrap;gap:16px;padding:24px 20px}
  .tile-lead .mark{width:56px;height:56px;font-size:26px;border-radius:14px}
  .tile-lead .txt b{font-size:22px}
  .tile-lead .go{margin-left:0;width:100%;text-align:center}
}

/* the College Profile tile, above Monthly Paybill and in its own colour so
 * the two are never mistaken for one another */
.tile-lead.sky{background:linear-gradient(115deg,#0b6fa8,#1ea7e0 55%,#36bffa);
  box-shadow:0 12px 34px rgba(11,111,168,.26);margin-bottom:16px}
.tile-lead.sky:hover{box-shadow:0 18px 44px rgba(11,111,168,.32)}
.tile-lead.sky .go{color:#0b6fa8}

/* Guided chat: deliberately distinct from both Monthly Paybill and the
 * offline download while keeping the same lead-tile hierarchy. */
.tile-lead.agent{margin-top:16px;text-decoration:none;
  background:linear-gradient(115deg,#5b21b6,#7c3aed 55%,#a855f7);
  box-shadow:0 12px 34px rgba(91,33,182,.25)}
.tile-lead.agent:hover{box-shadow:0 18px 44px rgba(91,33,182,.34)}
.tile-lead.agent .go{color:#6d28d9}
.tile-lead.sky.offline{margin-top:16px;margin-bottom:0}

/* the ordinary tiles */
.tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
.tiles.codes{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.tiles.links{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

.tile{background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);
  border-radius:12px;padding:20px 14px 17px;text-align:center;cursor:pointer;font:inherit;color:inherit;
  display:flex;flex-direction:column;align-items:center;gap:9px;min-height:142px;
  box-shadow:0 1px 2px rgba(16,42,67,.05);transition:.15s;text-decoration:none}
.tile:hover{border-color:#9bbcff;border-top-color:var(--blue);transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(23,92,211,.16)}
.tile:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tile .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--blue-soft);color:var(--blue);font-size:23px;font-weight:700;flex:none}
.tile b{font-size:15px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--navy);line-height:1.35}
.tile small{font-size:15px;color:var(--muted);line-height:1.45;margin-top:-2px}

/* a bill-code tile: a real fa- icon on top, the code as a small tag under
 * it, then the title and Gujarati name — sized to actually read at a glance. */
.tile.code{min-height:160px;padding:19px 14px 16px;gap:7px}
.tile.code .code-tag{font-size:15px;font-weight:700;letter-spacing:.09em;color:var(--muted);
  font-family:ui-monospace,Consolas,monospace;text-transform:uppercase;margin-top:-2px}
.tile.code b{font-size:17.5px;letter-spacing:0;text-transform:none;font-weight:700;
  color:var(--ink);line-height:1.32}
.tile.code .gu{font-size:16.5px;color:var(--muted);line-height:1.45}

/* "Other" now renders as the same .tile as a bill code (icon on top, title,
 * one muted description line) instead of its own left-aligned card, and
 * every tile - bill code or Other, whatever it used to be coloured - uses
 * the one blue .ic already set by the base .tile rule above. */
.tile.link{min-height:118px;justify-content:center}
.tile.link b{text-transform:none;font-size:16.5px;letter-spacing:0}

.tiles.hyperlinks{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}

.site-foot{border-top:1px solid var(--line);margin-top:46px;padding:22px 20px 34px;text-align:center;
  font-size:16.5px;color:var(--muted);line-height:1.8}
.site-foot b{color:var(--navy2)}
/* A001 is the monthly bill; its code tile leads to the same workspace. */
.tile.code.lead{border-top-color:var(--blue);background:linear-gradient(180deg,#f4f8ff,#fff)}
.tile.code.lead .ic{background:var(--blue);color:#fff}

/* ===========================================================================
 * The enclosure packet on the Monthly Paybill screen.
 *
 * These rules are the desktop application's, so the panel that the twelve
 * enclosures draw themselves into looks the same in both editions. They are
 * copied from src/renderer/studio-v11.css; the web shell only supplies the
 * .form-grid and .layout-settings the same markup expects.
 * ======================================================================== */
/* ---- Monthly Paybill: the બિડાણ (enclosure) panel ---------------------- */
/* The packet is twelve items long, so each one is a single line until the
 * user opens it. Only the opened enclosure shows its employee table. */
.mc-panel{border-color:#c7d7ee}
.mc-panel .panel-head{align-items:flex-start;flex-wrap:wrap;gap:12px}
.mc-panel h3{margin:0;font-size:19px}
.mc-panel h4.mc-general-head{margin:18px 0 8px;font-size:17.5px;color:#475467}
.mc-item{border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:8px;background:#fff}
.mc-item.mc-off{background:#fbfcfe;opacity:.6}
.mc-item-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mc-item-head b{font-weight:600;font-size:16.5px}
.mc-item .muted{margin:6px 0 0;font-size:16.5px}
.mc-pick{display:flex;align-items:center;gap:8px;cursor:pointer;flex:1;min-width:280px}
.mc-mini{padding:5px 9px;font-size:16.5px;line-height:1.2}
.mc-body{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px}
.mc-table{display:grid;gap:5px;margin-bottom:9px;overflow-x:auto}
.mc-row{display:grid;gap:6px;align-items:center;min-width:760px}
.mc-row.mc-head span{font-size:15px;font-weight:600;color:#475467;text-transform:none;letter-spacing:.01em}
.mc-row input[type=text],.mc-row input:not([type]){width:100%}
.mc-row input{border:1px solid #ccd5e0;border-radius:7px;padding:9px 10px;font:inherit;font-size:19px;width:100%}
.mc-check{display:grid;place-items:center}
.mc-check input{width:auto}
.mc-letter textarea,.mc-suggestion textarea{width:100%;margin-top:9px;border:1px solid #ccd5e0;border-radius:8px;padding:10px;font:inherit;font-size:16.5px;resize:vertical}
.mc-suggestion .actions{margin-top:9px}

.mc-warn{margin-top:10px;border-left-color:#c72c41;background:#ffeaed;color:#7a1424}

/* What the shared markup expects from the host page. */
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:900px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}}
.form-grid .field label{font-size:19px;font-weight:600;color:#344054}
.form-grid input,.form-grid select,.form-grid textarea{
  width:100%;border:1px solid #ccd5e0;border-radius:9px;padding:13px 15px;font:inherit;font-size:24px}

/* A page waiting to be checked and, if need be, corrected. */
.doc-card{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:12px 0;background:#fff}
.doc-card .check b{font-size:17.5px;font-weight:600}
.doc-card textarea{width:100%;margin-top:10px;border:1px solid #ccd5e0;border-radius:8px;
  padding:11px 13px;font:inherit;font-size:16.5px;line-height:1.65;resize:vertical}
.doc-card textarea[readonly]{background:#f8fafc;color:var(--muted)}
.mode-block{border:1px solid var(--line);border-radius:10px;padding:13px 15px;background:#fff}
.mode-block b{display:block;font-size:16.5px;font-weight:700;color:var(--navy2);margin-bottom:9px}
.mode-block .check{margin-bottom:7px}

/* A page shown before it is exported. */
.doc-preview{white-space:pre-wrap;font:inherit;font-size:16.5px;line-height:1.7;color:#344054;
  margin-top:9px;background:#fbfcfe;border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  max-height:280px;overflow:auto}
table.data input{width:100%;border:1px solid #ccd5e0;border-radius:7px;padding:7px 9px;
  font:inherit;font-size:19px;min-width:80px}
table.data input[type=checkbox]{width:16px;min-width:0;accent-color:var(--blue)}
table.data tfoot th{background:#f4f7fb;padding:10px 12px;font-size:16.5px;border-top:2px solid var(--line)}
.ai-points{margin:12px 0 0 20px;font-size:16.5px;line-height:1.75;color:#344054}
.ai-points li{margin-bottom:7px}

/* ------------------------------------------------ letterpad and printing */
/* The one "how will this be printed" choice, shown on the College Profile
 * and inside every bill (js/letterpad.js draws it). */
.lp-panel{display:flex;flex-direction:column;gap:14px}
.lp-opt{border:2px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff;align-items:flex-start}
.lp-opt:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}
.lp-opt b{display:block;font-size:21px;color:var(--navy);margin-bottom:4px}
.lp-opt input{width:22px;height:22px;margin-top:4px}
.lp-help{display:block;font-size:17px;color:#475467;line-height:1.6}
.lp-upload{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:-4px 0 4px 40px}
.lp-upload.lp-dim{opacity:.55}
.lp-status{font-size:17px;color:var(--green);font-weight:600}
.lp-preview-host{flex-basis:100%}
.lp-sheet{position:relative;overflow:hidden;background:#fff;border:1px solid #ccd5e0;border-radius:4px;
  box-shadow:0 2px 8px rgba(16,42,67,.12);max-width:100%}
@media(max-width:560px){.lp-upload{margin-left:0}}

/* The A4 drawing for "(2) Print on Already Printed Letterpad": drag the
 * slider and the letterhead band grows. */
.lp-space{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;margin-top:18px;
  padding-top:16px;border-top:1px dashed var(--line)}
.lp-space-controls{flex:1 1 280px;min-width:240px}
.lp-space-label{display:block;font-size:19px;font-weight:600;color:#344054;margin-bottom:10px}
.lp-range{width:100%;accent-color:var(--blue);height:28px}
.lp-space-note{font-size:17px;color:var(--muted);margin-top:8px;line-height:1.6}
.lp-start{color:var(--blue)}
.lp-space-sheet-wrap{flex:0 0 auto}
.lp-space-sheet{width:150px;height:212px;border:1px solid #ccd5e0;border-radius:4px;background:#fff;
  position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(16,42,67,.12)}
.lp-band{position:absolute;top:0;left:0;right:0;border-bottom:1px dashed var(--blue);
  background:repeating-linear-gradient(45deg,#eaf2ff,#eaf2ff 6px,#dbe8ff 6px,#dbe8ff 12px)}
.lp-lines{position:absolute;left:10px;right:10px;top:0;bottom:0}
.lp-space-cap{font-size:15px;color:var(--muted);text-align:center;margin-top:6px;width:150px}

/* Export: big round buttons, centred, after the last page. */
.export-bar{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;
  margin:26px 0 6px;padding-top:22px;border-top:1px solid var(--line)}
.btn.big{border-radius:999px;padding:18px 38px;font-size:23px;font-weight:600;min-width:210px;
  justify-content:center;border-width:2px;box-shadow:0 2px 6px rgba(16,42,67,.10)}
.btn.big i{font-size:1em}
@media(max-width:560px){.btn.big{width:100%}}

/* Export button individual colours — white text on all three */
/* HTML button — sky blue */
.btn.big#exportHtml,.btn.big[data-out="html"]{
  background:#0ea5e9;border-color:#0ea5e9;color:#fff}
.btn.big#exportHtml:hover,.btn.big[data-out="html"]:hover{
  background:#0284c7;border-color:#0284c7}
/* Word button — indigo (modern, not dark navy) */
.btn.big#exportWord,.btn.big[data-out="word"]{
  background:#6366f1;border-color:#6366f1;color:#fff}
.btn.big#exportWord:hover,.btn.big[data-out="word"]:hover{
  background:#4f46e5;border-color:#4f46e5}
/* PDF button — rose red (lighter, fresh) */
.btn.big.primary,.btn.big#exportPdf,.btn.big[data-out="pdf"]{
  background:#f43f5e;border-color:#f43f5e;color:#fff}
.btn.big.primary:hover,.btn.big#exportPdf:hover,.btn.big[data-out="pdf"]:hover{
  background:#e11d48;border-color:#e11d48}