:root{
    --navy:#2A1B45;
    --navy-2:#3A2560;
    --hero-bg:#EEE8F7;
    --page-bg:#FFFFFF;
    --olive:#B8622B;
    --link:#6C3FC7;
    --link-hover:#2A1B45;
    --green:#D98C2B;
    --green-dark:#B8721E;
    --gray-text:#5B6670;
    --footer-bg:#F5F1FA;
    --border:#DED3EC;
    --panel-dark:#2A1B45;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    font-family:'Inter',sans-serif;
    color:#243040;
    background:var(--page-bg);
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:'JetBrains Mono',monospace;}
  a{color:var(--link);text-decoration:none;}
  a:hover{color:var(--link-hover);text-decoration:underline;}

  /* ---------------- header ---------------- */
  header{
    background:var(--navy);
    padding:14px 26px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .wordmark{
    font-size:1.4rem;
    font-weight:800;
    color:#fff;
    letter-spacing:.2px;
  }
  .wordmark span{color:var(--green);}
  .signin{
    color:#C7D3DE;
    font-size:.82rem;
    cursor:pointer;
  }
  .signin:hover{color:#fff;}

  /* ---------------- hero ---------------- */
  .hero{
    background:var(--hero-bg);
    padding:34px 26px 40px;
  }
  .hero-inner{
    max-width:1180px;
    margin:0 auto;
    display:flex;
    gap:46px;
    align-items:flex-start;
    flex-wrap:wrap;
  }

  /* scientific calculator widget */
  .sci-calc{
    background:#fff;
    border:1px solid var(--border);
    border-radius:6px;
    padding:12px;
    width:100%;
    max-width:420px;
    flex-shrink:0;
    box-shadow:0 10px 26px -18px rgba(15,44,77,.4);
  }
  .sci-display{
    background:var(--panel-dark);
    color:#fff;
    font-family:'JetBrains Mono',monospace;
    font-size:1.5rem;
    text-align:right;
    padding:14px 14px;
    border-radius:4px;
    margin-bottom:10px;
    letter-spacing:.5px;
    overflow-x:auto;
    white-space:nowrap;
  }
  .sci-grids{display:flex;gap:6px;}
  .sci-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:5px;
    flex:1;
  }
  .sci-btn{
    background:#EEF2F5;
    border:1px solid #D6DEE5;
    border-radius:4px;
    padding:9px 2px;
    font-size:.74rem;
    color:#243040;
    cursor:pointer;
    text-align:center;
    font-family:'Inter',sans-serif;
    transition:.1s;
    user-select:none;
  }
  .sci-btn:hover{background:#E1E9EF;}
  .sci-btn:active{transform:translateY(1px);}
  .sci-btn.op{background:#D8E3EC;font-weight:700;}
  .sci-btn.accent{background:var(--navy);color:#fff;font-weight:700;}
  .sci-btn.accent:hover{background:var(--navy-2);}
  .sci-btn.wide{grid-column:span 1;}
  .deg-rad{
    display:flex;
    flex-direction:column;
    gap:2px;
    font-size:.62rem;
    background:#EEF2F5;
    border:1px solid #D6DEE5;
    border-radius:4px;
    padding:4px 4px;
    justify-content:center;
    align-items:flex-start;
  }
  .deg-rad label{display:flex;align-items:center;gap:3px;cursor:pointer;}
  .deg-rad input{margin:0;}

  /* hero right: heading + search */
  .hero-right{
    flex:1;
    min-width:280px;
    padding-top:6px;
  }
  .hero-right h1{
    font-size:1.7rem;
    color:var(--navy);
    margin:0 0 16px;
  }
  .search-bar{
    display:flex;
    max-width:420px;
    gap:0;
  }
  .search-bar input{
    flex:1;
    padding:10px 14px;
    border:1px solid #AEC0CE;
    border-radius:3px 0 0 3px;
    font-size:.95rem;
    outline:none;
    font-family:'Inter',sans-serif;
  }
  .search-bar input:focus{border-color:var(--navy);}
  .search-bar button{
    background:var(--navy);
    color:#fff;
    border:none;
    padding:0 20px;
    border-radius:0 3px 3px 0;
    font-weight:700;
    cursor:pointer;
    font-family:'Inter',sans-serif;
  }
  .search-bar button:hover{background:var(--navy-2);}
  .hero-note{
    margin-top:16px;
    font-size:.82rem;
    color:var(--gray-text);
    max-width:420px;
    line-height:1.6;
  }

  /* ---------------- catalog columns ---------------- */
  .catalog-section{
    max-width:1180px;
    margin:0 auto;
    padding:44px 26px 30px;
  }
  .catalog-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:34px;
  }
  @media (max-width:900px){
    .catalog-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:560px){
    .catalog-grid{grid-template-columns:1fr;}
  }
  .cat-col{text-align:center;}
  .cat-icon{
    width:64px;height:64px;
    border-radius:50%;
    background:linear-gradient(160deg,#F0E9F9,#DCC9EE);
    border:1px solid #C3D1DB;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 12px;
  }
  .cat-icon svg{width:28px;height:28px;color:var(--navy);}
  .cat-col h2{
    font-size:1.05rem;
    color:var(--olive);
    margin:0 0 12px;
    font-weight:700;
  }
  .cat-links{
    list-style:none;
    padding:0;
    margin:0;
    text-align:left;
  }
  .cat-links li{margin-bottom:7px;}
  .cat-links a{
    font-size:.87rem;
    cursor:pointer;
  }
  .cat-links a:hover{text-decoration:underline;}

  .all-calc-wrap{
    text-align:center;
    margin:40px 0 10px;
  }
  .all-calc-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--green);
    color:#fff;
    border:none;
    padding:13px 30px;
    border-radius:22px;
    font-size:1rem;
    font-weight:700;
    cursor:pointer;
    font-family:'Inter',sans-serif;
    transition:.15s;
  }
  .all-calc-btn:hover{background:var(--green-dark);}
  .all-calc-btn .play{
    width:22px;height:22px;
    border-radius:50%;
    background:rgba(255,255,255,.25);
    display:flex;align-items:center;justify-content:center;
  }
  .all-calc-btn svg{width:11px;height:11px;}

  /* ---------------- footer ---------------- */
  footer{
    background:var(--footer-bg);
    padding:34px 26px 24px;
    margin-top:30px;
  }
  .footer-inner{
    max-width:1180px;
    margin:0 auto;
  }
  .footer-inner p{
    font-size:.82rem;
    color:var(--gray-text);
    line-height:1.7;
    margin:0 0 14px;
  }
  .footer-bottom{
    font-size:.75rem;
    color:#8A96A1;
    border-top:1px solid var(--border);
    padding-top:14px;
    margin-top:10px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
  }
  .footer-bottom a{color:#8A96A1;}
  .footer-bottom a:hover{color:var(--navy);}

  /* ---------------- catalog / detail view (All Calculators) ---------------- */
  .full-view{display:none;background:var(--page-bg);}
  .full-view.show{display:block;}
  .home-view.hide{display:none;}

  .full-shell{max-width:1180px;margin:0 auto;padding:30px 26px 60px;}
  .back-btn{
    display:inline-flex;align-items:center;gap:6px;
    background:none;border:none;color:var(--gray-text);
    font-weight:600;font-size:.9rem;cursor:pointer;margin-bottom:20px;padding:0;
  }
  .back-btn:hover{color:var(--navy);}
  .back-btn svg{width:16px;height:16px;}

  .cat-filter-bar{
    display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;
    margin-bottom:24px;border-bottom:1px solid var(--border);
  }
  .filter-btn{
    white-space:nowrap;padding:8px 16px;border-radius:999px;
    border:1px solid var(--border);background:#fff;color:var(--gray-text);
    font-weight:600;font-size:.85rem;cursor:pointer;
  }
  .filter-btn:hover{border-color:var(--navy);}
  .filter-btn.active{background:var(--navy);border-color:var(--navy);color:#fff;}

  .section-title{display:flex;align-items:center;gap:10px;margin:26px 0 12px;}
  .section-title .num{
    font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--green-dark);
    border:1px solid var(--green-dark);border-radius:4px;padding:2px 7px;
  }
  .section-title h3{margin:0;font-size:1.05rem;color:var(--navy);}

  .card-grid{
    display:grid;grid-template-columns:repeat(auto-fill, minmax(230px,1fr));gap:14px;
  }
  .calc-card{
    background:#fff;border:1px solid var(--border);border-radius:8px;
    padding:16px;cursor:pointer;transition:.15s;
  }
  .calc-card:hover{border-color:var(--navy);box-shadow:0 8px 18px -14px rgba(15,44,77,.4);transform:translateY(-2px);}
  .calc-card .mark{
    width:34px;height:34px;border-radius:6px;background:var(--hero-bg);
    display:flex;align-items:center;justify-content:center;margin-bottom:10px;
  }
  .calc-card .mark svg{width:18px;height:18px;color:var(--navy);}
  .calc-card h4{margin:0 0 4px;font-size:.96rem;color:var(--navy);}
  .calc-card p{margin:0;font-size:.78rem;color:var(--gray-text);line-height:1.5;}

  /* active calculator detail */
  .calc-view{display:none;}
  .calc-view.show{display:block;}
  .calc-panel{
    display:grid;grid-template-columns:1.1fr .9fr;
    border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff;
  }
  @media (max-width:760px){.calc-panel{grid-template-columns:1fr;}}
  .calc-inputs{padding:26px 28px;}
  .calc-inputs h2{margin:0 0 4px;font-size:1.3rem;color:var(--navy);}
  .calc-sub{margin:0 0 8px;font-size:.85rem;color:var(--gray-text);}
  .calc-use{margin:0 0 22px;font-size:.82rem;color:#7A6A93;font-style:italic;line-height:1.5;}
  .field{margin-bottom:15px;}
  .field label{display:block;font-size:.8rem;font-weight:700;color:var(--navy);margin-bottom:6px;}
  .field input[type=text],.field input[type=number],.field input[type=date],.field input[type=time],.field select,.field textarea{
    width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:6px;
    font-family:'JetBrains Mono',monospace;font-size:.92rem;color:#243040;background:#F7F9FA;outline:none;
  }
  .field textarea{font-family:'Inter',sans-serif;resize:vertical;min-height:70px;}
  .field select{font-family:'Inter',sans-serif;}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(15,44,77,.1);}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
  .chip-group{display:flex;gap:8px;flex-wrap:wrap;}
  .chip{padding:7px 13px;border:1px solid var(--border);border-radius:999px;font-size:.8rem;cursor:pointer;background:#F7F9FA;color:var(--gray-text);font-weight:600;}
  .chip.active{background:var(--navy);border-color:var(--navy);color:#fff;}
  .go-btn{margin-top:6px;width:100%;padding:12px;border:none;border-radius:6px;background:var(--green);color:#fff;font-weight:700;font-size:.92rem;cursor:pointer;}
  .go-btn:hover{background:var(--green-dark);}

  .readout-wrap{background:var(--panel-dark);display:flex;flex-direction:column;}
  .readout-body{flex:1;padding:28px 26px;display:flex;flex-direction:column;justify-content:center;gap:16px;}
  .readout-label{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:2px;color:#8FA3B8;text-transform:uppercase;}
  .readout-value{font-family:'JetBrains Mono',monospace;font-size:2.2rem;font-weight:700;color:#fff;line-height:1.15;word-break:break-word;}
  .readout-value .unit{font-size:1rem;color:#8FA3B8;margin-left:6px;}
  .readout-note{font-size:.84rem;color:#B9C6D3;line-height:1.6;}
  .readout-divider{height:1px;background:#274363;margin:2px 0;}
  .readout-placeholder{color:#6E8296;font-size:.9rem;text-align:center;}

  /* ---------------- educational explanation section ---------------- */
  .explain-wrap{margin-top:22px;}
  .explain-card{
    background:#fff;border:1px solid var(--border);border-radius:10px;
    padding:26px 28px;margin-bottom:16px;
  }
  .explain-card h2{font-size:1.1rem;color:var(--navy);margin:0 0 10px;}
  .explain-card h3{font-size:.98rem;color:var(--navy);margin:18px 0 8px;}
  .explain-card p{font-size:.88rem;color:#3A4653;line-height:1.7;margin:0 0 10px;}
  .explain-card ul{margin:0 0 10px;padding-left:20px;}
  .explain-card li{font-size:.86rem;color:#3A4653;line-height:1.7;}
  .explain-formula{
    font-family:'JetBrains Mono',monospace;background:#F2F5F7;border:1px solid var(--border);
    border-radius:6px;padding:10px 14px;font-size:.86rem;color:var(--navy);margin:8px 0 14px;display:inline-block;
  }
  .explain-table{width:100%;border-collapse:collapse;margin:10px 0 16px;font-size:.85rem;}
  .explain-table th,.explain-table td{padding:8px 10px;border:1px solid var(--border);text-align:left;}
  .explain-table th{background:#F2F5F7;color:var(--navy);}
  .explain-table tr.current-row{background:#E7F0E3;font-weight:700;}
  .explain-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:6px;}
  .explain-stat{background:#F7F9FA;border:1px solid var(--border);border-radius:8px;padding:12px 14px;}
  .explain-stat .k{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--gray-text);margin-bottom:4px;}
  .explain-stat .v{font-family:'JetBrains Mono',monospace;font-size:1.05rem;color:var(--navy);font-weight:700;}
  .explain-disclaimer{
    font-size:.78rem;color:var(--gray-text);background:#F7F9FA;border-left:3px solid var(--olive);
    padding:10px 14px;border-radius:4px;line-height:1.6;
  }
  @media (max-width:760px){.explain-card{padding:18px 18px;}}

  ::selection{background:var(--green);color:#fff;}

  /* ---------------- dark mode ---------------- */
  html[data-theme="dark"]{
    --page-bg:#161020;
    --hero-bg:#211934;
    --border:#3A2E52;
    --footer-bg:#1B1428;
    --gray-text:#B3A8C7;
    --panel-dark:#0F0A18;
  }
  html[data-theme="dark"] body{color:#EDE7F6;}
  html[data-theme="dark"] a{color:#B79BF0;}
  html[data-theme="dark"] a:hover{color:#D8C6FA;}
  html[data-theme="dark"] .sci-calc,
  html[data-theme="dark"] .calc-card,
  html[data-theme="dark"] .related-box,
  html[data-theme="dark"] .explain-card,
  html[data-theme="dark"] .calc-panel{
    background:#221A36;border-color:var(--border);
  }
  html[data-theme="dark"] .sci-btn{background:#2C2344;border-color:#3A2E52;color:#EDE7F6;}
  html[data-theme="dark"] .sci-btn:hover{background:#382C55;}
  html[data-theme="dark"] .sci-btn.op{background:#3A2E52;}
  html[data-theme="dark"] .deg-rad{background:#2C2344;border-color:#3A2E52;color:#EDE7F6;}
  html[data-theme="dark"] .search-bar input{background:#221A36;border-color:#3A2E52;color:#EDE7F6;}
  html[data-theme="dark"] .field input,
  html[data-theme="dark"] .field select,
  html[data-theme="dark"] .field textarea{
    background:#2C2344;border-color:#3A2E52;color:#EDE7F6;
  }
  html[data-theme="dark"] .chip{background:#2C2344;border-color:#3A2E52;color:#B3A8C7;}
  html[data-theme="dark"] .chip.active{background:var(--link);border-color:var(--link);color:#fff;}
  html[data-theme="dark"] .filter-btn{background:#221A36;border-color:#3A2E52;color:#B3A8C7;}
  html[data-theme="dark"] .filter-btn.active{background:var(--link);border-color:var(--link);}
  html[data-theme="dark"] .cat-icon{background:linear-gradient(160deg,#2C2344,#3A2E52);border-color:#3A2E52;}
  html[data-theme="dark"] .cat-icon svg{color:#D8C6FA;}
  html[data-theme="dark"] .calc-card .mark{background:#2C2344;}
  html[data-theme="dark"] .calc-card .mark svg{color:#D8C6FA;}
  html[data-theme="dark"] .explain-table th{background:#2C2344;color:#D8C6FA;}
  html[data-theme="dark"] .explain-table td,
  html[data-theme="dark"] .explain-table th{border-color:#3A2E52;}
  html[data-theme="dark"] .explain-table tr.current-row{background:#2E4029;}
  html[data-theme="dark"] .explain-formula{background:#2C2344;border-color:#3A2E52;color:#D8C6FA;}
  html[data-theme="dark"] .explain-stat{background:#2C2344;border-color:#3A2E52;}
  html[data-theme="dark"] .explain-stat .v{color:#D8C6FA;}
  html[data-theme="dark"] .explain-disclaimer{background:#2C2344;}
  html[data-theme="dark"] .back-btn{color:#B3A8C7;}
  html[data-theme="dark"] .back-btn:hover{color:#D8C6FA;}
  html[data-theme="dark"] .cat-links a{color:#B79BF0;}

  .theme-toggle{
    background:none;border:1px solid rgba(255,255,255,.25);border-radius:6px;
    width:34px;height:34px;display:flex;align-items:center;justify-content:center;
    cursor:pointer;color:#fff;margin-inline-end:14px;flex-shrink:0;transition:.15s;
  }
  .theme-toggle:hover{background:rgba(255,255,255,.1);}
  .theme-toggle svg{width:17px;height:17px;}