/* ===== Wise Decision Calculator — Global Styles ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{
 font-family:'Inter','Segoe UI','Helvetica Neue',system-ui,-apple-system,sans-serif;
 background:#FAF0E6;color:#5D4E46;line-height:1.6;
 -webkit-font-smoothing:antialiased;
}
:root{
 --bg:#FAF0E6;--bg-card:#FFF8F0;--bg-side:#FFF5EB;
 --primary:#E8A87C;--primary-hover:#D9916A;
 --secondary:#B5C7B0;--secondary-hover:#A3B89E;
 --accent:#D4A5C6;--accent-hover:#C892B8;
 --warm:#F0C987;--warm-hover:#E8BD74;
 --text:#5D4E46;--text2:#9B8B80;--text3:#B5A79C;
 --border:#E8DDD4;--border-light:#F2EAE0;
 --shadow:0 4px 20px rgba(93,78,70,.08);
 --shadow-hover:0 8px 32px rgba(93,78,70,.12);
 --radius:16px;--radius-sm:10px;--radius-lg:24px;
 --transition:280ms cubic-bezier(.34,1.1,.5,1);
 --font-serif:'Georgia','Times New Roman',serif;
}
::selection{background:rgba(232,168,124,.3);color:#5D4E46}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}

/* ===== SIDEBAR ===== */
.sidebar{
 position:fixed;top:0;left:0;bottom:0;width:260px;z-index:100;
 background:var(--bg-side);border-right:1px solid var(--border);
 padding:32px 24px;display:flex;flex-direction:column;
 transition:transform var(--transition);
}
.side-logo{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.side-logo-mark{
 width:38px;height:38px;border-radius:12px;
 background:linear-gradient(135deg,#E8A87C,#D4A5C6);
 display:flex;align-items:center;justify-content:center;
 font-size:18px;color:#FFF8F0;font-weight:700;
}
.side-logo-text{font-size:17px;font-weight:700;color:var(--text);line-height:1.2}
.side-logo-text small{display:block;font-size:11px;font-weight:400;color:var(--text2);margin-top:1px}
.side-tagline{
 font-size:13px;color:var(--text2);font-style:italic;margin-bottom:28px;
 padding:12px 14px;background:rgba(232,168,124,.1);border-radius:var(--radius-sm);
 border-left:3px solid var(--primary);
}
.side-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.side-nav a{
 display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-sm);
 font-size:14px;font-weight:500;color:var(--text2);text-decoration:none;
 transition:all var(--transition);
}
.side-nav a:hover{background:rgba(232,168,124,.1);color:var(--text)}
.side-nav a.act{background:rgba(232,168,124,.15);color:var(--primary);font-weight:600}
.side-nav a .nav-icon{font-size:18px;width:24px;text-align:center}
.side-foot{
 padding-top:20px;border-top:1px solid var(--border);margin-top:auto;
 font-size:12px;color:var(--text3);
}
.side-foot a{color:var(--text2);text-decoration:none}
.side-foot a:hover{color:var(--primary)}

/* ===== HAMBURGER ===== */
.hamburger{
 display:none;position:fixed;top:16px;left:16px;z-index:200;
 width:40px;height:40px;border-radius:10px;border:none;
 background:var(--bg-card);box-shadow:var(--shadow);
 cursor:pointer;font-size:18px;color:var(--text);align-items:center;justify-content:center;
}
.hamburger.show{display:flex}
.overlay{display:none;position:fixed;inset:0;z-index:90;background:rgba(93,78,46,.3)}
.overlay.show{display:block}

/* ===== MAIN ===== */
.main-wrap{margin-left:260px;min-height:100vh}
.main-inner{max-width:900px;padding:40px 40px 60px;margin:0 auto}

/* ===== HERO ===== */
.hero{margin-bottom:48px;margin-top:12px}
.hero-badge{
 display:inline-flex;align-items:center;gap:6px;
 font-size:12px;font-weight:600;color:var(--primary);
 background:rgba(232,168,124,.12);padding:5px 14px;border-radius:100px;
 margin-bottom:16px;
}
.hero h1{
 font-size:clamp(28px,3.5vw,44px);font-weight:800;letter-spacing:-1px;
 line-height:1.1;margin-bottom:10px;color:var(--text);
}
.hero h1 .hl{background:linear-gradient(135deg,#E8A87C,#D4A5C6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:17px;color:var(--text2);max-width:500px;line-height:1.7}

/* ===== SECTIONS ===== */
.sec{margin-bottom:44px}
.sec-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:6px}
.sec-header h2{font-size:20px;font-weight:700}
.sec-header a{font-size:14px;color:var(--primary);text-decoration:none;font-weight:500}
.sec-header a:hover{text-decoration:underline}

.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:640px){.card-grid{grid-template-columns:1fr}}

.card{
 background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
 padding:24px;text-decoration:none;display:block;color:inherit;
 transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
 position:relative;overflow:hidden;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--border-light)}
