/* =========================================================
   Invoice Generator — invoicegenerators.in
   Premium Professional Green theme
   ========================================================= */
:root{
  --green:#27ae60;
  --green-600:#219653;
  --green-700:#1e874b;
  --green-50:#eafaf1;
  --green-100:#d5f5e3;
  --ink:#333333;
  --ink-2:#556070;
  --muted:#7a8794;
  --line:#e6e9ec;
  --bg:#ffffff;
  --bg-2:#f7faf8;
  --bg-3:#f2f6f4;
  --danger:#e74c3c;
  --amber:#f5b301;
  --shadow-sm:0 1px 2px rgba(15,44,25,.06), 0 2px 6px rgba(15,44,25,.05);
  --shadow-md:0 10px 24px -12px rgba(15,44,25,.18), 0 2px 6px rgba(15,44,25,.06);
  --shadow-lg:0 30px 60px -20px rgba(15,44,25,.25), 0 8px 20px rgba(15,44,25,.08);
  --radius:14px;
  --radius-sm:10px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --accent: #27ae60;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--green-100); color:var(--ink) }
img{max-width:100%; display:block}
a{color:var(--green-700); text-decoration:none}
a:hover{color:var(--green)}
button{font-family:inherit}

.container{max-width:1200px; margin:0 auto; padding:0 22px}

/* -------- Buttons -------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.7rem 1.15rem; border-radius:999px; font-weight:600; font-size:.95rem;
  border:1px solid transparent; cursor:pointer; text-decoration:none; color:var(--ink);
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--green); color:#fff; box-shadow:0 6px 16px -6px rgba(39,174,96,.55)}
.btn-primary:hover{background:var(--green-600)}
.btn-outline{background:#fff; border-color:var(--green); color:var(--green-700)}
.btn-outline:hover{background:var(--green-50)}
.btn-ghost{background:transparent; color:var(--ink); border-color:transparent}
.btn-ghost:hover{background:var(--bg-3)}
.btn-google{background:#fff; color:#3c4043; border:1px solid #dadce0}
.btn-google:hover{background:#f8f9fa}
.btn-lg{padding:.95rem 1.4rem; font-size:1rem}
.btn-xl{padding:1.05rem 1.4rem; font-size:1.05rem}
.btn-sm{padding:.5rem .85rem; font-size:.85rem}
.btn-block{display:flex; width:100%}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none}

/* -------- Header -------- */
.site-header{
  position:sticky; top:0; z-index:40; background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 22px; gap:24px}
.brand{display:inline-flex; align-items:center; gap:.6rem; color:var(--ink); font-weight:700}
.brand-logo-img{display:block; height:44px; width:auto; max-width:260px}
.brand-logo-footer{height:48px; filter:none}
.brand-mark{
  width:34px; height:34px; border-radius:9px; display:inline-grid; place-items:center;
  background:linear-gradient(145deg,var(--green),var(--green-700)); color:#fff;
  box-shadow:0 6px 14px -6px rgba(39,174,96,.6);
}
.brand-name{font-size:1.08rem; letter-spacing:-.01em}
.brand-name span{color:var(--green-700); font-weight:800}
.nav{display:flex; gap:26px}
.nav a{color:var(--ink-2); font-weight:500; font-size:.95rem}
.nav a:hover{color:var(--green-700)}
.header-cta{display:flex; gap:10px; align-items:center}
.user-pill{
  display:inline-flex; align-items:center; gap:8px; padding:.45rem .75rem;
  background:var(--green-50); border:1px solid var(--green-100); color:var(--green-700);
  border-radius:999px; font-weight:600; font-size:.9rem;
}
.user-pill .logout-link{color:var(--ink-2); font-weight:500; margin-left:6px}
.hamburger{display:none; background:transparent; border:0; font-size:1.4rem; color:var(--ink)}

/* -------- Hero -------- */
.hero{padding:80px 0 60px; background:linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%); position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:auto -10% -30% -10%; height:60%;
  background: radial-gradient(60% 60% at 20% 20%, rgba(39,174,96,.10), transparent 60%),
              radial-gradient(50% 60% at 80% 30%, rgba(39,174,96,.07), transparent 70%);
  pointer-events:none;
}
.hero-inner{display:grid; grid-template-columns:1.15fr .95fr; gap:60px; align-items:center; position:relative}
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  background:var(--green-50); color:var(--green-700); font-weight:600; font-size:.83rem;
  border:1px solid var(--green-100);
}
.pill .dot{width:8px; height:8px; background:var(--green); border-radius:50%; box-shadow:0 0 0 4px rgba(39,174,96,.15)}
.hero h1{
  font-size: clamp(2.1rem, 4.4vw, 3.6rem); font-weight:800; letter-spacing:-.02em;
  margin:18px 0 12px; line-height:1.08;
}
.hero h1 .accent{color:var(--green); position:relative; white-space:nowrap}
.hero h1 .accent::after{
  content:""; position:absolute; left:0; right:0; bottom:.05em; height:.22em;
  background:var(--green-100); z-index:-1; border-radius:6px;
}
.hero .lede{color:var(--ink-2); font-size:1.12rem; max-width:560px}
.hero-actions{display:flex; gap:12px; margin:24px 0 20px; flex-wrap:wrap}
.trust-widget{
  display:inline-flex; align-items:center; gap:12px; padding:10px 14px;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm);
}
.trust-widget .stars{color:#f5b301; letter-spacing:2px}
.trust-widget strong{font-size:1.05rem}
.trust-widget .tp-mark{font-weight:700; color:#111}
.benefits{list-style:none; padding:0; margin:22px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:8px 22px}
.benefits li{color:var(--ink-2); font-size:.95rem}
.benefits i{color:var(--green); margin-right:6px}

.hero-visual{position:relative; height:420px}
.stack{position:absolute; border-radius:16px; background:#fff; box-shadow:var(--shadow-lg); border:1px solid var(--line)}
.stack-back{inset:20px 60px 40px 0; transform:rotate(-4deg); background:linear-gradient(180deg,#fff,#f6fbf7)}
.stack-mid {inset:10px 30px 20px 30px; transform:rotate(2deg); background:#fff}
.stack-front{inset:0 0 0 60px; padding:22px 22px; overflow:hidden}
.mini-invoice{font-size:.9rem}
.mi-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:12px; padding-bottom:12px; border-bottom:1px dashed var(--line)}
.mi-title{font-weight:800; color:var(--green-700); font-size:1.4rem; letter-spacing:.02em}
.mi-no{color:var(--muted); font-size:.85rem}
.mi-row{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--line); color:var(--ink)}
.mi-row.mi-total{border-bottom:0; border-top:2px solid var(--green); margin-top:8px; padding-top:12px; font-weight:700}
.mi-sig{margin-top:24px; font-family:'Great Vibes',cursive; font-size:2rem; color:var(--ink); border-top:1px dashed var(--line); padding-top:8px; display:inline-block}
.mi-sig span{font-family:var(--font); font-size:.75rem; color:var(--muted); vertical-align:middle}

/* -------- Section head -------- */
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin:16px 0 22px; flex-wrap:wrap}
.section-head.center{flex-direction:column; align-items:center; text-align:center; margin-bottom:36px}
.section-head h2{font-size:clamp(1.6rem,3vw,2.3rem); letter-spacing:-.02em; margin:0; font-weight:800}
.section-head .eyebrow{color:var(--green-700); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem}
.section-head .lede{color:var(--ink-2); max-width:640px; margin-top:8px}

/* -------- Generator -------- */
.generator{padding:32px 0 72px}
.toolbar{display:flex; gap:10px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); font-size:.9rem; color:var(--ink-2);
}
.chip select, .chip input[type=color]{border:0; background:transparent; font:inherit; color:var(--ink); outline:none}
.chip input[type=color]{padding:0; width:24px; height:24px; cursor:pointer}
.toggle-chip{padding:4px 10px}
.chip-label{font-weight:500; color:var(--ink-2)}
.switch{position:relative; display:inline-block; width:36px; height:20px}
.switch input{opacity:0; width:0; height:0}
.slider{position:absolute; inset:0; background:#cfd6dc; border-radius:999px; transition:.2s; cursor:pointer}
.slider::before{content:""; position:absolute; height:14px; width:14px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2)}
input:checked + .slider{background:var(--green)}
input:checked + .slider::before{transform:translateX(16px)}

.grid-2{display:grid; grid-template-columns:1fr 340px; gap:26px; align-items:flex-start}

/* Invoice paper */
.invoice-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 32px 24px; box-shadow:var(--shadow-md); position:relative;
}
.invoice-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:6px; background:var(--accent);
  border-top-left-radius:var(--radius); border-top-right-radius:var(--radius);
}
.ip-top{display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:24px; padding-top:6px}
.logo-drop{
  position:relative; width:140px; height:140px; border:2px dashed var(--line); border-radius:12px;
  display:grid; place-items:center; cursor:pointer; background:var(--bg-3); overflow:hidden;
  transition:border-color .2s, background .2s;
}
.logo-drop:hover{border-color:var(--green); background:var(--green-50)}
.logo-empty{display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--muted); font-size:.85rem}
.logo-empty i{font-size:1.5rem; color:var(--green)}
.logo-drop img{width:100%; height:100%; object-fit:contain; padding:8px}
.logo-remove{
  position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%;
  background:#fff; border:1px solid var(--line); display:none; cursor:pointer; z-index:2; color:var(--ink);
}
.logo-drop.has-logo .logo-remove{display:grid; place-items:center}

