/* ===== Trylify v5 — Unified Design System ===== */
/* Dark/Light via prefers-color-scheme + manual toggle */
:root {
  --bg: #ffffff; --bg-2: #f5f5f5; --bg-3: #fafafa;
  --fg: #0c0c0c; --fg-2: #5a5a5a; --fg-3: #888;
  --accent: #2563eb; --accent-hv: #1d4ed8;
  --accent-soft: rgba(37,99,235,.10);
  --success:#22c55e; --warn:#f59e0b; --error:#ef4444; --info:#3b82f6;
  --border: #e6e6e6; --border-2: #d0d0d0; --border-3: #b0b0b0;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.10);
  --radius-sm: 6px; --radius: 8px; --radius-lg: 14px;
  --font: 'Inter', system-ui,-apple-system,sans-serif;
  --mono: 'SF Mono','Fira Code',ui-monospace,monospace;
  --max: 1100px; --nav-h: 60px;
}
/* OS dark mode disabled — use manual toggle via data-theme="dark" instead */
[data-theme="dark"] { --bg:#0c0c0e; --bg-2:#161618; --bg-3:#1c1c1f; --fg:#f5f5f5; --fg-2:#a0a0a0; --fg-3:#666; --border:#2a2a2c; --border-2:#3a3a3c; --border-3:#4a4a4c; --shadow:0 1px 3px rgba(0,0,0,.3); --shadow-lg:0 8px 24px rgba(0,0,0,.5); }
[data-theme="light"] { --bg:#ffffff; --bg-2:#f5f5f5; --bg-3:#fafafa; --fg:#0c0c0c; --fg-2:#5a5a5a; --fg-3:#888; --border:#e6e6e6; --border-2:#d0d0d0; --border-3:#b0b0b0; --shadow:0 1px 3px rgba(0,0,0,.08); --shadow-lg:0 8px 24px rgba(0,0,0,.10); }

/* Reset */
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font);font-size:14.5px;line-height:1.6;color:var(--fg);background:var(--bg);min-height:100vh}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
img,svg{max-width:100%;display:block}
input,textarea,select,button{font-family:var(--font);font-size:14px;color:var(--fg);background:var(--bg-2);border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:10px 12px;outline:none;transition:border-color .15s,box-shadow .15s;width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
button{cursor:pointer;background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600;padding:10px 20px;width:auto;display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-sm)}button:hover{background:var(--accent-hv);border-color:var(--accent-hv)}button:disabled{opacity:.5;cursor:not-allowed}
button.secondary{background:var(--bg-3);color:var(--fg);border-color:var(--border-2)}button.secondary:hover{background:var(--border);border-color:var(--border-3)}
textarea{resize:vertical;line-height:1.6}
code,pre{font-family:var(--mono);font-size:12.5px}pre{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;overflow:auto}

/* Header */
.site-header{background:var(--bg-2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;height:var(--nav-h)}
.header-inner{max-width:var(--max);margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:16px}
.site-brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px;color:var(--fg)}.site-brand svg{stroke:var(--accent);fill:none}
.main-nav{flex:1;display:flex;justify-content:flex-end}.nav-list{list-style:none;display:flex;gap:6px}.nav-list a{padding:6px 12px;border-radius:var(--radius-sm);color:var(--fg-2);font-size:13px;font-weight:500;transition:background .15s,color .15s}.nav-list a:hover{background:var(--accent-soft);color:var(--accent);text-decoration:none}
.hamburger{display:none}

/* Main */
.site-main{max-width:var(--max);margin:0 auto;padding:40px 20px;min-height:calc(100vh - var(--nav-h) - 200px)}

/* Page header on tool pages */
.page-head{margin-bottom:32px}.page-head h1{font-size:28px;font-weight:700;margin-bottom:8px;letter-spacing:-.3px}.page-head p{max-width:560px;color:var(--fg-2);font-size:15px}

/* Tab bar */
.tab-row{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid var(--border);padding-bottom:1px}
.tab{display:inline-flex;padding:8px 16px;font-size:13px;font-weight:500;color:var(--fg-3);border-bottom:2px solid transparent;cursor:pointer;margin-bottom:-1px;transition:color .15s,border-color .15s}.tab:hover{color:var(--fg-2)}.tab.active{border-color:var(--accent);color:var(--accent)}.tab:focus{outline:none}

