/* ── TOKENS ── */
:root {
  --gn: #0c4f3d; --gn2: #1a7a54; --gn3: #e8f5f0;
  --nv: #1e3d6b; --nv2: #e8f0fb;
  --gold: #e8b93f; --gold-t: #5c4000;
  --teal: #00a896; --teal-t: #003d38;
  --red: #c62828; --red-bg: #fdecea;
  --warn: #f57c00; --warn-bg: #fff3e0;
  --ok: #2e7d32; --ok-bg: #e8f5e9;
  --bg: #f4f6f4; --card: #fff;
  --bdr: #d4d8d2; --bdr-lt: #eaece8;
  --txt: #1a1f1a; --txt-md: #4a5248; --txt-lt: #7a8878;
  --in-bg: #fff; --in-bdr: #c4c8c2;
  --sh: 0 1px 4px rgba(0,0,0,.09), 0 4px 16px rgba(0,0,0,.06);
  --sh-sm: 0 1px 3px rgba(0,0,0,.09);
  --r: 8px; --r-sm: 5px; --r-lg: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0e1210; --card:#161e19; --bdr:#2a3328; --bdr-lt:#1e2a20;
    --txt:#dce8dc; --txt-md:#8a9e8a; --txt-lt:#5a6e5a;
    --in-bg:#1c2a1e; --in-bdr:#2e3e2e; --gn3:#0d2a1f; --nv2:#0d1a30;
    --gold:#3d2d00; --gold-t:#e8c55a; --teal:#003d35; --teal-t:#4dc9b0;
    --red-bg:#2a0a0a; --warn-bg:#2a1800; --ok-bg:#0a2010;
  }
}
:root[data-theme="light"]{--bg:#f4f6f4;--card:#fff;--bdr:#d4d8d2;--bdr-lt:#eaece8;--txt:#1a1f1a;--txt-md:#4a5248;--txt-lt:#7a8878;--in-bg:#fff;--in-bdr:#c4c8c2;--gn3:#e8f5f0;--nv2:#e8f0fb;--gold:#e8b93f;--gold-t:#5c4000;--teal:#00a896;--teal-t:#003d38;--red-bg:#fdecea;--warn-bg:#fff3e0;--ok-bg:#e8f5e9;}
:root[data-theme="dark"]{--bg:#0e1210;--card:#161e19;--bdr:#2a3328;--bdr-lt:#1e2a20;--txt:#dce8dc;--txt-md:#8a9e8a;--txt-lt:#5a6e5a;--in-bg:#1c2a1e;--in-bdr:#2e3e2e;--gn3:#0d2a1f;--nv2:#0d1a30;--gold:#3d2d00;--gold-t:#e8c55a;--teal:#003d35;--teal-t:#4dc9b0;--red-bg:#2a0a0a;--warn-bg:#2a1800;--ok-bg:#0a2010;}

/* ── RESET & BASE ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:15px;-webkit-text-size-adjust:100%;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--txt);line-height:1.6;}
a{color:var(--gn2);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;}

/* ── LAYOUT ── */
.container{max-width:1100px;margin:0 auto;padding:0 20px;}
.container-sm{max-width:520px;margin:0 auto;padding:0 20px;}
.flex{display:flex;} .flex-col{flex-direction:column;}
.items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-24{gap:24px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:580px){.grid-2{grid-template-columns:1fr;}}
.span-2{grid-column:1/-1;}
.ml-auto{margin-left:auto;} .mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;}
.text-center{text-align:center;} .text-right{text-align:right;}
.hidden{display:none!important;}
.w-full{width:100%;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ── TYPOGRAPHY ── */
h1{font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.15;}
h2{font-size:clamp(20px,3vw,28px);font-weight:700;letter-spacing:-.01em;line-height:1.2;}
h3{font-size:18px;font-weight:700;}
h4{font-size:15px;font-weight:700;}
.text-sm{font-size:13px;} .text-xs{font-size:11px;} .text-lg{font-size:17px;}
.text-muted{color:var(--txt-md);} .text-light{color:var(--txt-lt);}
.font-bold{font-weight:700;} .font-semibold{font-weight:600;}
.tabular{font-variant-numeric:tabular-nums;}

/* ── NAV ── */
.app-nav{background:var(--gn);color:#fff;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:56px;position:sticky;top:0;z-index:200;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.nav-logo{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;}
.nav-logo:hover{text-decoration:none;}
.nav-right{display:flex;align-items:center;gap:8px;}
.nav-link{color:rgba(255,255,255,.8);font-size:14px;font-weight:500;padding:6px 10px;border-radius:6px;transition:background .15s;}
.nav-link:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 18px;border-radius:var(--r-sm);border:none;cursor:pointer;font-size:14px;font-weight:600;line-height:1;transition:opacity .15s,transform .1s,box-shadow .15s;white-space:nowrap;}
.btn:hover{opacity:.88;} .btn:active{transform:scale(.97);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn-primary{background:var(--gn2);color:#fff;}
.btn-primary:hover{background:var(--gn);opacity:1;}
.btn-secondary{background:var(--card);color:var(--gn2);border:1.5px solid var(--bdr);}
.btn-secondary:hover{border-color:var(--gn2);background:var(--gn3);opacity:1;}
.btn-danger{background:var(--red);color:#fff;}
.btn-ghost{background:transparent;color:var(--txt-md);border:1.5px solid var(--bdr);}
.btn-white{background:#fff;color:var(--gn);}
.btn-nav-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5);}
.btn-nav-outline:hover{background:rgba(255,255,255,.1);}
.btn-sm{padding:6px 12px;font-size:13px;}
.btn-lg{padding:13px 28px;font-size:16px;}
.btn-icon{padding:8px;}

/* ── FORMS ── */
.form-group{display:flex;flex-direction:column;gap:5px;}
.form-group label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--txt-md);}
.form-control{padding:10px 12px;border:1px solid var(--in-bdr);border-radius:var(--r-sm);font-size:14px;color:var(--txt);background:var(--in-bg);transition:border-color .15s,box-shadow .15s;width:100%;}
.form-control:focus{outline:none;border-color:var(--gn2);box-shadow:0 0 0 3px rgba(26,122,84,.12);}
.form-hint{font-size:11px;color:var(--txt-lt);}
.form-section{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--nv);padding-bottom:8px;border-bottom:1px solid var(--bdr-lt);margin-bottom:4px;}

/* ── CARDS ── */
.card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-lg);box-shadow:var(--sh-sm);}
.card-body{padding:24px;}
.card-header{padding:16px 24px;border-bottom:1px solid var(--bdr);}
.card-footer{padding:16px 24px;border-top:1px solid var(--bdr);background:var(--bg);border-radius:0 0 var(--r-lg) var(--r-lg);}

