/* Pinterest-inspired HSE discovery feed: calm surfaces, clear navigation, masonry cards. */
:root{--pin:#a94b42;--pin-soft:#f4e8e4}

/* Keep page-specific content inside its own view. The overview is an overview-only view. */
main>.view{display:none!important}
main>.view.active{display:block!important}
main>.overview-only:not(.active){display:none!important}

.app-sidebar{background:rgba(255,254,250,.97);border-radius:18px;box-shadow:0 3px 15px #282b250c}
.sidebar-brand{padding-bottom:13px}
.sidebar-brand b{font-size:16px;letter-spacing:-.02em}
.sidebar-title{font-size:11px;letter-spacing:.1em}
.sidebar-nav button{border-radius:999px;padding:10px 13px}
.sidebar-nav button:hover,.sidebar-nav button.active,.region-nav-button.active,.category-nav-button.active{background:var(--pin-soft);color:#873d35}
.region-nav-button,.category-nav-button{border-radius:999px}
.region-nav-button:after{content:'⌄';font-size:14px}
.region-nav-button.active:after{content:'⌃'}
.sidebar-caption{text-transform:none;letter-spacing:.01em;font-size:12px;color:#616b64}
.app-sidebar .formula-toolbar input{border-radius:999px;padding:11px 14px;border-color:#dedbd2;background:#f4f2ec}
.app-sidebar .formula-toolbar select{display:none!important}
.formula-sidebar-menu{gap:5px}
.category-nav-list{border-color:#e7d7d1}

.hero{border-radius:18px;padding:24px 28px;background:#4d6a5e;box-shadow:none}
.hero h1{font-size:clamp(24px,3vw,34px);max-width:760px}
.hero p{font-size:15px}
.metrics{gap:10px}
.metric{border-radius:16px;box-shadow:none}

/* Pinterest-like masonry feed while retaining legible card actions and content. */
.cards{display:block;columns:3 220px;column-gap:12px}
.cards .card{display:inline-block;vertical-align:top;width:100%;break-inside:avoid;margin:0 0 12px;border-radius:17px;box-shadow:none}
.formula-cards{display:block;columns:3 230px;column-gap:13px}
.formula-pick{display:inline-flex;flex-direction:column;vertical-align:top;width:100%;min-width:0;break-inside:avoid;margin:0 0 13px;border-radius:17px;padding:16px;background:#fffefa;box-shadow:0 2px 10px #30352a0a}
.formula-pick:hover{transform:translateY(-2px);border-color:#d8aaa1;box-shadow:0 8px 18px #30352a12}
.formula-card-preview{max-height:50px;border-radius:10px}
.formula-pick .formula-card-tags .tag{border-radius:999px}
.formula-group h3{font-size:17px}
.formula-dialog{background-color:#f7f5ef;background-image:radial-gradient(circle,#c4bdad .85px,transparent 1.2px);background-size:22px 22px}
.dialog-body{border-radius:18px}
.dialog-head{box-shadow:0 2px 8px #30352a08}

@media(max-width:980px){.formula-cards{columns:2 210px}.cards{columns:2 210px}}
@media(max-width:680px){
  main{gap:10px;padding:8px}
  .app-sidebar{border-radius:16px;padding:13px 11px}
  .sidebar-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .sidebar-nav button{font-size:12px;white-space:nowrap}
  .formula-sidebar-menu{max-height:35vh;overflow:auto}
  .formula-cards{columns:2 150px;column-gap:9px}
  .formula-pick{padding:12px;border-radius:15px;margin-bottom:9px}
  .cards{columns:2 150px;column-gap:9px}
  .cards .card{border-radius:15px;padding:13px}
  .hero{padding:20px;border-radius:16px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:390px){.formula-cards,.cards{columns:1}.sidebar-nav button{font-size:11px;padding:8px 4px}}


/* Bauhaus-informed industrial palette and the two mobile-first discovery paths. */
:root{--pin:#315c67;--pin-soft:#e7efed;--paper:#f6f4ed;--ink:#202b2d;--line:#deddd4;--red:#b9483f;--yellow:#d79b25;--blue:#315c9b}
body{background-color:var(--paper);background-image:radial-gradient(circle,#b9b6aa 0.7px,transparent .95px);background-size:24px 24px;color:var(--ink)}
.app-sidebar{border:1px solid #e3e0d7;box-shadow:0 3px 16px #202b2d0a}
.sidebar-nav button:hover,.sidebar-nav button.active,.region-nav-button.active,.category-nav-button.active,.topic-nav-button.active{background:#e3ece8;color:#244c55}
.region-nav-button:after{content:'+'}.region-nav-button.active:after{content:'−'}
.region-nav-button,.category-nav-button,.topic-nav-button{min-height:44px}
.category-nav-list{border-color:#dce2dc}
.hero{background:#365e56;border-radius:16px}
.hero:before{content:"";display:block;width:38px;height:6px;margin-bottom:14px;background:#d79b25}
.home-dual-entry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 26px}
.entry-choice{position:relative;min-height:140px;text-align:left;padding:18px 48px 18px 18px;background:#fffefa;border:1px solid var(--line);border-radius:15px;box-shadow:0 2px 10px #202b2d08;color:var(--ink)}
.entry-choice:hover,.choice-card:hover{border-color:#7d9e97;transform:translateY(-1px)}
.entry-choice b,.entry-choice small,.entry-kicker{display:block}.entry-choice b{font-size:18px;margin:12px 0 5px}.entry-choice small{font-size:14px;color:#5d6b69}.entry-kicker{font-size:10px;letter-spacing:.12em;color:#54756f}.entry-arrow{position:absolute;right:18px;top:50%;font-size:22px;color:var(--red)}
.browse-mode{display:flex;gap:8px;margin:8px 0 12px}.browse-mode button{min-height:44px;border-radius:999px;background:#fffefa;color:#405353;border-color:#d8ddd5}.browse-mode button.active{background:#315c67;color:white;border-color:#315c67}
.formula-browse-pickers{margin:8px 0 12px}.picker-label{font-size:11px;font-weight:700;letter-spacing:.08em;color:#65736e;margin:9px 0 6px}.picker-chips{display:flex;gap:7px;overflow-x:auto;padding:1px 1px 7px;scrollbar-width:thin}.filter-chip{flex:0 0 auto;min-height:40px;border-radius:999px;background:#fffefa;border:1px solid #d8ddd5;color:#3b5050}.filter-chip.active{background:#dbe9e4;border-color:#78968d;color:#1f4b4a}
.formula-native-filters{display:none!important}
.formula-topic-menu{display:flex;flex-direction:column;gap:4px}.topic-nav-button{display:flex;align-items:center;justify-content:space-between;text-align:left;width:100%;border:0;background:transparent;padding:9px 10px;border-radius:9px;color:var(--ink)}
.browse-prompt{padding:12px 2px;color:#5c6b68}.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.choice-card{min-height:92px;text-align:left;background:#fffefa;border:1px solid var(--line);border-radius:13px;padding:15px;color:var(--ink)}.choice-card b,.choice-card small{display:block}.choice-card small{margin-top:7px;color:#65736e}
.formula-pick{border:1px solid #e1dfd6;box-shadow:0 2px 8px #202b2d08}.formula-pick:hover{transform:translateY(-1px);border-color:#7d9e97;box-shadow:0 5px 13px #202b2d10}
.formula-pick .tag{background:#e6eee9;color:#315c67}.formula-pick .tag:nth-child(2){background:#f7edcf;color:#775a1a}
.formula-pick small{line-height:1.45}.formula-dialog{background-color:var(--paper);background-image:radial-gradient(circle,#c5c1b4 .65px,transparent .9px);background-size:26px 26px}
.calc-confirm{display:flex;align-items:flex-start;gap:10px;margin:14px 0;padding:12px;border:1px solid #d4c38e;border-radius:10px;background:#fbf5df;font-size:14px}.calc-confirm input{width:20px;height:20px;flex:0 0 auto;margin:0}
.notice{border-left:4px solid var(--yellow)}.out strong{color:#315c67}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #315c67;outline-offset:2px}
@media(max-width:680px){.home-dual-entry{grid-template-columns:1fr}.entry-choice{min-height:118px}.formula-browse-pickers{margin-bottom:8px}.choice-grid{grid-template-columns:1fr}.browse-mode{position:sticky;top:0;z-index:3;background:var(--paper);padding:5px 0}.picker-chips{scroll-snap-type:x proximity}.filter-chip{scroll-snap-align:start}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* ---------- 磁贴板（与小程序首页同款：左导航磁贴 + 右自动翻转磁贴） ---------- */
.tile-stage{display:flex;align-items:stretch;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background-color:#f4f1e8;background-image:radial-gradient(circle,#c3bcab 1px,transparent 1.4px);background-size:22px 22px;min-height:560px}
/* 左侧导航磁贴 */
.tile-rail{flex:0 0 68px;display:flex;flex-direction:column;background:rgba(255,254,250,.72);border-right:1px solid rgba(38,49,47,.12);max-height:76vh;overflow-y:auto;scrollbar-width:thin}
.rail-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;min-height:74px;padding:12px 0 9px;border:0;border-bottom:1px solid rgba(38,49,47,.1);background:rgba(255,255,255,.55);cursor:pointer;transition:background .25s ease;font:inherit}
.rail-bar{position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 6px 6px 0;background:transparent;transition:background .25s ease}
.rail-chars{display:flex;flex-direction:column;align-items:center}
.rail-chars .ch{display:block;font-size:12.5px;line-height:1.1;font-weight:700;color:#44514d;letter-spacing:1px}
.rail-num{font-size:10.5px;color:#808a85;font-variant-numeric:tabular-nums}
.rail-tab.on{background:var(--rail)}
.rail-tab.on .rail-bar{background:rgba(255,255,255,.85)}
.rail-tab.on .rail-chars .ch{color:#fff}
.rail-tab.on .rail-num{color:rgba(255,255,255,.82)}
/* 右侧磁贴板 */
.tile-board{flex:1;min-width:0;padding:20px 22px 26px}
.tile-hd-top{display:flex;align-items:baseline;gap:12px}
.tile-hd-top h3{margin:0;font-size:22px;font-weight:800;letter-spacing:.5px;color:#26312f}
.tile-sub{font-size:12.5px;color:#6d7873;margin-top:4px}
.tile-hd input{margin-top:12px;width:min(420px,100%);padding:10px 14px;border-radius:999px;border:1px solid #d8ddd5;background:#fffefa}
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:16px}
/* 磁贴：3D 翻转 */
.tile{position:relative;height:140px;border:0;padding:0;background:transparent;cursor:pointer;text-align:left;font:inherit;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,.1,.2,1);border-radius:8px}
.tile.flip{transform:perspective(900px) rotateY(180deg)}
.tile .face{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:8px;padding:13px 14px 11px;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid rgba(38,49,47,.1);box-shadow:0 4px 12px rgba(38,49,47,.07)}
.tile .front{justify-content:space-between}
.tile .back{transform:rotateY(180deg);justify-content:flex-start;background:#333d3a;border-color:rgba(255,255,255,.12)}
.tile:hover{box-shadow:0 8px 18px rgba(38,49,47,.14)}
/* 护眼低饱和配色（与小程序一致） */
.tone-mint .front{background:#e4eee6}
.tone-lilac .front{background:#e8e5f0}
.tone-sand .front{background:#efe9d9}
.tone-clay .front{background:#ede3db}
.tone-blue .front{background:#e3ebf2}
.tone-grey .front{background:#eaeae4}
.tile .t-cat{font-size:10.5px;color:#5d6a64;letter-spacing:1px}
.tile .t-name{font-size:14px;font-weight:800;line-height:1.34;color:#222d2a;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.tile .t-meta{display:flex;align-items:center;justify-content:space-between}
.tile .t-id{font-family:Consolas,monospace;font-size:10.5px;color:#6d7873}
.tile .t-flag{font-size:10px;color:#7c8580;border:1px solid rgba(38,49,47,.16);border-radius:4px;padding:1px 7px}
.tile .t-flag.ok{color:#2f584d;border-color:rgba(47,88,77,.34);background:rgba(255,255,255,.5)}
.tile .b-label{font-size:9.5px;color:rgba(255,255,255,.45);letter-spacing:2px}
.tile .b-src{font-size:11.5px;color:#f1f3ef;line-height:1.36;margin-top:5px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.tile .b-status{margin-top:5px;font-size:10.5px;color:#bcd2c6}
.tile .b-go{margin-top:auto;font-size:11px;color:#fff;font-weight:700}
@media(max-width:980px){.tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 窄屏计算器面板降为单列，避免横向溢出 */
@media(max-width:680px){.grid.cols{grid-template-columns:1fr}.grid.cols .panel{min-width:0;max-width:100%}}
@media(max-width:680px){.tile-stage{flex-direction:column;min-height:0}.tile-rail{flex:none;flex-direction:row;overflow-x:auto;max-height:none;border-right:0;border-bottom:1px solid rgba(38,49,47,.12)}.rail-tab{min-width:58px;min-height:64px;border-bottom:0;border-right:1px solid rgba(38,49,47,.1)}.rail-bar{left:9px;right:9px;top:auto;bottom:0;width:auto;height:3px;border-radius:6px 6px 0 0}.tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tile-board{padding:14px 12px 20px}}

/* ---------- 主站风格页首/页尾（与 www.drowsyhse.com 一致，2026-11-09） ---------- */
[hidden]{display:none!important}
:root{--ds-green:#176B55;--ds-green2:#105744;--ds-soft:#F1F5F1;--ds-line:#E2E9E4;--ds-muted:#66736E}
.site-head{position:sticky;top:0;z-index:20;background:#ffffffed;border-bottom:1px solid var(--ds-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.site-head .wrap{max-width:1280px;margin:auto;padding:0 32px}
.site-head .nav{height:64px;display:flex;align-items:center;gap:22px}
.site-head .logo{font-size:18px;font-weight:800;letter-spacing:-.4px;white-space:nowrap;color:var(--ink);text-decoration:none}
.site-head .logo .mark{color:var(--ds-green);margin-right:6px}
.site-head .navlinks{display:flex;gap:18px;font-size:14px;color:#3d4944;flex-wrap:wrap}
.site-head .navlinks a{color:#3d4944;text-decoration:none;white-space:nowrap}
.site-head .navlinks a:hover{color:var(--ds-green)}
.site-head .spacer{flex:1}
.site-head .btn{border:1px solid var(--ds-line);border-radius:12px;padding:9px 15px;font-weight:650;font-size:14px;display:inline-flex;align-items:center;gap:8px;background:#fff;cursor:pointer;white-space:nowrap;flex-shrink:0;font-family:inherit}
.site-head .btn.primary{background:var(--ds-green);color:#fff;border-color:var(--ds-green)}
.site-head .btn.primary:hover{background:var(--ds-green2)}
.site-head .uchip{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--ds-green2);background:var(--ds-soft);border:1px solid var(--ds-line);border-radius:12px;padding:8px 13px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-foot{border-top:1px solid var(--ds-line);padding:24px 0 38px;color:var(--ds-muted);font-size:13px;text-align:center;margin-top:22px;display:block}
.site-foot a{color:var(--ds-green);font-weight:650;text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.site-foot #drowsy-legal{display:block;margin-top:8px}
.site-foot #drowsy-legal a{margin:0 7px;color:var(--ds-muted);font-weight:600}
/* 旧 .footer 兼容 */
.footer{font-size:11px;color:#78898a;margin-top:20px}
@media(max-width:680px){.site-head .wrap{padding:0 12px}.site-head .nav{height:auto;min-height:52px;flex-wrap:wrap;padding:8px 0;gap:10px}.site-head .navlinks{gap:12px;font-size:13px}.site-head .btn{padding:7px 11px;font-size:13px}.site-head .uchip{max-width:130px;font-size:12.5px;padding:7px 9px}}

/* ---------- 返回跳转链接 ---------- */
.back-link{display:inline-flex;align-items:center;border:1px solid var(--ds-line);background:#fffefa;color:var(--ds-green2);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:650;cursor:pointer;margin:14px 0 2px;font-family:inherit}
.back-link:hover{background:var(--ds-soft)}

/* ---------- 热门计算器卡片 ---------- */
.hot-card{cursor:pointer}
.hot-card:hover{border-color:#7d9e97;transform:translateY(-2px);box-shadow:0 8px 18px #30352a12}
.hot-card h3{margin:10px 0 6px}
.hot-card p{min-height:34px}

/* ---------- 计算记录面板 ---------- */
.rec-bar{display:flex;gap:10px;margin:14px 0 8px;flex-wrap:wrap}
.rec-bar input{flex:1;min-width:220px;max-width:460px;padding:10px 14px;border-radius:999px;border:1px solid #d8ddd5;background:#fffefa;font-family:inherit}
.rec-bar .danger{border:1px solid #d8b4ae;background:#fbf1ef;color:#8c3a31;border-radius:999px;padding:9px 16px;font-weight:650;cursor:pointer;font-size:13px;font-family:inherit}
.rec-bar .danger:hover{background:#f6e2de}
#calc-record-count{margin:2px 2px 10px;font-size:12.5px}
.rec-row{background:#fffefa;border:1px solid #e1dfd6;border-radius:12px;padding:12px 14px;margin-bottom:10px}
.rec-row.rec-cloud{border-left:4px solid var(--ds-green)}
.rec-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rec-head b{font-size:14.5px;color:#22302c}
.rec-time{font-size:12px;color:#7c8580;font-variant-numeric:tabular-nums}
.rec-io{margin-top:6px;font-size:12.5px;line-height:1.5;word-break:break-all}
.rec-io .rec-in{display:block;color:#5d6b64}
.rec-io .rec-out{display:block;color:#1f4b3a;font-weight:650}
#calc-record-list .muted{padding:10px 2px}
@media(prefers-reduced-motion:reduce){.hot-card,.back-link{transition:none!important}}