:root{
  --b:#166534;--bd:#14532D;--bl:#ECFDF5;--ink:#1C1917;--mu:#57534E;
  --bg:#F7F5F0;--ln:#E5E0D8;--ok:#166534;--okbg:#f0fdf4;--err:#991b1b;--errbg:#fef2f2;
  --card:#fff;--radius:16px;--shadow:0 1px 3px #0001,0 8px 24px #1c19170a;
  --focus:#86EFAC;--pillbg:#DCFCE7;--warn:#92400e;--warnbg:#fffbeb;
  --tab-h:64px;--safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--b);text-decoration:none}a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit}
img{max-width:100%;display:block}
#app{min-height:100%;display:flex;flex-direction:column}

.btn{appearance:none;border:1px solid var(--ln);background:#fff;color:var(--ink);font-weight:600;padding:10px 16px;border-radius:10px;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.btn:hover,.btn:focus-visible{text-decoration:none}
.btn-primary,.btn-primary:visited{background:var(--b);border-color:var(--b);color:#fff}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--bd);border-color:var(--bd);color:#fff}
.btn-danger{background:var(--errbg);border-color:#fecaca;color:var(--err)}
.btn-ghost{background:transparent}
.btn-sm{padding:6px 12px;min-height:36px;font-size:.9rem}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

.field{margin-bottom:1rem}
.field label{display:block;font-size:.9rem;font-weight:600;margin-bottom:.35rem}
.field .hint{display:block;font-size:.8rem;color:var(--mu);margin-top:.25rem;font-weight:500}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--ln);border-radius:10px;background:#fff;color:var(--ink);min-height:48px}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--focus);border-color:var(--b)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.check{display:flex;gap:10px;align-items:center;font-size:.95rem}
.check input{width:22px;height:22px;min-height:0;flex-shrink:0}

.pill{font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--pillbg);color:var(--bd);display:inline-block}
.pill.sent,.pill.viewed{background:#dbeafe;color:#1e40af}
.pill.accepted,.pill.paid,.pill.done,.pill.won{background:#dcfce7;color:#166534}
.pill.declined,.pill.lost{background:#fee2e2;color:#991b1b}
.pill.draft,.pill.open,.pill.scheduled{background:#f5f5f4;color:#57534E}
.pill.active{background:#fef3c7;color:#92400e}

.card{background:var(--card);border:1px solid var(--ln);border-radius:var(--radius);padding:1rem;box-shadow:0 1px 2px #0001;margin-bottom:10px}
.card-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.card-row strong{display:block}
.muted{color:var(--mu);font-size:.9rem}
.alert{padding:12px 14px;border-radius:10px;margin-bottom:1rem;font-size:.95rem}
.alert.ok{background:var(--okbg);color:var(--ok);border:1px solid #bbf7d0}
.alert.err{background:var(--errbg);color:var(--err);border:1px solid #fecaca}
.alert.warn{background:var(--warnbg);color:var(--warn);border:1px solid #fde68a}
.alert.info{background:var(--bl);color:var(--bd);border:1px solid #bbf7d0}

/* Auth */
.auth-wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:linear-gradient(180deg,#ECFDF5 0%,var(--bg) 55%)}
.auth-card{width:min(420px,100%);background:#fff;border:1px solid var(--ln);border-radius:20px;padding:1.75rem;box-shadow:var(--shadow)}
.auth-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.35rem;color:var(--bd);margin-bottom:1.25rem}
.auth-brand img{width:40px;height:40px;border-radius:10px}
.auth-card h1{font-size:1.35rem;margin:0 0 .35rem;letter-spacing:-.02em}
.auth-card .sub{color:var(--mu);margin:0 0 1.25rem;font-size:.95rem}
.auth-switch{text-align:center;margin-top:1rem;color:var(--mu);font-size:.95rem}

/* App shell */
.app-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--ln);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px}
.app-header .brand{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--bd);text-decoration:none}
.app-header .brand img{width:32px;height:32px;border-radius:8px}
.header-actions{display:flex;align-items:center;gap:6px}
.lang-btn{appearance:none;border:1px solid var(--ln);background:#fff;font-weight:800;padding:8px 10px;border-radius:8px;min-height:40px;cursor:pointer;min-width:48px}

.main{flex:1;width:min(720px,100%);margin:0 auto;padding:16px 16px calc(var(--tab-h) + var(--safe-b) + 16px)}
.page-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 1rem}
.page-title h1{font-size:1.35rem;margin:0;letter-spacing:-.02em}
.empty{text-align:center;padding:2.5rem 1rem;color:var(--mu)}
.empty .ico{font-size:2rem;margin-bottom:.5rem}

.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--ln);display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--tab-h) + var(--safe-b));padding-bottom:var(--safe-b)}
.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--mu);text-decoration:none;font-size:.7rem;font-weight:600;padding:6px 2px;min-height:44px}
.tabs a.active{color:var(--b)}
.tabs a .ico{font-size:1.25rem;line-height:1}

.action-bar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px;}

.line-card{border:1px solid var(--ln);border-radius:12px;padding:12px;margin-bottom:8px;background:var(--bg)}
.line-card .top{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px}
.totals{background:var(--bl);border-radius:12px;padding:14px;margin-top:12px}
.totals .row{display:flex;justify-content:space-between;padding:4px 0}
.totals .grand{font-size:1.2rem;font-weight:800;color:var(--bd);margin-top:6px;padding-top:8px;border-top:1px solid #bbf7d0}
.kv-box{background:#fff;border:1px dashed var(--b);border-radius:12px;padding:12px;margin-top:10px;font-size:.92rem}

.doc{background:#fff;border:1px solid var(--ln);border-radius:16px;padding:1.25rem;box-shadow:var(--shadow)}
.doc-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:1.25rem}
.doc-head h1{margin:0;font-size:1.5rem;color:var(--bd)}
.doc table{width:100%;border-collapse:collapse;font-size:.92rem;margin:1rem 0}
.doc th,.doc td{border-bottom:1px solid var(--ln);padding:8px 6px;text-align:left}
.doc th{font-size:.8rem;color:var(--mu);font-weight:600}
.doc .right{text-align:right}
.made-with{text-align:center;color:var(--mu);font-size:.85rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--ln)}
.made-with a{color:var(--b);font-weight:700}

.share-box{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.share-box input{font-size:.85rem}
.share-actions{display:flex;flex-wrap:wrap;gap:8px}

.plans{display:grid;gap:12px}
@media(min-width:700px){.plans{grid-template-columns:repeat(2,1fr)}.main{padding-bottom:24px}.tabs{display:none}.desktop-nav{display:flex!important}}
.desktop-nav{display:none;gap:4px;flex-wrap:wrap}
.desktop-nav a{padding:8px 12px;border-radius:8px;color:var(--mu);font-weight:600;text-decoration:none}
.desktop-nav a.active,.desktop-nav a:hover{background:var(--bl);color:var(--bd);text-decoration:none}
.plan{border:1px solid var(--ln);border-radius:16px;padding:1.25rem;background:#fff;display:flex;flex-direction:column}
.plan.hot{border-color:var(--b);box-shadow:0 0 0 3px #16653433}
.plan .price{font-size:1.75rem;font-weight:800;margin:.35rem 0}
.plan ul{list-style:none;padding:0;margin:0 0 1rem;flex:1}
.plan li{padding:.35rem 0 .35rem 1.35rem;position:relative}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--b);font-weight:800}

@media print{
  .app-header,.tabs,.action-bar,.no-print,.header-actions{display:none!important}
  .main{padding:0;width:100%;max-width:none}
  body{background:#fff}
  .doc{border:none;box-shadow:none;border-radius:0;padding:0}
}

.hidden{display:none!important}
.logo-preview{width:72px;height:72px;border-radius:12px;object-fit:contain;border:1px solid var(--ln);background:#fff}
.barcode-wrap{overflow-x:auto;margin-top:8px}
.barcode-wrap svg{height:48px;width:100%;max-width:420px}