/* ── BADGES ── */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;}
.badge-green{background:var(--gn3);color:var(--gn2);}
.badge-gold{background:var(--gold);color:var(--gold-t);}
.badge-teal{background:var(--teal);color:var(--teal-t);}
.badge-warn{background:var(--warn-bg);color:var(--warn);}
.badge-red{background:var(--red-bg);color:var(--red);}

/* ── ALERTS ── */
.alert{padding:12px 16px;border-radius:var(--r-sm);font-size:14px;display:flex;align-items:flex-start;gap:10px;}
.alert-warn{background:var(--warn-bg);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);}
.alert-ok{background:var(--ok-bg);color:var(--ok);}
.alert-error{background:var(--red-bg);color:var(--red);}
.trial-banner{background:linear-gradient(135deg,var(--gn) 0%,#155c4a 100%);color:#fff;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.trial-banner .trial-text{font-size:14px;font-weight:500;}
.trial-banner strong{font-weight:700;}

/* ── COMPARISON TABLE (shared with compare + shared pages) ── */
#twrap{overflow-x:auto;}
.ct{width:100%;min-width:580px;border-collapse:collapse;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh);font-size:13px;font-variant-numeric:tabular-nums;}
.ct td{padding:8px 12px;border:1px solid var(--bdr-lt);vertical-align:middle;}
.r-grn td{background:var(--gn);color:#fff;padding:13px 12px;vertical-align:top;}
.r-photo td{padding:0;}
.prop-img{width:100%;height:108px;object-fit:cover;display:block;}
.photo-ph{height:108px;background:var(--bdr-lt);display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--txt-lt);}
.r-name td{background:var(--card);padding:10px 12px;}
.p-name{font-weight:700;font-size:12px;line-height:1.4;}
.p-addr{font-size:11px;color:var(--txt-lt);margin-top:2px;}
.r-sec td{background:var(--nv);color:#fff;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.07em;text-align:center;padding:8px 12px;}
.r-alt td{background:var(--bg);}
.r-bold td{font-weight:700;}
.c-lbl{width:168px;min-width:140px;background:var(--bg)!important;font-size:12px;color:var(--txt-md);line-height:1.35;}
.sub-lbl{font-size:10px;color:var(--txt-lt);display:block;}
.c-prop{text-align:right;min-width:128px;}
.sub-v{font-size:11px;color:var(--txt-lt);font-weight:400;}
.r-tot td{font-weight:700;background:var(--card)!important;padding:10px 12px;}
.amt-big{font-size:16px;font-weight:800;letter-spacing:-.01em;}
.per-mo{font-size:11px;font-weight:500;color:var(--txt-md);}
.ct-badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.02em;margin-top:4px;text-transform:uppercase;}
.cb-amber{background:var(--gold);color:var(--gold-t);}
.cb-teal{background:var(--teal);color:var(--teal-t);}
.diff-s{color:var(--ok);font-weight:700;}
.diff-i{color:var(--red);font-weight:700;}
.lo-ey{font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.7;margin-bottom:4px;}
.lo-nm{font-size:16px;font-weight:800;line-height:1.2;}
.lo-co{font-size:12px;opacity:.85;margin-top:2px;}
.lo-mt{font-size:11px;opacity:.7;margin-top:4px;}
.hdr-lt{font-size:12px;font-weight:600;opacity:.85;margin-bottom:2px;}
.r-disc td{font-size:10px;color:var(--txt-lt);background:var(--bg);padding:10px 12px;line-height:1.5;}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal{background:var(--card);border-radius:var(--r-lg);box-shadow:0 8px 40px rgba(0,0,0,.2);width:100%;max-width:460px;overflow:hidden;}
.modal-header{padding:20px 24px 16px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;}
.modal-header h3{margin:0;}
.modal-body{padding:24px;}
.modal-footer{padding:16px 24px;border-top:1px solid var(--bdr);display:flex;justify-content:flex-end;gap:10px;}
.btn-close{background:none;border:none;cursor:pointer;color:var(--txt-lt);font-size:20px;line-height:1;padding:2px 6px;border-radius:4px;}
.btn-close:hover{background:var(--bg);color:var(--txt);}

/* ── TOAST ── */
#toast{position:fixed;bottom:24px;right:24px;background:#1a1a1a;color:#fff;padding:12px 20px;border-radius:var(--r-sm);font-size:13px;font-weight:600;z-index:9999;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;pointer-events:none;max-width:320px;}
#toast.on{opacity:1;transform:translateY(0);}
#toast.toast-ok{background:var(--ok);}
#toast.toast-err{background:var(--red);}
#toast.toast-warn{background:var(--warn);}

/* ── DASHBOARD TABLE ── */
.data-table{width:100%;border-collapse:collapse;}
.data-table th{text-align:left;padding:10px 16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--txt-lt);border-bottom:2px solid var(--bdr);}
.data-table td{padding:13px 16px;border-bottom:1px solid var(--bdr-lt);font-size:14px;vertical-align:middle;}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:var(--gn3);}
.data-table .actions{display:flex;gap:6px;justify-content:flex-end;}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:60px 24px;}
.empty-state-icon{font-size:48px;margin-bottom:16px;}
.empty-state h3{margin-bottom:8px;color:var(--txt-md);}
.empty-state p{color:var(--txt-lt);margin-bottom:24px;max-width:360px;margin-left:auto;margin-right:auto;}

