:root{
  --paper:#FAF8F3;
  --paper-card:#FFFFFF;
  --ink:#1C2333;
  --ink-soft:#5B6172;
  --line:#E3DECF;
  --stamp-red:#B23A2E;
  --stamp-red-bg:#FBEAE7;
  --stamp-green:#2F6B4F;
  --stamp-green-bg:#E8F2EC;
  --stamp-amber:#9C6B1F;
  --stamp-amber-bg:#FBF1DF;
  --stamp-gray:#5B6172;
  --stamp-gray-bg:#EDEBE3;
  --radius:10px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding:0 0 3rem;
}
.wrap{max-width:720px;margin:0 auto;padding:1.5rem 1.1rem;}
.brand{font-family:Georgia,"Times New Roman",serif;font-size:22px;font-weight:700;letter-spacing:-0.01em;}
.brand small{display:block;font-family:"Courier New",monospace;font-size:11px;font-weight:400;color:var(--ink-soft);letter-spacing:0.08em;text-transform:uppercase;margin-top:2px;}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.4rem;}
a{color:inherit;}
button{cursor:pointer;font-family:inherit;}
.btn-primary{
  background:var(--ink);color:var(--paper);border:none;
  padding:9px 16px;border-radius:var(--radius);font-size:13.5px;font-weight:600;
}
.btn-primary:active{opacity:0.85;}
.btn-primary:disabled{opacity:0.5;cursor:default;}
.btn-link{background:transparent;border:none;color:var(--ink-soft);font-size:12.5px;text-decoration:underline;padding:0;}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:1.2rem;}
.stat{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius);padding:0.75rem 0.9rem;}
.stat .label{font-size:11.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.03em;}
.stat .value{font-size:22px;font-weight:700;margin-top:2px;font-family:"Courier New",monospace;}
.stat.warn .value{color:var(--stamp-amber);}
.stat.danger .value{color:var(--stamp-red);}
.tabs{display:flex;gap:6px;margin-bottom:1rem;overflow-x:auto;padding-bottom:2px;}
.tab{
  background:transparent;border:1px solid var(--line);color:var(--ink-soft);
  padding:6px 13px;border-radius:20px;font-size:12.5px;font-weight:600;white-space:nowrap;
}
.tab.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.card{
  background:var(--paper-card);border:1px solid var(--line);border-radius:12px;
  padding:0.9rem 1rem;margin-bottom:8px;
}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.client{font-weight:700;font-size:14.5px;}
.meta{font-size:12.5px;color:var(--ink-soft);margin-top:3px;}
.stamp{
  flex-shrink:0;font-family:"Courier New",monospace;font-size:10px;font-weight:700;
  padding:4px 10px;border-radius:20px;letter-spacing:0.03em;text-transform:uppercase;
  transform:rotate(-2deg);border:1.5px solid currentColor;
}
.stamp.draft{color:var(--stamp-gray);background:var(--stamp-gray-bg);}
.stamp.sent{color:var(--stamp-amber);background:var(--stamp-amber-bg);}
.stamp.signed{color:var(--stamp-green);background:var(--stamp-green-bg);}
.stamp.overdue{color:var(--stamp-red);background:var(--stamp-red-bg);}
.card-actions{display:flex;gap:6px;margin-top:10px;border-top:1px solid var(--line);padding-top:9px;}
.card-actions button{
  flex:1;background:transparent;border:1px solid var(--line);border-radius:7px;
  padding:6px 4px;font-size:12px;font-weight:600;color:var(--ink);
}
.card-actions button.danger{color:var(--stamp-red);}
.empty{text-align:center;padding:3rem 1rem;color:var(--ink-soft);}
.empty i{font-size:28px;display:block;margin-bottom:8px;}

.page-msg{font-size:12.5px;padding:9px 12px;border-radius:8px;margin-bottom:10px;}
.page-msg.error{color:var(--stamp-red);background:var(--stamp-red-bg);}

.overlay{
  position:fixed;inset:0;background:rgba(28,35,51,0.45);
  display:none;align-items:flex-end;justify-content:center;z-index:50;
}
.overlay.show{display:flex;}
.sheet{
  background:var(--paper);width:100%;max-width:720px;border-radius:16px 16px 0 0;
  padding:1.4rem 1.1rem 1.8rem;
}
.sheet h3{margin:0 0 1rem;font-family:Georgia,serif;font-size:18px;}
.field{margin-bottom:0.85rem;}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:4px;}
.field input,.field select{
  width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;
  font-size:14px;background:var(--paper-card);color:var(--ink);font-family:inherit;
}
.field-row{display:flex;gap:8px;}
.field-row .field{flex:1;}
.sheet-actions{display:flex;gap:8px;margin-top:1.2rem;}
.sheet-actions button{flex:1;padding:11px;border-radius:9px;font-size:14px;font-weight:600;}
.btn-cancel{background:transparent;border:1px solid var(--line);color:var(--ink);}
.btn-save{background:var(--ink);color:var(--paper);border:none;}
.err{color:var(--stamp-red);font-size:12px;margin-top:4px;display:none;}

