:root{
    --teal-900:#0f3d3e;
    --teal-700:#136b64;
    --teal-500:#2fae9e;
    --teal-300:#7fd6c4;
    --teal-100:#e3f4ef;
    --bg-mist:#eef4f2;
    --ink:#12241f;
    --ink-soft:#5b6b66;
    --line:#e1e9e6;
    --radius-lg:20px;
    --radius-md:14px;
    --shadow-soft:0 14px 34px -14px rgba(15,61,62,0.22);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg-mist); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased;}
  img,svg{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; cursor:pointer;}

  /* header (shared) */
  header{background:rgba(238,244,242,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:60;}
  .header-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1240px; margin:0 auto;}
  .logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; letter-spacing:-0.01em;}
  .logo svg{flex-shrink:0;}
  .logo-text{display:flex; flex-direction:column; line-height:1.15;}
  .logo-text .logo-main{font-size:.85em; color:var(--teal-700);}
  .logo-text small{font-size:.62rem; font-weight:600; color:var(--ink); letter-spacing:.03em;}
  .header-icons{display:flex; align-items:center; gap:10px;}
  .icon-btn{width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); background:#fff; transition:.2s;}
  .icon-btn:hover{background:var(--teal-100); border-color:var(--teal-300);}
  .icon-btn[aria-expanded="true"]{background:var(--teal-500); border-color:var(--teal-500); color:#fff;}
  .mobile-menu{display:none; max-width:1240px; margin:0 auto; padding:0 32px 18px; flex-direction:column; gap:2px;}
  .mobile-menu.open{display:flex;}
  .mobile-menu a{padding:12px 6px; border-bottom:1px solid var(--line); font-size:.92rem; font-weight:600;}

  /* breadcrumb / back link */
  .back-link{
    max-width:760px; margin:28px auto 0; padding:0 32px;
    display:flex;
  }
  .back-link a{
    display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:600;
    color:var(--teal-700); padding:8px 4px;
  }
  .back-link a:hover{color:var(--teal-900);}

  /* article */
  .article{max-width:760px; margin:0 auto; padding:24px 32px 90px;}
  .article-hero{margin-bottom:44px; padding-bottom:28px; border-bottom:1px solid var(--line);}
  .article-hero .eyebrow{font-size:.78rem; font-weight:700; letter-spacing:.06em; color:var(--teal-500); text-transform:uppercase; margin-bottom:10px;}
  .article-hero h1{font-size:2.1rem; font-weight:800; color:var(--teal-900); letter-spacing:-0.01em; margin-bottom:12px; line-height:1.3;}
  .article-hero .meta{font-size:.85rem; color:var(--ink-soft);}
  .article-body h2{font-size:1.18rem; font-weight:800; color:var(--teal-900); margin:38px 0 12px;}
  .article-body h2:first-child{margin-top:0;}
  .article-body h3{font-size:1rem; font-weight:700; color:var(--teal-700); margin:20px 0 8px;}
  .article-body p{font-size:.98rem; color:var(--ink); line-height:1.9; margin-bottom:14px;}
  .article-body p.lead{font-size:1.02rem; color:var(--ink-soft); line-height:1.9;}
  .article-body ul{margin:0 0 16px 0; padding-left:0; list-style:none;}
  .article-body li{font-size:.96rem; color:var(--ink); line-height:1.85; padding-left:20px; position:relative; margin-bottom:7px;}
  .article-body li::before{content:""; position:absolute; left:2px; top:11px; width:5px; height:5px; border-radius:50%; background:var(--teal-500);}
  .article-body strong{color:var(--teal-900);}
  .article-contact{margin-top:44px; padding:26px 30px; background:var(--teal-100); border-radius:var(--radius-md);}
  .article-contact p{margin-bottom:6px; font-size:.92rem; color:var(--ink);}
  .article-contact p:last-child{margin-bottom:0;}
  .article-contact a{color:var(--teal-700); font-weight:600;}

  /* brand story specifics */
  .value-grid{display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center; gap:12px; margin:18px 0 28px;}
  .value-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:16px 14px; flex:1 1 108px; max-width:128px;}
  .value-card.center{flex:1 1 155px; max-width:180px; padding:22px 18px; background:linear-gradient(160deg, var(--teal-100), #fff); border-color:var(--teal-300); box-shadow:var(--shadow-soft);}
  .value-card h4{font-size:.82rem; font-weight:800; color:var(--teal-900); margin-bottom:5px; line-height:1.3;}
  .value-card.center h4{font-size:.92rem;}
  .value-card p{font-size:.74rem; color:var(--ink-soft); line-height:1.55; margin-bottom:0;}
  .manifesto{
    background:linear-gradient(160deg, var(--teal-100), #fff);
    border-radius:var(--radius-lg); padding:36px 34px; margin:32px 0;
  }
  .manifesto p{font-size:1rem; color:var(--teal-900); line-height:2; margin-bottom:0;}
  .brand-tagline{text-align:center; margin:8px 0 0;}
  .brand-tagline .cn{font-size:1.3rem; font-weight:800; color:var(--teal-900);}
  .brand-tagline .zh-sub{font-size:.95rem; color:var(--ink-soft); margin-top:4px;}
  .brand-tagline .en{font-size:.82rem; color:var(--ink-soft); opacity:.8; margin-top:2px;}

  /* footer (shared) */
  footer{max-width:1240px; margin:60px auto 0; padding:64px 32px 32px;}
  .footer-top{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:24px; padding-bottom:36px;}
  .footer-brand .logo{margin-bottom:10px;}
  .footer-brand p{font-size:.82rem; color:var(--ink-soft);}
  .footer-brand p.en{font-size:.74rem; margin-top:2px; opacity:.75;}
  .footer-col h6{font-size:.82rem; font-weight:800; margin-bottom:14px;}
  .footer-col a{display:block; font-size:.82rem; color:var(--ink-soft); margin-bottom:10px; transition:.2s;}
  .footer-col a:hover{color:var(--teal-700);}
  .footer-bottom{border-top:1px solid var(--line); padding-top:24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
  .footer-bottom p{font-size:.78rem; color:var(--ink-soft);}
  .socials{display:flex; gap:10px;}
  .socials a{width:36px; height:36px; border-radius:50%; background:var(--teal-100); display:flex; align-items:center; justify-content:center; transition:.2s;}
  .socials a:hover{background:var(--teal-500); color:#fff;}

  :focus-visible{outline:2px solid var(--teal-500); outline-offset:2px;}

  @media (max-width:640px){
    .header-inner{padding:14px 18px;}
    .back-link{padding:0 18px;}
    .article{padding:20px 18px 70px;}
    .article-hero h1{font-size:1.6rem;}
    .value-grid{flex-direction:column; align-items:stretch;}
    .value-card, .value-card.center{max-width:none;}
    .manifesto{padding:26px 22px;}
    footer{padding:48px 18px 28px;}
    .footer-top{grid-template-columns:1fr 1fr; gap:28px 16px;}
    .footer-bottom{flex-direction:column; align-items:flex-start;}
  }

  /* calculator-specific */
  .tool-hero{margin-bottom:36px; padding-bottom:26px; border-bottom:1px solid var(--line);}
  .tool-hero .eyebrow{font-size:.78rem; font-weight:700; letter-spacing:.06em; color:var(--teal-500); text-transform:uppercase; margin-bottom:10px;}
  .tool-hero h1{font-size:1.9rem; font-weight:800; color:var(--teal-900); letter-spacing:-0.01em; margin-bottom:10px; line-height:1.3;}
  .tool-hero p{font-size:.95rem; color:var(--ink-soft); line-height:1.75; max-width:600px;}

  .calc-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 30px 26px; box-shadow:var(--shadow-soft);}
  .calc-card + .calc-card{margin-top:0;}

  /* category section headings (articles.html / gear.html grouped lists) */
  .section-heading{
    display:flex; align-items:center; gap:8px;
    font-size:1.05rem; font-weight:800; color:var(--teal-900);
    margin:40px 0 14px; scroll-margin-top:90px;
  }
  .section-heading:first-of-type{margin-top:0;}
  .section-heading .count{font-size:.78rem; font-weight:600; color:var(--ink-soft);}
  .empty-note{padding:20px; text-align:center; font-size:.85rem; color:var(--ink-soft); background:var(--bg-mist); border-radius:var(--radius-md); border:1px dashed var(--line);}

  /* category filter tabs */
  .filter-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px;}
  .filter-tabs button{
    padding:9px 18px; border-radius:100px; border:1px solid var(--line); background:#fff;
    font-size:.86rem; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:.2s;
  }
  .filter-tabs button:hover{border-color:var(--teal-300); color:var(--teal-900);}
  .filter-tabs button.active{background:var(--teal-500); border-color:var(--teal-500); color:#fff;}
  .cat-group[hidden]{display:none;}

  /* list items inside calc-card (articles.html, gear.html, etc.) */
  .list-item{
    display:flex; gap:14px; align-items:flex-start;
    padding:16px 18px; margin-bottom:12px;
    border:1px solid var(--line); border-radius:var(--radius-md);
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .list-item:last-child{margin-bottom:0;}
  .list-item:hover{border-color:var(--teal-300); box-shadow:var(--shadow-soft); transform:translateY(-2px);}
  .thumb{width:56px; height:56px; border-radius:12px; flex-shrink:0; overflow:hidden; background:var(--teal-100); display:flex; align-items:center; justify-content:center;}
  .thumb img{width:100%; height:100%; object-fit:cover;}
  .list-item h5{font-size:.95rem; font-weight:700; line-height:1.4; margin-bottom:6px; color:var(--teal-900);}
  .tag-row{display:flex; align-items:center; gap:8px; font-size:.72rem; color:var(--ink-soft);}
  .tag{background:var(--teal-100); color:var(--teal-700); font-weight:700; padding:2px 8px; border-radius:5px; letter-spacing:.03em; font-size:.68rem;}
  .arrow{margin-left:auto; color:var(--ink-soft); flex-shrink:0; align-self:center; transition:transform .2s ease, color .2s ease;}
  .list-item:hover .arrow{color:var(--teal-700); transform:translateX(3px);}
  .tool-ico{width:38px; height:38px; border-radius:9px; background:var(--teal-100); flex-shrink:0; display:flex; align-items:center; justify-content:center;}
  .stars{font-size:.78rem; color:#f5a623; display:flex; align-items:center; gap:5px; margin-top:2px;}
  .stars span.num{color:var(--ink-soft);}
  .view-review{font-size:.76rem; font-weight:600; color:var(--teal-700); display:inline-block; margin-top:4px;}
  .calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px 16px;}
  .field{display:flex; flex-direction:column; gap:6px;}
  .field.full{grid-column:1 / -1;}
  .field label{font-size:.82rem; font-weight:700; color:var(--teal-900);}
  .field .hint{font-size:.74rem; color:var(--ink-soft); font-weight:400; margin-top:-2px;}
  .field input, .field select{
    border:1px solid var(--line); border-radius:10px; padding:11px 14px;
    font-size:.92rem; font-family:inherit; color:var(--ink); background:#fbfdfc;
    outline:none; transition:.2s;
  }
  .field input:focus, .field select:focus{border-color:var(--teal-500); background:#fff;}
  .radio-group{display:flex; gap:8px; flex-wrap:wrap;}
  .radio-group label{
    display:flex; align-items:center; gap:6px; font-size:.86rem; font-weight:600; color:var(--ink);
    border:1px solid var(--line); border-radius:100px; padding:8px 16px; cursor:pointer; transition:.2s;
  }
  .radio-group input{accent-color:var(--teal-500); margin:0;}
  .radio-group label:has(input:checked){background:var(--teal-100); border-color:var(--teal-500); color:var(--teal-900);}

  .calc-btn{
    margin-top:24px; width:100%; padding:14px; border:none; border-radius:100px;
    background:var(--teal-500); color:#fff; font-size:.98rem; font-weight:700;
    cursor:pointer; transition:.2s;
  }
  .calc-btn:hover{background:var(--teal-700);}

  .result-card{
    margin-top:22px; padding:26px 28px; border-radius:var(--radius-md);
    background:linear-gradient(160deg, var(--teal-100), #fff);
    border:1px solid var(--teal-300);
    display:none;
  }
  .result-card.show{display:block;}
  .result-card .result-headline{font-size:.85rem; font-weight:700; color:var(--teal-700); margin-bottom:4px;}
  .result-card .result-number{font-size:2.2rem; font-weight:800; color:var(--teal-900); line-height:1.2;}
  .result-card .result-unit{font-size:1rem; font-weight:600; color:var(--ink-soft); margin-left:6px;}
  .result-card .result-sub{font-size:.85rem; color:var(--ink-soft); margin-top:8px;}
  .result-rows{margin-top:16px; display:grid; gap:10px;}
  .result-row{display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:#fff; border-radius:10px; border:1px solid var(--line);}
  .result-row .rlabel{font-size:.86rem; color:var(--ink); font-weight:600;}
  .result-row .rvalue{font-size:.95rem; color:var(--teal-900); font-weight:800;}
  .result-row.active{border-color:var(--teal-500); background:var(--teal-100);}
  .bar-row{margin-top:10px;}
  .bar-track{height:10px; background:var(--teal-100); border-radius:6px; overflow:hidden; display:flex;}
  .bar-seg{height:100%;}

  .note-block{margin-top:22px; font-size:.82rem; color:var(--ink-soft); line-height:1.8; background:var(--bg-mist); border-radius:10px; padding:16px 18px;}
  .note-block strong{color:var(--teal-900);}

  .tools-hub-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:8px;}
  .tool-hub-card{
    display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line);
    border-radius:var(--radius-md); padding:22px; transition:.2s;
  }
  .tool-hub-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-soft); border-color:var(--teal-300);}
  .tool-hub-card .ico{
    width:42px; height:42px; border-radius:10px; background:var(--teal-100); flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .tool-hub-card h3{font-size:1.02rem; font-weight:800; color:var(--teal-900); margin-bottom:6px;}
  .tool-hub-card p{font-size:.85rem; color:var(--ink-soft); line-height:1.6;}

  @media (max-width:640px){
    .calc-grid{grid-template-columns:1fr;}
    .calc-card{padding:22px 20px 20px;}
    .tools-hub-grid{grid-template-columns:1fr;}
    .result-card{padding:20px 20px;}
  }