/* ── LANDING PAGE ── */
.hero{background:linear-gradient(145deg,#0a3d2e 0%,#0c4f3d 50%,#0e5a46 100%);color:#fff;padding:80px 20px;text-align:center;}
.hero h1{max-width:700px;margin:0 auto 20px;text-wrap:balance;}
.hero p{font-size:18px;opacity:.85;max-width:520px;margin:0 auto 36px;}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.section{padding:72px 20px;}
.section-alt{background:var(--card);}
.section-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gn2);margin-bottom:10px;}
.section h2{text-wrap:balance;margin-bottom:16px;}
.section .lead{font-size:17px;color:var(--txt-md);max-width:560px;}
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px;}
@media(max-width:680px){.step-grid{grid-template-columns:1fr;gap:24px;}}
.step{text-align:center;}
.step-num{width:44px;height:44px;background:var(--gn2);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;margin:0 auto 14px;}
.step h3{margin-bottom:8px;}
.step p{color:var(--txt-md);font-size:14px;}
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px;}
@media(max-width:680px){.feature-grid{grid-template-columns:1fr;}}
.feature-card{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:24px;}
.feature-icon{font-size:28px;margin-bottom:12px;}
.feature-card h4{margin-bottom:6px;}
.feature-card p{font-size:14px;color:var(--txt-md);}
.pricing-card{max-width:420px;margin:40px auto 0;background:var(--card);border:2px solid var(--gn2);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 4px 24px rgba(12,79,61,.15);}
.pricing-header{background:var(--gn);color:#fff;padding:32px 32px 28px;text-align:center;}
.price-amount{font-size:52px;font-weight:800;letter-spacing:-.03em;line-height:1;}
.price-period{font-size:16px;opacity:.8;}
.pricing-trial{font-size:14px;opacity:.75;margin-top:8px;}
.pricing-features{padding:28px 32px;}
.pricing-features li{list-style:none;padding:8px 0;font-size:15px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--bdr-lt);}
.pricing-features li:last-child{border-bottom:none;}
.pricing-features li::before{content:'✓';color:var(--gn2);font-weight:800;font-size:16px;}
.pricing-footer{padding:20px 32px 28px;text-align:center;}
.lp-footer{background:#0a3d2e;color:rgba(255,255,255,.6);padding:32px 20px;text-align:center;font-size:13px;}
.lp-footer a{color:rgba(255,255,255,.7);}

/* ── AUTH PAGE ── */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.auth-card{width:100%;max-width:420px;}
.auth-logo{text-align:center;margin-bottom:28px;}
.auth-logo a{font-size:24px;font-weight:800;color:var(--gn);text-decoration:none;display:inline-flex;align-items:center;gap:8px;}
.auth-tabs{display:flex;border-bottom:2px solid var(--bdr);margin-bottom:24px;}
.auth-tab{flex:1;padding:10px;text-align:center;font-weight:600;font-size:14px;cursor:pointer;color:var(--txt-lt);border-bottom:2.5px solid transparent;margin-bottom:-2px;transition:all .15s;}
.auth-tab.on{color:var(--gn2);border-bottom-color:var(--gn2);}

/* ── APP SHELL ── */
.page{min-height:calc(100vh - 56px);padding:28px 0;}
.page-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap;}
.page-title{font-size:22px;font-weight:800;letter-spacing:-.01em;}