.card .card-bar{
 position:absolute;top:0;left:0;right:0;height:4px;
 background:var(--card-c,var(--primary));border-radius:0 0 4px 4px;
}
.card .card-icon{font-size:30px;margin-bottom:10px;display:block}
.card h3{font-size:17px;font-weight:700;margin-bottom:4px}
.card p{font-size:13px;color:var(--text2);line-height:1.6}
.card .card-hint{
 display:inline-flex;align-items:center;gap:4px;margin-top:12px;
 font-size:12px;font-weight:600;color:var(--card-c,var(--primary));
}

/* ===== TAGLINE BANNER ===== */
.tagline-banner{
 background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
 padding:28px 32px;text-align:center;
 background-image:radial-gradient(circle at 20% 80%, rgba(212,165,198,.1), transparent 50%),
 radial-gradient(circle at 80% 20%, rgba(232,168,124,.08), transparent 50%);
}
.tagline-banner .quote{
 font-size:20px;font-weight:600;font-style:italic;color:var(--text);
 font-family:var(--font-serif);line-height:1.5;
}
.tagline-banner .by{font-size:13px;color:var(--text2);margin-top:6px}

/* ===== PAGE HEADER ===== */
.page-hd{margin-bottom:32px}
.page-hd .bread{
 display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text3);margin-bottom:12px;
}
.page-hd .bread a{color:var(--text2);text-decoration:none}
.page-hd .bread a:hover{color:var(--primary)}
.page-hd h1{font-size:28px;font-weight:800;letter-spacing:-.5px;margin-bottom:4px}
.page-hd p{font-size:15px;color:var(--text2)}

/* ===== CATEGORY CHIPS ===== */
.cat-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.cat-chip{
 padding:7px 18px;border-radius:100px;font-size:13px;font-weight:600;
 border:1px solid var(--border);background:transparent;color:var(--text2);
 cursor:pointer;transition:all var(--transition);text-decoration:none;
}
.cat-chip:hover{border-color:var(--primary);color:var(--primary);background:rgba(232,168,124,.08)}
.cat-chip.act{background:var(--primary);color:#FFF8F0;border-color:var(--primary)}

/* ===== TOOL LIST ===== */
.tool-list{display:flex;flex-direction:column;gap:10px}
.tool-item{
 display:flex;align-items:center;gap:16px;
 background:var(--bg-card);border:1px solid var(--border);
 border-radius:var(--radius-lg);padding:20px 22px;text-decoration:none;color:inherit;
 transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.tool-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--border-light)}
.tool-item .ti-icon{
 width:44px;height:44px;border-radius:12px;
 display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;
 background:var(--t-c10, rgba(232,168,124,.12));
}
.tool-item .ti-info{flex:1;min-width:0}
.tool-item .ti-name{font-size:15px;font-weight:700;margin-bottom:2px}
.tool-item .ti-desc{font-size:13px;color:var(--text2);line-height:1.5}
.tool-item .ti-meta{font-size:12px;color:var(--text3);margin-top:4px}
.tool-item .ti-arrow{font-size:16px;color:var(--text3);transition:transform var(--transition)}
.tool-item:hover .ti-arrow{transform:translateX(4px);color:var(--primary)}

/* ===== TOOL WRAP ===== */
.tool-wrap{
 background:var(--bg-card);border:1px solid var(--border);
 border-radius:var(--radius-lg);padding:32px;
}
@media(max-width:600px){.tool-wrap{padding:20px}}

/* ===== FORM ELEMENTS ===== */
.form-group{margin-bottom:20px}
.form-group label{font-size:14px;font-weight:600;display:block;margin-bottom:6px;color:var(--text)}
.form-group label small{font-weight:400;color:var(--text2);font-size:13px}
.form-group input,.form-group select{
 width:100%;padding:12px 16px;border-radius:var(--radius-sm);
 border:1px solid var(--border);background:var(--bg);
 font-size:15px;font-family:inherit;color:var(--text);outline:none;
 transition:border-color var(--transition),box-shadow var(--transition);
}
.form-group input:focus,.form-group select:focus{
 border-color:var(--primary);box-shadow:0 0 0 3px rgba(232,168,124,.15);
}
.form-group input::placeholder{color:var(--text3)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:500px){.form-row{grid-template-columns:1fr}}