.ip-title{flex:1; text-align:right}
.ip-title h3{
  font-size:2.6rem; margin:0 0 8px; letter-spacing:.04em; color:var(--accent);
  font-weight:800; outline:none;
}
.ip-no{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg-2)}
.ip-no span{color:var(--muted); font-weight:600}
.ip-no input{border:0; background:transparent; font:inherit; text-align:right; width:180px; outline:none; color:var(--ink)}

.ip-parties{display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; margin:0 0 24px}
.ip-parties label{display:block; font-size:.78rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px}
.ip-parties input[type=text], .ip-parties input[type=date], .ip-parties textarea{
  width:100%; padding:.65rem .8rem; border:1px solid var(--line); border-radius:8px; font:inherit;
  color:var(--ink); background:#fff; margin-bottom:8px; outline:none; transition:border-color .18s;
}
.ip-parties textarea{resize:vertical; min-height:80px}
.ip-parties input:focus, .ip-parties textarea:focus{border-color:var(--green)}

/* items */
.ip-items{margin-bottom:24px}
.items-head, .item-row{
  display:grid; grid-template-columns: 1fr 90px 130px 130px 32px; gap:10px; align-items:center;
}
.items-head{
  background:var(--ink); color:#fff; padding:12px 14px; border-radius:8px;
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
}
.items-head .col-qty, .items-head .col-rate, .items-head .col-amt{text-align:right}
.item-row{padding:10px 14px; border-bottom:1px solid var(--line)}
.item-row input[type=text], .item-row input[type=number]{
  border:0; background:transparent; font:inherit; width:100%; padding:6px 6px; border-radius:6px; outline:none;
}
.item-row input[type=text]:focus, .item-row input[type=number]:focus{background:var(--bg-3)}
.item-row .col-qty input, .item-row .col-rate input, .item-row .col-amt{ text-align:right }
.item-row .col-amt{color:var(--ink); font-weight:600}
.item-remove{background:transparent; border:0; color:var(--muted); font-size:1.1rem; cursor:pointer; visibility:hidden}
.item-row:hover .item-remove{visibility:visible; color:var(--danger)}
#addItemBtn{margin-top:14px}