/* ── COMPARE TOOL SPECIFIC ── */
#tool-topbar{background:var(--gn);color:#fff;display:flex;align-items:center;gap:12px;padding:10px 16px;position:sticky;top:56px;z-index:100;box-shadow:0 2px 6px rgba(0,0,0,.2);flex-wrap:wrap;}
.tool-title-input{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:6px;color:#fff;padding:7px 12px;font-size:14px;font-weight:600;min-width:200px;max-width:300px;}
.tool-title-input::placeholder{color:rgba(255,255,255,.6);}
.tool-title-input:focus{outline:none;background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5);}
.tool-btns{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap;}
#input-panel{background:var(--card);border-bottom:1px solid var(--bdr);}
#input-panel.hidden{display:none;}
.tabs{display:flex;background:var(--bg);border-bottom:1px solid var(--bdr);padding:0 12px;overflow-x:auto;}
.tab{padding:11px 15px;font-size:13px;font-weight:500;color:var(--txt-lt);cursor:pointer;white-space:nowrap;border-bottom:2.5px solid transparent;transition:all .15s;user-select:none;}
.tab:hover{color:var(--txt-md);}
.tab.on{color:var(--gn2);border-bottom-color:var(--gn2);background:var(--card);font-weight:600;}
.tab.has-data::after{content:'';display:inline-block;width:6px;height:6px;background:var(--gn2);border-radius:50%;margin-left:6px;vertical-align:middle;}
.tab-pane{display:none;padding:20px;}
.tab-pane.on{display:block;}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:560px){.fg{grid-template-columns:1fr;}}
.fg .form-section{grid-column:1/-1;}
.fg .span2{grid-column:1/-1;}
.lt-btns{display:flex;gap:8px;}
.lt-btn{flex:1;padding:9px 8px;border:1.5px solid var(--bdr);border-radius:var(--r-sm);background:var(--in-bg);color:var(--txt-md);font-size:13px;font-weight:600;cursor:pointer;text-align:center;transition:all .15s;}
.lt-btn:hover{border-color:var(--gn2);color:var(--gn2);}
.lt-btn.on{background:var(--gn2);color:#fff;border-color:var(--gn2);}
#out{padding:16px;}

/* ── SETTINGS ── */
.color-preview{width:32px;height:32px;border-radius:50%;border:2px solid var(--bdr);display:inline-block;vertical-align:middle;margin-left:8px;}
.sub-status-card{border:1px solid var(--bdr);border-radius:var(--r-lg);padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}

/* ── SHARE MODAL ── */
.share-option{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--bdr);border-radius:var(--r-sm);cursor:pointer;text-decoration:none;color:var(--txt);transition:all .15s;margin-bottom:10px;}
.share-option:hover{border-color:var(--gn2);background:var(--gn3);text-decoration:none;}
.share-icon{font-size:24px;width:44px;text-align:center;}
.share-label{font-weight:600;font-size:14px;}
.share-desc{font-size:12px;color:var(--txt-lt);}
.share-url-row{display:flex;gap:8px;align-items:center;}
.share-url-row input{flex:1;}

/* ── PRINT ── */
@media print{
  .app-nav,#tool-topbar,#input-panel,.trial-banner,#toast,.modal-overlay{display:none!important;}
  #out{padding:0;}
  body{background:#fff;}
  .ct{box-shadow:none;font-size:11px;border-radius:0;}
  .c-lbl{width:130px;min-width:110px;}
}

/* ── BRANDING OVERRIDE ── */
.brand-gn{color:var(--user-color,var(--gn))!important;}
.brand-bg{background:var(--user-color,var(--gn))!important;}