/* Landing page */
.hero{padding:3rem 0 2.5rem;text-align:center;}
.hero h1{font-family:Georgia,serif;font-size:30px;line-height:1.25;margin:1.1rem 0 0.7rem;}
.hero p{color:var(--ink-soft);font-size:15px;line-height:1.5;max-width:480px;margin:0 auto 1.6rem;}
.hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.btn-secondary{background:transparent;color:var(--ink);border:1px solid var(--line);padding:9px 16px;border-radius:var(--radius);font-size:13.5px;font-weight:600;}
.mock-stamp{display:inline-block;margin-bottom:0.6rem;}
.mockup{
  max-width:380px;margin:0 auto 2.5rem;
  background:var(--paper-card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:0 24px 48px -24px rgba(28,35,51,0.28);
}
.mockup-bar{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line);}
.mockup-bar span{width:8px;height:8px;border-radius:50%;background:var(--line);}
.mockup-body{padding:14px;}
.mockup-body .stats{margin-bottom:10px;}
.mockup-body .card{margin-bottom:6px;padding:0.75rem 0.85rem;}
.mockup-body .card:last-child{margin-bottom:0;}
.features{display:grid;grid-template-columns:1fr;gap:10px;margin:2rem 0;}
@media(min-width:560px){.features{grid-template-columns:1fr 1fr;}}
.feature{background:var(--paper-card);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;}
.feature h3{font-size:14.5px;margin:0 0 4px;}
.feature p{font-size:12.5px;color:var(--ink-soft);margin:0;line-height:1.45;}
.pricing{display:grid;grid-template-columns:1fr;gap:10px;margin:2rem 0;}
@media(min-width:560px){.pricing{grid-template-columns:1fr 1fr;}}
.price-card{background:var(--paper-card);border:1px solid var(--line);border-radius:12px;padding:1.2rem;text-align:center;}
.price-card.highlight{border-color:var(--ink);}
.price-card .amount{font-family:"Courier New",monospace;font-size:26px;font-weight:700;margin:6px 0;}
.price-card ul{list-style:none;padding:0;margin:0.8rem 0 0;font-size:12.5px;color:var(--ink-soft);text-align:left;}
.price-card li{margin-bottom:5px;padding-left:16px;position:relative;}
.price-card li:before{content:"✓";position:absolute;left:0;color:var(--stamp-green);}
.footer-note{text-align:center;color:var(--ink-soft);font-size:12px;margin-top:2.5rem;}

/* Auth page */
.auth-wrap{max-width:380px;margin:0 auto;padding:2.5rem 1.1rem;}
.auth-card{background:var(--paper-card);border:1px solid var(--line);border-radius:12px;padding:1.6rem 1.3rem;}
.auth-tabs{display:flex;gap:6px;margin-bottom:1.3rem;}
.auth-tabs button{flex:1;background:transparent;border:1px solid var(--line);color:var(--ink-soft);padding:8px;border-radius:8px;font-size:13px;font-weight:600;}
.auth-tabs button.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.auth-msg{font-size:12.5px;margin-top:10px;padding:8px 10px;border-radius:8px;display:none;}
.auth-msg.show{display:block;}
.auth-msg.error{color:var(--stamp-red);background:var(--stamp-red-bg);}
.auth-msg.ok{color:var(--stamp-green);background:var(--stamp-green-bg);}
.auth-back{display:block;text-align:center;margin-top:1rem;font-size:12.5px;color:var(--ink-soft);text-decoration:none;}
.center-logo{text-align:center;margin-bottom:1.6rem;}

/* Focus & hover states */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px;border-radius:4px;
}
.btn-primary:hover{opacity:0.9;}
.btn-secondary:hover, .btn-cancel:hover, .auth-tabs button:hover{border-color:var(--ink);color:var(--ink);}
.btn-link:hover{color:var(--ink);}
.tab:not(.active):hover{border-color:var(--ink);color:var(--ink);}
.card-actions button:hover{border-color:var(--ink);}
.card-actions button.danger:hover{border-color:var(--stamp-red);background:var(--stamp-red-bg);}
.price-card:hover{border-color:var(--ink);}