/* Bottom */
.ip-bottom{display:grid; grid-template-columns:1fr 320px; gap:26px}
.ip-notes label{display:block; font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:600; margin:12px 0 6px}
.ip-notes textarea{width:100%; padding:.65rem .8rem; border:1px solid var(--line); border-radius:8px; font:inherit; resize:vertical; outline:none; color:var(--ink)}
.ip-notes textarea:focus{border-color:var(--green)}

.ip-totals{background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:16px}
.tot-row{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed var(--line); color:var(--ink-2); font-size:.95rem}
.tot-row:last-child{border-bottom:0}
.tot-row b{color:var(--ink); font-weight:700}
.tot-row .inline-in input{width:110px; padding:6px 8px; border:1px solid var(--line); border-radius:6px; text-align:right; font:inherit; outline:none}
.tot-row .inline-in input:focus{border-color:var(--green)}
#taxPercent{width:60px; padding:2px 6px; border:1px solid var(--line); border-radius:6px; text-align:right; font:inherit; outline:none; margin:0 4px}
.tot-total{border-top:2px solid var(--ink); padding-top:12px; margin-top:6px}
.tot-total b{font-size:1.15rem; color:var(--accent)}
.tot-balance{border-top:2px solid var(--accent); padding-top:12px; margin-top:6px}
.tot-balance b{font-size:1.3rem; color:var(--accent)}