/* Cards */
.card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;margin-bottom:16px;box-shadow:var(--shadow);transition:box-shadow .2s,border-color .2s}.card:hover{box-shadow:var(--shadow-lg)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.card-head h2{font-size:16px;font-weight:600;margin:0}
.card-head .actions{display:flex;gap:8px;flex-wrap:wrap}

/* Form grid */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.form-group label{display:block;font-size:12.5px;font-weight:600;color:var(--fg-2);margin-bottom:6px}

/* Result card */
.result-card{border-color:var(--accent-soft);background:var(--bg-3)}.result-card .result-val{font-size:20px;font-weight:700;color:var(--accent)}.result-card .result-lbl{font-size:12px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.5px}
.result-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}

/* Tool specific */
.preview-box{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;min-height:100px;margin-top:16px}
.output-area{min-height:120px}.output-area.placeholder{color:var(--fg-3);font-style:italic}

/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:24px;font-size:12px;color:var(--fg-3)}.breadcrumb a{color:var(--fg-3)}.breadcrumb a:hover{color:var(--accent)}.breadcrumb-sep{color:var(--fg-3);opacity:.5}

/* Footer */
.site-footer{border-top:1px solid var(--border);background:var(--bg-2);padding:40px 20px;margin-top:60px}.footer-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:2fr repeat(3,1fr);gap:24px}.footer-col h3{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--fg-3);margin-bottom:12px}.footer-col ul{list-style:none}.footer-col li a{display:block;padding:4px 0;color:var(--fg-2);font-size:13px}.footer-col li a:hover{color:var(--accent)}
.footer-brand{font-weight:700;font-size:18px}
.footer-bottom{text-align:center;padding-top:24px;border-top:1px solid var(--border);margin-top:24px;font-size:12px;color:var(--fg-3)}

/* Responsive */
@media (max-width:768px){
.main-nav{display:none;position:absolute;right:0;top:var(--nav-h);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:8px;box-shadow:var(--shadow-lg)}.main-nav.open{display:block}
.hamburger{display:flex;flex-direction:column;gap:4px;padding:8px;background:none;border:none}.hamburger span{display:block;width:20px;height:2px;background:var(--fg);border-radius:2px}
.site-main{padding:24px 16px}.footer-inner{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}h1{font-size:24px}
}

/* Utilities */
.flex{display:flex;gap:16px;align-items:center}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.between{justify-content:space-between}.center{justify-content:center}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:768px){.split{grid-template-columns:1fr}}

/* Diff */
.diff-line{display:contents}.diff-line td{padding:2px 8px;font-family:var(--mono);font-size:12.5px}.diff-ln{color:var(--fg-3);border-right:1px solid var(--border);text-align:center;width:40px}.diff-ins{background:rgba(34,197,94,.12);color:#166534}.diff-del{background:rgba(239,68,68,.12);color:#991b1b}

/* Table */
table.data{width:100%;border-collapse:collapse;font-size:13px}table.data th,table.data td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--border)}table.data th{font-weight:600;font-size:12px;text-transform:uppercase;color:var(--fg-3);letter-spacing:.5px}table.data tr:hover td{background:var(--bg-3)}

/* Amortization */
.amort-table{overflow:auto;max-height:400px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-top:16px}

/* Password strength */
.strength-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:6px}.strength-bar div{height:100%;width:0;transition:width .3s}

/* Ad placeholder */
.ad-placeholder{background:var(--bg-3);border:2px dashed var(--border-2);border-radius:var(--radius-sm);padding:24px;text-align:center;color:var(--fg-3);font-size:13px}

/* Animate */
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease-out}

/* File drop */
.drop-zone{border:2px dashed var(--border-3);border-radius:var(--radius-lg);padding:40px;text-align:center;transition:border-color .2s,background .2s}.drop-zone:hover,.drop-zone.dragover{border-color:var(--accent);background:var(--accent-soft)}.drop-zone input[type="file"]{display:none}