*{box-sizing:border-box;margin:0;padding:0;}
html,body{font-family:'Inter',system-ui,sans-serif;background:#eef0f3;color:#1c2133;min-height:100vh;}

.ad-top{width:100%;background:#e8eaee;border-bottom:0.5px solid #c8ccd4;display:flex;align-items:center;justify-content:center;padding:10px 16px;min-height:90px;}
.ad-top ins,.ad-bottom ins{display:block;width:100%;max-width:728px;margin:0 auto;}

.site-header{background:linear-gradient(180deg,#e2e5ea 0%,#d8dce4 100%);border-bottom:0.5px solid #c0c4cc;padding:0 28px;display:flex;align-items:center;justify-content:space-between;height:56px;}
.site-brand{}
.site-brand-name{font-size:17px;font-weight:700;color:#1c2133;letter-spacing:-.4px;text-decoration:none;display:block;}
.site-brand-tag{font-size:10px;color:#5a6070;margin-top:1px;}
.site-header-right{display:flex;align-items:center;gap:14px;}
.free-badge{background:#1c2133;color:#fff;font-size:10px;font-weight:700;padding:4px 11px;border-radius:4px;letter-spacing:.5px;white-space:nowrap;}
.site-nav{display:flex;gap:2px;}
.site-nav a{font-size:12px;color:#4a5060;padding:6px 11px;border-radius:5px;text-decoration:none;font-weight:500;}
.site-nav a:hover{background:rgba(0,0,0,.06);color:#1c2133;}

.page-layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 200px);}

.sidebar{background:#fff;border-right:0.5px solid #dde0e8;padding:16px 10px;position:sticky;top:0;height:100vh;overflow-y:auto;}
.sidebar-label{font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#aaa;padding:6px 10px 8px;display:block;}
.sidebar a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;margin-bottom:2px;}
.sidebar a:hover{background:#f4f5f7;}
.sidebar a.active{background:#1c2133;}
.sidebar a .sl-name{font-size:12px;font-weight:500;color:#1c2133;display:block;}
.sidebar a.active .sl-name{color:#fff;}
.sidebar a .sl-sub{font-size:10px;color:#999;margin-top:1px;display:block;}
.sidebar a.active .sl-sub{color:rgba(255,255,255,.45);}

.main-area{background:#eef0f3;padding:24px;}
.main-title{font-size:18px;font-weight:700;color:#1c2133;margin-bottom:3px;}
.main-sub{font-size:12px;color:#777;margin-bottom:18px;}

.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

.calc-card{background:linear-gradient(150deg,#dde1e8 0%,#e4e7ec 50%,#d6dae2 100%);border-radius:12px;border:0.5px solid #c4c8d2;padding:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(0,0,0,.04);}
.calc-card h3{font-size:12px;font-weight:700;color:#3a3f52;margin-bottom:14px;padding-bottom:10px;border-bottom:0.5px solid rgba(0,0,0,.09);letter-spacing:.1px;text-transform:uppercase;}
.info-card-title{font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#777;margin-bottom:8px;}
.f-group{margin-bottom:10px;}
.f-label{font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:none;color:#5a6070;margin-bottom:4px;display:block;}
.f-input{width:100%;height:36px;background:rgba(255,255,255,.82);border:0.5px solid rgba(0,0,0,.12);border-radius:6px;padding:0 12px;font-family:'Inter',system-ui,sans-serif;font-size:13px;color:#1c2133;outline:none;transition:border-color .15s,background .15s;}
.f-input:focus{border-color:rgba(28,33,51,.35);background:#fff;}
.f-input::placeholder{color:#bbb;font-size:12px;}
.f-select{width:100%;height:36px;background:rgba(255,255,255,.82);border:0.5px solid rgba(0,0,0,.12);border-radius:6px;padding:0 28px 0 12px;font-family:'Inter',system-ui,sans-serif;font-size:13px;color:#1c2133;outline:none;appearance:none;cursor:pointer;transition:border-color .15s,background .15s;}
.f-select:focus{border-color:rgba(28,33,51,.35);background:#fff;}
.f-select-wrap{position:relative;}
.f-select-wrap::after{content:'▾';position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11px;color:#888;pointer-events:none;}
.prov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;background:rgba(255,255,255,.7);border:0.5px solid rgba(0,0,0,.1);border-radius:6px;padding:8px;}
.prov-btn{font-size:10px;padding:5px 4px;border-radius:4px;cursor:pointer;color:#444;border:0.5px solid transparent;background:#f4f5f7;text-align:center;transition:all .15s;}
.prov-btn:hover{background:#e8eaee;}
.prov-btn.active{background:#1c2133;color:#fff;border-color:#1c2133;}

.calc-btn{width:100%;height:36px;background:#1c2133;color:#fff;border:none;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;margin-top:6px;letter-spacing:.2px;transition:opacity .15s;}
.calc-btn:hover{opacity:.88;}

.result-panel{background:rgba(255,255,255,.55);border-radius:8px;padding:14px;border:0.5px solid rgba(0,0,0,.08);margin-top:12px;}
.result-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;border-bottom:0.5px solid rgba(0,0,0,.05);font-size:12px;}
.result-row:last-child{border-bottom:none;font-weight:700;font-size:13px;color:#1c2133;padding-top:8px;}
.result-label{color:#5a6070;}
.result-val{font-weight:600;color:#1c2133;}
.result-val.highlight{color:#c8102e;}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;}
.stat-box{background:rgba(255,255,255,.6);border-radius:7px;padding:10px 12px;border:0.5px solid rgba(0,0,0,.07);}
.stat-label{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:3px;}
.stat-val{font-size:16px;font-weight:700;color:#1c2133;}
.stat-val.red{color:#c8102e;}

.info-card{background:rgba(255,255,255,.55);border-radius:8px;padding:14px;border:0.5px solid rgba(0,0,0,.08);margin-bottom:10px;}
.info-card-title{font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#888;margin-bottom:8px;}

.share-row{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap;}
.share-pill{font-size:11px;font-weight:600;padding:7px 12px;border-radius:5px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:5px;border:none;transition:opacity .15s;color:#fff;}
.share-pill:hover{opacity:.85;}
.share-pill svg{width:13px;height:13px;flex-shrink:0;}
.sp-facebook{background:#1877f2;}
.sp-whatsapp{background:#25d366;}
.sp-x{background:#000000;}
.sp-reddit{background:#ff4500;}
.sp-linkedin{background:#0a66c2;}
.sp-email{background:#6b7280;}
.sp-copy{background:#546e7a;}
.disc{font-size:10px;color:#888;line-height:1.65;margin-top:10px;padding:8px 10px;background:rgba(255,255,255,.4);border-radius:6px;border-left:2px solid rgba(28,33,51,.15);}
.disc a{color:#4a6fa5;text-decoration:none;}
.ad-bottom{width:100%;background:rgba(255,255,255,.4);border:0.5px dashed #c0c4cc;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:10px;min-height:80px;margin-top:16px;}
.site-footer{border-top:0.5px solid #c8ccd4;background:#d8dce4;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:11px;color:#5a6070;}
.site-footer a{color:#4a6fa5;text-decoration:none;}

/* Calculator-specific: key grid */
.calc-display{width:100%;background:rgba(255,255,255,.9);border:0.5px solid rgba(0,0,0,.12);border-radius:7px;padding:12px 14px;margin-bottom:10px;}
.calc-expr{font-size:11px;color:#aaa;min-height:16px;text-align:right;margin-bottom:2px;}
.calc-num{font-size:28px;font-weight:700;color:#1c2133;text-align:right;word-break:break-all;}
.key-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.key{height:36px;border-radius:6px;border:0.5px solid rgba(0,0,0,.1);background:rgba(255,255,255,.72);font-size:14px;font-weight:600;color:#1c2133;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .1s,transform .08s;user-select:none;}
.key:hover{background:rgba(255,255,255,.9);}
.key:active{transform:scale(.94);}
.key.op{background:rgba(28,33,51,.08);color:#1c2133;}
.key.eq{background:#1c2133;color:#fff;grid-column:span 2;}
.key.eq:hover{opacity:.88;}
.key.cl{background:rgba(200,16,46,.08);color:#c8102e;}
.key.wide{grid-column:span 2;}

@media(max-width:860px){
  .page-layout{grid-template-columns:1fr;}
  .sidebar{position:static;height:auto;}
  .calc-grid{grid-template-columns:1fr;}
  .site-header{padding:0 16px;height:auto;padding-top:10px;padding-bottom:10px;flex-direction:column;align-items:flex-start;gap:6px;}
  .site-header-right{width:100%;}
  .prov-grid{grid-template-columns:repeat(4,1fr);}
}