.calc-btn{
 width:100%;padding:14px;border:none;border-radius:var(--radius-sm);
 background:linear-gradient(135deg,#E8A87C,#D4A5C6);
 color:#FFF8F0;font-size:16px;font-weight:700;cursor:pointer;
 transition:opacity var(--transition),transform var(--transition);
 letter-spacing:.3px;
}
.calc-btn:hover{opacity:.92;transform:translateY(-1px)}
.calc-btn:active{transform:translateY(0)}

/* ===== RESULT ===== */
.result-wrap{margin-top:24px;display:none;animation:fadeUp .4s ease}
.result-wrap.show{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.result-card{
 background:linear-gradient(135deg,var(--bg),rgba(232,168,124,.06));
 border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px;text-align:center;
}
.result-card .r-emoji{font-size:48px;margin-bottom:8px}
.result-card .r-verdict{font-size:24px;font-weight:800;margin-bottom:4px}
.result-card .r-value{font-size:32px;font-weight:800;color:var(--primary);margin-bottom:4px}
.result-card .r-sub{font-size:14px;color:var(--text2);margin-bottom:16px}
.result-card .r-detail{font-size:14px;color:var(--text);line-height:1.7;text-align:left;padding:14px 18px;background:var(--bg);border-radius:var(--radius-sm);border-left:3px solid var(--primary);margin-bottom:12px}
.result-card .r-breakdown{font-size:13px;color:var(--text2);text-align:left;padding:12px 16px;background:var(--bg);border-radius:var(--radius-sm);margin-bottom:12px}
.result-card .r-breakdown table{width:100%;border-collapse:collapse}
.result-card .r-breakdown td{padding:4px 8px;border-bottom:1px solid var(--border-light)}
.result-card .r-reset{
 margin-top:16px;padding:8px 24px;border-radius:100px;border:1px solid var(--border);
 background:transparent;color:var(--text2);font-size:13px;cursor:pointer;
 transition:all var(--transition);
}
.result-card .r-reset:hover{background:var(--bg);color:var(--text);border-color:var(--border-light)}

/* ===== EEAT FOOTER ===== */
.eeat{border-top:1px solid var(--border);margin-top:32px;padding-top:20px;font-size:13px;color:var(--text3);line-height:1.7}
.eeat strong{color:var(--text2);font-weight:600}
.eeat .updated{display:inline-block;padding:2px 10px;border-radius:100px;background:rgba(232,168,124,.1);color:var(--primary);font-size:11px;font-weight:600;margin-bottom:6px}

/* ===== PAGE CONTENT ===== */
.page-content{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;line-height:1.8}
@media(max-width:600px){.page-content{padding:20px}}
.page-content h2{font-size:20px;font-weight:700;margin:24px 0 8px;color:var(--text)}
.page-content h2:first-child{margin-top:0}
.page-content h3{font-size:17px;font-weight:600;margin:20px 0 6px;color:var(--text)}
.page-content p{margin-bottom:12px;font-size:15px;color:var(--text)}
.page-content ul{padding-left:20px;margin-bottom:12px}
.page-content li{font-size:15px;color:var(--text);margin-bottom:4px}
.page-content a{color:var(--primary);text-decoration:none}
.page-content a:hover{text-decoration:underline}
.page-content .highlight{padding:12px 16px;background:rgba(232,168,124,.06);border-radius:var(--radius-sm);border-left:3px solid var(--primary);margin-bottom:16px;font-size:14px;color:var(--text2)}

/* ===== FOOTER ===== */
.foot{border-top:1px solid var(--border);padding:24px 0;margin-top:12px;text-align:center}
.foot p{font-size:12px;color:var(--text3)}
.foot a{color:var(--text2);text-decoration:none}
.foot a:hover{color:var(--primary)}

/* ===== RESPONSIVE ===== */
@media(max-width:860px){
 .sidebar{transform:translateX(-100%)}
 .sidebar.open{transform:translateX(0)}
 .hamburger.show{display:flex}
 .main-wrap{margin-left:0}
 .main-inner{padding:80px 20px 40px}
}