/* Signature block */
.signature-block{margin-top:20px; border-top:1px dashed var(--line); padding-top:14px}
.sig-tabs{display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap}
.sig-tab{
  padding:.4rem .8rem; border-radius:999px; border:1px solid var(--line); background:#fff;
  font-size:.85rem; color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.sig-tab.active{background:var(--green); color:#fff; border-color:var(--green)}
.sig-pane canvas{width:100%; max-width:520px; height:140px; border:1px dashed var(--line); border-radius:8px; background:#fff; touch-action:none; cursor:crosshair}
.sig-actions{margin-top:6px}
#sigTypeInput{width:100%; max-width:520px; padding:.55rem .8rem; border:1px solid var(--line); border-radius:8px; font:inherit; margin-bottom:8px}
.sig-fonts{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px}
.sig-fonts button{padding:.3rem .7rem; border:1px solid var(--line); background:#fff; border-radius:999px; cursor:pointer; font-size:.85rem}
.sig-fonts button.active{background:var(--green); color:#fff; border-color:var(--green)}
.sig-preview{min-height:80px; padding:12px; background:#fff; border:1px dashed var(--line); border-radius:8px; font-size:2.2rem; line-height:1; color:var(--ink)}
.uploader{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:22px; border:2px dashed var(--line); border-radius:10px; background:var(--bg-3); cursor:pointer; color:var(--ink-2);
}
.uploader i{font-size:1.5rem; color:var(--green)}
.uploader small{color:var(--muted)}
#sigUploadPreview img{max-height:100px; margin-top:8px}

/* Side panel */
.side-panel{position:sticky; top:80px; display:flex; flex-direction:column; gap:16px}
.panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:10px}
.panel-head{display:flex; justify-content:space-between; align-items:center}
.panel-head h4{margin:0; font-size:1rem}
.panel-head small{color:var(--muted); font-size:.75rem}
.autosave{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.82rem; margin-top:4px}
.autosave i{color:var(--green)}

/* Templates */
.template-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tpl{background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:8px; cursor:pointer; text-align:center; transition:border-color .18s, transform .12s}
.tpl:hover{transform:translateY(-1px)}
.tpl.active{border-color:var(--green); box-shadow:0 0 0 3px var(--green-50)}
.tpl span{display:block; margin-top:6px; font-size:.82rem; color:var(--ink-2); font-weight:600}
.tpl-thumb{height:64px; border-radius:6px; position:relative; overflow:hidden; background:#fff; border:1px solid var(--line)}
.tpl-thumb .bar{position:absolute; left:0; right:0; top:0; height:8px; background:var(--green)}
.tpl-thumb.tpl-classic .bar{ height:6px }
.tpl-thumb.tpl-modern{ background:linear-gradient(180deg,#fff 40%, var(--green-50) 100%) }
.tpl-thumb.tpl-modern .bar{ left:auto; width:40%; right:0; height:100% }
.tpl-thumb.tpl-minimal .bar{ background:var(--ink); height:2px; top:12px }
.tpl-thumb.tpl-corporate{ background:var(--ink) }
.tpl-thumb.tpl-corporate .bar{ background:var(--green); top:auto; bottom:0; height:8px }
.tpl-thumb.tpl-elegant{ background:#fff }
.tpl-thumb.tpl-elegant .bar{ background:var(--accent); left:0; top:0; bottom:0; width:6px; height:auto }
.tpl-thumb.tpl-bold{ background:#fff }
.tpl-thumb.tpl-bold .bar{ background:var(--accent); height:22px; top:0 }
.tpl-thumb.tpl-executive{ background:#fff }
.tpl-thumb.tpl-executive .bar{ background:transparent; border-top:2px solid var(--accent); border-bottom:1px solid var(--accent); left:8%; right:8%; width:auto; top:26%; height:6px }
.tpl-thumb.tpl-compact{ background:#fff }
.tpl-thumb.tpl-compact .bar{ background:var(--accent); width:20px; height:14px; left:6px; top:6px }
.tpl-thumb.tpl-techno{ background:#0f1417 }
.tpl-thumb.tpl-techno .bar{ background:var(--accent); font-family:monospace; height:2px; top:20% }
.tpl-thumb.tpl-nordic{ background:#f7f7f5 }
.tpl-thumb.tpl-nordic .bar{ background:var(--accent); width:14px; height:14px; left:8px; top:12px }
.tpl-thumb.tpl-boutique{ background:#fff }
.tpl-thumb.tpl-boutique .bar{ background:var(--accent); left:0; top:0; bottom:0; width:8px; height:auto }

.panel-tip{background:linear-gradient(160deg,#fff,var(--green-50)); border-color:var(--green-100); flex-direction:row; align-items:flex-start; gap:12px}
.panel-tip i{color:var(--amber); font-size:1.2rem; margin-top:2px}

/* Template variants applied to invoice paper */
.invoice-card.tpl-modern{background:linear-gradient(180deg,#fff 70%, var(--green-50) 100%)}
.invoice-card.tpl-modern::before{height:0}
.invoice-card.tpl-modern .ip-title h3{color:var(--ink); text-shadow:none}
.invoice-card.tpl-modern::after{content:""; position:absolute; top:0; right:0; width:36%; height:100%; background:var(--accent); opacity:.06; z-index:0; clip-path:polygon(20% 0, 100% 0, 100% 100%, 0 100%)}

.invoice-card.tpl-minimal::before{background:transparent}
.invoice-card.tpl-minimal .ip-title h3{color:var(--ink); font-weight:600; letter-spacing:.15em; font-size:2rem}
.invoice-card.tpl-minimal .items-head{background:#fff; color:var(--ink); border:1px solid var(--line)}
.invoice-card.tpl-minimal .tot-total{border-top-color:var(--line)}

.invoice-card.tpl-corporate::before{background:var(--ink)}
.invoice-card.tpl-corporate .ip-title h3{color:var(--ink)}
.invoice-card.tpl-corporate .items-head{background:var(--accent)}
.invoice-card.tpl-corporate .tot-balance b{color:var(--ink)}

.invoice-card.tpl-creative{display:none}

/* Executive — serif classic with double hairline */
.invoice-card.tpl-executive::before{ background:transparent; border-top:2px solid var(--accent); border-bottom:1px solid var(--accent); height:6px; left:20px; right:20px; border-radius:0 }
.invoice-card.tpl-executive .ip-title h3{ font-family:'Times New Roman', Georgia, serif; letter-spacing:.05em; font-weight:700; color:var(--ink); font-size:1.9rem }
.invoice-card.tpl-executive .items-head{ background:#fff; color:var(--ink); border-top:1.5px solid var(--accent); border-bottom:1px solid var(--accent); border-radius:0 }
.invoice-card.tpl-executive .ip-parties label{ font-family:'Times New Roman', Georgia, serif; text-transform:none; letter-spacing:.05em; color:#6b7480 }

/* Compact — dense wholesaler style */
.invoice-card.tpl-compact{ padding:20px 20px 24px }
.invoice-card.tpl-compact::before{ height:24px; width:60px; left:0; right:auto; border-radius:0 }
.invoice-card.tpl-compact::after{ content:'INV'; position:absolute; top:0; left:0; width:60px; height:24px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-family:monospace; letter-spacing:.15em; font-size:.7rem }
.invoice-card.tpl-compact .ip-title h3{ font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; font-size:1.6rem; font-weight:800; letter-spacing:.05em }
.invoice-card.tpl-compact .items-body{ font-size:.85rem }
.invoice-card.tpl-compact .items-head{ padding:6px 10px; font-size:.72rem; border-radius:0 }

/* Techno — dark accent, monospace numbers, grid corners */
.invoice-card.tpl-techno::before{ height:0 }
.invoice-card.tpl-techno{ position:relative }
.invoice-card.tpl-techno::after{ content:''; position:absolute; top:14px; left:14px; width:44px; height:44px; border-top:2px solid var(--accent); border-left:2px solid var(--accent) }
.invoice-card.tpl-techno .ip-top::after{ content:''; position:absolute; top:14px; right:14px; width:44px; height:44px; border-top:2px solid var(--accent); border-right:2px solid var(--accent) }
.invoice-card.tpl-techno .ip-title h3{ font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; font-weight:800; letter-spacing:.02em; color:var(--ink) }
.invoice-card.tpl-techno .items-head{ background:var(--ink); color:var(--accent); border-radius:0; font-family:ui-monospace,monospace; letter-spacing:.14em }
.invoice-card.tpl-techno .items-body td.amt, .invoice-card.tpl-techno .items-body td.qty, .invoice-card.tpl-techno .items-body td.rate{ font-family:ui-monospace,monospace }
.invoice-card.tpl-techno .totals-panel{ background:#0f1417; color:#fff; border-radius:8px; padding:16px }
.invoice-card.tpl-techno .totals-panel .tot-row span, .invoice-card.tpl-techno .totals-panel .tot-row b{ color:#fff }

/* Nordic — spacious, minimalist scandinavian */
.invoice-card.tpl-nordic{ background:#faf9f6; padding:56px 48px }
.invoice-card.tpl-nordic::before{ height:0 }
.invoice-card.tpl-nordic .ip-top::before{ content:''; position:absolute; top:0; left:0; width:14px; height:14px; background:var(--accent) }
.invoice-card.tpl-nordic .ip-title h3{ font-weight:400; letter-spacing:.4em; font-size:1.5rem; text-transform:uppercase; color:#333 }
.invoice-card.tpl-nordic .items-head{ background:transparent; color:#666; border-bottom:1px solid #e6e2d9; border-radius:0; letter-spacing:.2em }
.invoice-card.tpl-nordic .items-body tr{ border-bottom:1px solid #eee6d9 }
.invoice-card.tpl-nordic .ip-parties label{ letter-spacing:.3em; color:#8a8a80 }

/* Boutique — vertical left ribbon */
.invoice-card.tpl-boutique{ padding-left:44px; padding-top:24px }
.invoice-card.tpl-boutique::before{ top:0; bottom:0; left:0; width:14px; height:auto; background:var(--accent); border-radius:0 }
.invoice-card.tpl-boutique::after{ content:''; position:absolute; top:0; left:14px; right:0; height:4px; background:var(--accent) }
.invoice-card.tpl-boutique .ip-title h3{ font-weight:800; letter-spacing:-.01em; color:var(--ink); font-size:2rem }
.invoice-card.tpl-boutique .items-head{ background:var(--accent); color:#fff; border-radius:6px }

/* Elegant — serif, left-side vertical accent */
.invoice-card.tpl-elegant{ padding-left:44px }
.invoice-card.tpl-elegant::before{ top:0; bottom:0; left:0; width:8px; height:auto; background:var(--accent); border-radius:0 }
.invoice-card.tpl-elegant .ip-title h3{ font-family:'Times New Roman', Georgia, serif; color:var(--ink); font-weight:700; letter-spacing:.02em; font-size:2.2rem }
.invoice-card.tpl-elegant .items-head{ background:#fff; color:var(--ink); border:1px solid var(--accent); border-radius:0; letter-spacing:.1em }
.invoice-card.tpl-elegant .ip-parties label{ font-family:'Times New Roman', Georgia, serif; letter-spacing:.15em }
.invoice-card.tpl-elegant .tot-total{ border-top-color:var(--accent) }

/* Bold — full-width dark header with white title */
.invoice-card.tpl-bold{ padding-top:110px }
.invoice-card.tpl-bold::before{ height:88px; background:var(--accent); border-radius:var(--radius) var(--radius) 0 0 }
.invoice-card.tpl-bold .ip-top{ position:relative; z-index:1; margin-top:-70px }
.invoice-card.tpl-bold .ip-title h3{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.15); font-weight:900; font-size:2.6rem }
.invoice-card.tpl-bold .logo-drop{ background:#fff; border-color:rgba(255,255,255,.4) }
.invoice-card.tpl-bold .ip-no{ background:#fff }
.invoice-card.tpl-bold .items-head{ background:var(--ink); color:#fff; border-radius:0 }
.invoice-card.tpl-bold .tot-balance{ background:var(--accent); color:#fff; padding:12px; border-radius:8px; border:0; margin-top:8px }
.invoice-card.tpl-bold .tot-balance b, .invoice-card.tpl-bold .tot-balance span{ color:#fff }

/* -------- How to -------- */
.howto{padding:60px 0; background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:20px}
.steps li{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px; position:relative; box-shadow:var(--shadow-sm)}
.steps h3{margin:8px 0 6px; font-size:1.1rem}
.steps p{color:var(--ink-2); margin:0; font-size:.95rem}
.step-no{
  display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background:var(--green-50); color:var(--green-700); font-weight:800; letter-spacing:.02em;
}

/* -------- SEO content -------- */
.seo-content{padding:60px 0}
.seo-content article{max-width:820px; margin:0 auto}
.seo-content h2{font-size:1.8rem; letter-spacing:-.01em; margin:0 0 10px}
.seo-content h3{font-size:1.15rem; margin:26px 0 8px; color:var(--ink)}
.seo-content p{color:var(--ink-2); font-size:1rem; margin:8px 0}
.tick-list{padding-left:0; list-style:none}
.tick-list li{position:relative; padding-left:26px; margin:8px 0; color:var(--ink-2)}
.tick-list li::before{content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--green); position:absolute; left:0; top:2px}

/* -------- FAQ -------- */
.faq{padding:60px 0; background:var(--bg-2); border-top:1px solid var(--line)}
.faq-list{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:10px}
.faq details{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 18px; box-shadow:var(--shadow-sm)}
.faq summary{font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:1.4rem; color:var(--green); font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:10px 0 2px; color:var(--ink-2)}

/* -------- Footer -------- */
.site-footer{background:#111; color:#c9d0d6; padding:56px 0 22px}
.footer-inner{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px}
.site-footer h5{color:#fff; margin:0 0 10px; font-size:.95rem; letter-spacing:.02em}
.site-footer a{display:block; color:#c9d0d6; font-size:.9rem; margin:4px 0}
.site-footer a:hover{color:#fff}
.foot-brand p{max-width:340px; color:#98a1aa; margin-top:12px; font-size:.9rem}
.foot-brand .brand{color:#fff}
.foot-brand .brand-name span{color:var(--green)}
.foot-bottom{display:flex; justify-content:space-between; padding-top:22px; margin-top:32px; border-top:1px solid #222; font-size:.85rem; color:#8a929b}

/* -------- Modal -------- */
.modal{
  position:fixed; inset:0; background:rgba(15,44,25,.55); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;
  animation:fade .18s ease-out;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
.modal[hidden]{display:none}
.modal-card{
  background:#fff; border-radius:16px; width:100%; max-width:440px; padding:28px 26px 22px;
  box-shadow:var(--shadow-lg); position:relative; animation:pop .22s cubic-bezier(.2,.7,.3,1.2);
}
.modal-slim{max-width:400px}
@keyframes pop{ from{transform:translateY(10px) scale(.96); opacity:0} to{transform:none; opacity:1} }
.modal-close{
  position:absolute; top:10px; right:12px; width:32px; height:32px; border-radius:50%;
  border:0; background:transparent; font-size:1.4rem; color:var(--muted); cursor:pointer;
}
.modal-close:hover{background:var(--bg-3); color:var(--ink)}
.auth-head{text-align:center; margin-bottom:18px}
.auth-mark{
  width:52px; height:52px; margin:0 auto 10px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--green),var(--green-700)); color:#fff; font-size:1.3rem;
  box-shadow:0 12px 24px -12px rgba(39,174,96,.65);
}
.auth-head h3{margin:0 0 4px; font-size:1.35rem}
.auth-head p{margin:0; color:var(--ink-2); font-size:.9rem}
.auth-tabs{display:flex; gap:0; background:var(--bg-3); border-radius:10px; padding:4px; margin:16px 0}
.auth-tab{flex:1; padding:.5rem; background:transparent; border:0; font-weight:600; color:var(--ink-2); border-radius:8px; cursor:pointer; font-size:.9rem}
.auth-tab.active{background:#fff; color:var(--green-700); box-shadow:var(--shadow-sm)}
.auth-form{display:flex; flex-direction:column; gap:10px}
.auth-form label{display:flex; flex-direction:column; gap:4px; font-size:.82rem; color:var(--ink-2); font-weight:600}
.auth-form input{padding:.65rem .8rem; border:1px solid var(--line); border-radius:8px; font:inherit; outline:none; color:var(--ink)}
.auth-form input:focus{border-color:var(--green)}
.auth-form button{margin-top:4px}
.auth-sep{display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--muted); font-size:.85rem}
.auth-sep::before, .auth-sep::after{content:""; flex:1; height:1px; background:var(--line)}
.auth-foot{text-align:center; color:var(--muted); font-size:.78rem; margin-top:10px}
.auth-foot i{color:var(--green); margin-right:4px}

.postdl-head{text-align:center; padding:6px 0 16px}
.postdl-head .check{width:56px; height:56px; margin:0 auto 8px; border-radius:50%; background:var(--green-50); color:var(--green); display:grid; place-items:center; font-size:1.5rem}
.postdl-head h3{margin:0 0 4px}
.postdl-head p{color:var(--ink-2); font-size:.95rem; margin:0}
.postdl-actions{display:flex; flex-direction:column; gap:8px; margin-top:8px}

/* Toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(16px);
  background:#111; color:#fff; padding:.7rem 1rem; border-radius:10px; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; box-shadow:var(--shadow-lg); z-index:200; font-size:.9rem;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* -------- Print -------- */
@media print{
  body{background:#fff}
  .site-header, .hero, .howto, .seo-content, .faq, .site-footer, .side-panel, .toolbar, .modal, .toast{display:none !important}
  .invoice-card{box-shadow:none; border:0; padding:0}
  .generator{padding:0}
}

/* -------- Responsive -------- */
@media (max-width: 1080px){
  .hero-inner{grid-template-columns:1fr; gap:30px}
  .hero-visual{display:none}
  .grid-2{grid-template-columns:1fr}
  .side-panel{position:static}
  .ip-bottom{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .ip-parties{grid-template-columns:1fr 1fr}
  .ip-parties .ip-meta{grid-column:1 / -1}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .nav{display:none}
  .hamburger{display:block}
  .header-cta .btn{display:none}
  .header-cta .user-pill{display:inline-flex}
  .invoice-card{padding:20px}
  .ip-top{flex-direction:column; align-items:stretch}
  .ip-title{text-align:left}
  .items-head, .item-row{grid-template-columns: 1fr 60px 90px 90px 28px; gap:6px; font-size:.85rem; padding:8px}
  .items-head .col-qty, .items-head .col-rate, .items-head .col-amt{ font-size:.72rem }
  .ip-parties{grid-template-columns:1fr}
  .hero{padding:50px 0 30px}
  .benefits{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr; gap:20px}
  .foot-bottom{flex-direction:column; gap:6px; text-align:center}
  .trust-widget{width:100%}
}

/* ==================== CONTENT PAGES ==================== */
.page-main{padding:32px 0 64px; min-height:60vh}
.prose{max-width:820px; margin:0 auto; padding:0 20px; color:var(--ink); line-height:1.7}
.prose h1{font-size:2.2rem; font-weight:800; letter-spacing:-.02em; margin:24px 0 12px; line-height:1.15}
.prose h2{font-size:1.5rem; font-weight:700; margin:36px 0 12px; letter-spacing:-.01em; color:var(--ink)}
.prose h3{font-size:1.15rem; font-weight:700; margin:24px 0 8px}
.prose p{margin:.75rem 0}
.prose .lede{font-size:1.15rem; color:#4b5560; margin:16px 0 24px}
.prose ul, .prose ol{margin:.75rem 0 1rem; padding-left:1.4rem}
.prose ul li, .prose ol li{margin:.35rem 0}
.prose a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.prose a:hover{color:var(--green-700, #1e874b)}
.prose blockquote{border-left:3px solid var(--accent); padding:8px 16px; margin:1rem 0; background:var(--green-50); border-radius:0 8px 8px 0; color:#3a4148}
.prose code{background:#f4f6f5; padding:2px 6px; border-radius:4px; font-size:.92em; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.prose details{border:1px solid #e6e9ec; border-radius:10px; padding:12px 16px; margin:.5rem 0; background:#fff}
.prose details[open]{border-color:var(--accent)}
.prose details summary{cursor:pointer; font-weight:600; list-style:none}
.prose details summary::-webkit-details-marker{display:none}
.prose details summary::before{content:'+'; display:inline-block; width:22px; color:var(--accent); font-weight:800}
.prose details[open] summary::before{content:'−'}
.prose .small{font-size:.85rem}
.prose .muted{color:#6b7480}
.breadcrumbs{font-size:.85rem; color:#6b7480; margin:8px 0 20px}
.breadcrumbs a{color:#6b7480; text-decoration:none}
.breadcrumbs a:hover{color:var(--accent)}

.tbl{width:100%; border-collapse:collapse; margin:1rem 0; font-size:.92rem}
.tbl th, .tbl td{padding:10px 12px; border-bottom:1px solid #e6e9ec; text-align:left; vertical-align:top}
.tbl thead th{background:#f7faf8; color:#3a4148; font-weight:700; border-bottom:2px solid var(--accent)}
.tbl tbody tr:hover{background:#fafcfa}

.cta-band{background:linear-gradient(135deg, var(--green-50), #fff); border:1px solid #e6e9ec; border-radius:16px; padding:28px; text-align:center; margin:32px 0}
.cta-band h3{margin:0 0 6px; font-size:1.35rem; letter-spacing:-.01em}
.cta-band p{color:#556069; margin:0 0 14px}

.tpl-showcase{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin:20px 0}
.tpl-card{border:1px solid #e6e9ec; border-radius:12px; padding:16px; background:#fff; transition:.2s}
.tpl-card:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 20px -12px rgba(30,135,75,.35)}
.tpl-card h3{margin:0 0 6px; color:var(--accent); font-size:1.05rem}
.tpl-card p{margin:0; color:#556069; font-size:.9rem}

/* Contact page */
.contact-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:32px; margin:24px 0}
.contact-info h2{margin-top:0}
.contact-info p{margin:8px 0 16px}
.contact-form-wrap{background:#fff; border:1px solid #e6e9ec; border-radius:16px; padding:24px; box-shadow:0 2px 8px rgba(20,30,40,.03)}
.contact-form .form-row{margin-bottom:14px}
.contact-form label{display:block; font-size:.85rem; font-weight:600; color:#3a4148; margin-bottom:6px}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea{width:100%; padding:11px 14px; border:1px solid #d8dde2; border-radius:10px; font:inherit; font-size:.95rem; background:#fff; transition:.15s}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(39,174,96,.15)}
.contact-form textarea{resize:vertical; min-height:120px}
.alert{padding:14px 16px; border-radius:10px; margin-bottom:16px}
.alert-success{background:#e8f8ee; border:1px solid #b7e7c9; color:#1a6b3d}
.alert-error{background:#fdecea; border:1px solid #f5b5b0; color:#8a2a20}
@media(max-width:820px){ .contact-grid{grid-template-columns:1fr} }

/* ==================== BLOG ==================== */
.blog-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:18px; margin:24px 0}
.blog-card{display:block; padding:22px; border:1px solid #e6e9ec; border-radius:14px; background:#fff; color:var(--ink); text-decoration:none; transition:.18s}
.blog-card:hover{border-color:var(--accent); transform:translateY(-3px); box-shadow:0 12px 28px -16px rgba(30,135,75,.35)}
.blog-tag{display:inline-block; background:var(--green-50); color:var(--accent); font-size:.7rem; font-weight:700; letter-spacing:.1em; padding:4px 10px; border-radius:20px; text-transform:uppercase; margin-bottom:8px}
.blog-card h3{margin:0 0 8px; font-size:1.05rem; letter-spacing:-.01em; line-height:1.3; color:var(--ink)}
.blog-card p{color:#556069; font-size:.9rem; margin:0 0 10px; line-height:1.5}
.blog-card small{color:#8a939c; font-size:.78rem}

/* ==================== FULL RESPONSIVE ==================== */
@media (max-width: 900px){
  .prose h1{font-size:1.7rem}
  .prose h2{font-size:1.25rem}
  .prose .lede{font-size:1rem}
  .tbl{font-size:.85rem; display:block; overflow-x:auto; white-space:nowrap}
  .cta-band{padding:22px 16px}
  .footer-inner{grid-template-columns:1fr 1fr!important}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width: 640px){
  .site-header .nav{display:none}
  .header-cta .btn{padding:8px 12px; font-size:.85rem}
  .brand-logo-img{height:36px; max-width:200px}
  .prose{padding:0 16px}
  .prose h1{font-size:1.45rem}
  .footer-inner{grid-template-columns:1fr!important; gap:24px}
  .contact-grid{grid-template-columns:1fr!important}
  .blog-grid{grid-template-columns:1fr}
  .tpl-showcase{grid-template-columns:1fr}
  .hero-inner{grid-template-columns:1fr!important; gap:24px}
  .hero-visual{display:none!important}
  .hero .h1, .hero h1{font-size:1.8rem}
  .cta-band h3{font-size:1.1rem}
  .container{padding-left:16px; padding-right:16px}
}
@media (max-width: 420px){
  .brand-logo-img{height:32px; max-width:170px}
  .header-inner{gap:8px}
  .btn-primary{font-size:.8rem; padding:8px 10px}
  .prose h1{font-size:1.3rem}
  .tbl th, .tbl td{padding:8px 8px; font-size:.8rem}
}