/* ============================================================
   HASHBIT — Interactive Demo + device frames + app UI + work detail
   ============================================================ */

/* ===== WORK DETAIL overlay ===== */
.wd-overlay { position: fixed; inset: 0; z-index: 200; background: var(--bg); animation: wdIn .5s var(--ease); }
@keyframes wdIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.wd-scroll { height: 100%; overflow-y: auto; }
.wd-bar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 16px var(--gut); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.wd-back { font-size: 14px; font-weight: 700; display: inline-flex; gap: 8px; }
.wd-back:hover { color: var(--accent); }
.wd-bar .mono { font-size: 11px; color: var(--ink-3); letter-spacing: .1em; }
.wd-hero { padding-top: 60px; padding-bottom: 40px; }
.wd-title { font-size: clamp(40px, 6vw, 84px); font-weight: 700; line-height: 1; margin: 18px 0 6px; }
.wd-en { font-size: 13px; color: var(--ink-3); letter-spacing: .14em; }
.wd-catch { font-size: clamp(18px, 2.2vw, 26px); font-weight: 700; color: var(--accent); margin: 24px 0 30px; }
.wd-quickfacts { display: flex; gap: 40px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 24px; }
.wd-quickfacts > div { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.wd-quickfacts .mono { font-size: 10px; color: var(--ink-3); letter-spacing: .12em; }
.wd-demo-area { padding: 20px 0 40px; }
.wd-static-frame { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; background: var(--paper); border: 1px solid var(--line); padding: 40px; }
.wd-gallery { display: flex; flex-direction: column; gap: 12px; }
.wd-thumb { width: 120px; aspect-ratio: 4/3; border: 1px solid var(--line); }
.wd-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: 60px; padding: 40px 0 60px; }
.wd-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.wd-block { margin-bottom: 36px; }
.wd-block-label { font-size: 10px; color: var(--ink-3); letter-spacing: .14em; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.wd-block-body p { color: var(--ink-2); font-size: 15.5px; line-height: 1.85; }
.wd-features { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.wd-features li { display: flex; gap: 12px; font-size: 15px; align-items: baseline; }
.wd-features .mono { color: var(--accent); font-size: 13px; }
.wd-cta { padding: 0 0 80px; }
.wd-cta-box { background: var(--ink-dark); color: var(--on-dark); padding: 50px; display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.wd-cta-box .eyebrow { color: #6f6d68; } .wd-cta-box .eyebrow::before { background: #3a3834; }
.wd-cta-box h3 { font-size: clamp(22px, 3vw, 36px); margin-top: 12px; }

/* ===== DEMO shell ===== */
.demo { width: 100%; }
.demo.full { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 30px; }
.demo-fs-bg { position: fixed; inset: 0; background: rgba(10,9,8,.7); backdrop-filter: blur(6px); }
.demo-shell { position: relative; border: 1px solid var(--line); background: var(--paper); width: 100%; }
.demo.full .demo-shell { max-width: 520px; width: 100%; box-shadow: 0 40px 120px rgba(0,0,0,.4); }
.demo-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); gap: 14px; flex-wrap: wrap; }
.demo-tb-l { display: flex; align-items: center; gap: 16px; }
.demo-live { font-size: 10px; letter-spacing: .12em; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; }
.demo-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse2 1.6s infinite; }
.demo-screen-name { font-size: 14px; font-weight: 700; }
.demo-tb-r { display: flex; align-items: center; gap: 8px; }
.demo-ic { width: 34px; height: 34px; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 15px; color: var(--ink-2); transition: all .25s; }
.demo-ic:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.demo-ic.on { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.demo-ic:disabled { opacity: .3; cursor: default; }
.demo-seg { display: flex; border: 1px solid var(--line-2); }
.demo-seg button { font-size: 11px; font-weight: 700; padding: 0 12px; height: 34px; color: var(--ink-3); }
.demo-seg button.on { background: var(--ink); color: var(--on-dark); }
.demo-stage { padding: 40px; display: grid; place-items: center; min-height: 600px; background-color: var(--bg-2); }
.demo-hintbar { display: flex; justify-content: space-between; padding: 11px 16px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }

/* ===== device frames ===== */
.dframe { background: #fff; }
.demo-device.phone, .dframe.phone { width: 300px; border: 9px solid #181715; border-radius: 38px; overflow: hidden; position: relative; box-shadow: 0 24px 60px rgba(0,0,0,.22); background: #fff; }
.demo-device.phone .demo-screen-clip, .dframe.phone .phone-screen { aspect-ratio: 300/620; }
.phone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 110px; height: 22px; background: #181715; border-radius: 0 0 14px 14px; z-index: 5; }
.phone-screen { width: 100%; height: 100%; overflow: hidden; background: var(--bg); }

.demo-device.desktop { width: 100%; max-width: 460px; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.16); }
.demo-browserbar, .desk-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.demo-browserbar i, .desk-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.demo-browserbar .mono, .desk-bar .mono { margin-left: 12px; font-size: 10px; color: var(--ink-3); }
.demo-device.desktop .demo-screen-clip { aspect-ratio: 16/10.5; }

.demo-image-device { position: relative; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.18); }
.demo-image-device.phone { width: 300px; border: 9px solid #181715; border-radius: 38px; }
.demo-image-device.desktop { width: 100%; max-width: 760px; border: 1px solid var(--line-2); border-radius: 8px; }
.demo-image-device.tablet { width: min(100%, 560px); border: 12px solid #181715; border-radius: 22px; }
.demo-image-screen { position: relative; overflow: hidden; background: var(--bg); }
/* Width stays fixed by the device frame; height is NOT forced to a hardcoded ratio —
   it follows the uploaded screenshot's own natural proportions (width:100%, height:auto)
   so the full image always shows edge-to-edge with no crop and no letterbox bars. The
   fallback ratio below only applies before a screenshot has been uploaded, so the
   placeholder still has a sensible device-shaped size to sit in. */
.demo-image-device.phone .demo-image-screen:not(.has-image) { aspect-ratio: 300/620; }
.demo-image-device.desktop .demo-image-screen:not(.has-image) { aspect-ratio: 16/10; }
.demo-image-device.tablet .demo-image-screen:not(.has-image) { aspect-ratio: 4/3; }
.demo-image-screen img { width: 100%; height: auto; display: block; }

.demo-screen-clip { position: relative; overflow: hidden; }
.demo-screen { position: relative; width: 100%; height: 100%; }
.demo-hotspots { position: absolute; inset: 0; z-index: 4; }
.hotspot { position: absolute; border: 1px solid transparent; background: transparent; transition: background .25s, border-color .25s; min-width: 44px; min-height: 28px; }
.hotspot:hover { background: rgba(122,232,0,.16); border-color: rgba(122,232,0,.5); }
.hotspot.show { background: rgba(122,232,0,.18); border: 1px dashed var(--accent); }
.hotspot.hint { animation: hsHint 1.4s var(--ease) 2; }
@keyframes hsHint { 0%,100%{background:rgba(122,232,0,0);} 50%{background:rgba(122,232,0,.2);} }
.hotspot-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ink-dark); color: #fff; font-size: 9px; padding: 4px 8px; white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; letter-spacing: .04em; }
.hotspot:hover .hotspot-tip { opacity: 1; }

/* transitions */
.anim-fade { animation: aFade .4s var(--ease); }
.anim-slide-left { animation: aSlideL .42s var(--ease); }
.anim-slide-right { animation: aSlideR .42s var(--ease); }
.anim-scale { animation: aScale .42s var(--ease); }
@keyframes aFade { from{opacity:0;} } 
@keyframes aSlideL { from{opacity:.4; transform:translateX(28%);} }
@keyframes aSlideR { from{opacity:.4; transform:translateX(-28%);} }
@keyframes aScale { from{opacity:0; transform:scale(.92);} }
@media (prefers-reduced-motion: reduce){ .anim-fade,.anim-slide-left,.anim-slide-right,.anim-scale{animation:none;} .hotspot.hint{animation:none;} }

/* hardware frame */
.dframe.hw { width: 280px; }
.hw-body { background: #1a1916; border-radius: 16px; padding: 16px; position: relative; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.hw-lens { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #3a3a3a, #0c0c0c 70%); border: 3px solid #2c2b28; margin: 0 auto 14px; position: relative; }
.hw-lens::after { content:""; position:absolute; inset:14px; border-radius:50%; background: radial-gradient(circle at 40% 35%, #7ae80044, #000); }
.hw-grille { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-bottom: 14px; }
.hw-grille i { aspect-ratio: 1; border-radius: 50%; background: #2c2b28; }
.hw-screen { aspect-ratio: 5/3; border-radius: 6px; overflow: hidden; background: var(--bg); border: 1px solid #2c2b28; }
.hw-led { display: flex; align-items: center; gap: 7px; justify-content: center; margin-top: 12px; }
.hw-led i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.hw-led .mono { font-size: 9px; color: #6f6d68; letter-spacing: .14em; }

.dframe.desk { width: 100%; max-width: 440px; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.14); }
.desk-screen { aspect-ratio: 16/10; }
.dframe.doc { position: relative; width: 260px; }
.doc-page { aspect-ratio: 1/1.41; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(0,0,0,.12); position: relative; z-index: 2; }
.doc-2 { position: absolute; inset: 14px -14px -14px 14px; z-index: 1; }
.dframe.tab { width: 340px; border: 12px solid #181715; border-radius: 22px; overflow: hidden; }
.tab-screen { aspect-ratio: 4/3; }

/* placeholders */
.ph { position: relative; width: 100%; height: 100%; display: grid; place-items: center; color: var(--line-2); background: var(--bg-2); min-height: 80px; }
.ph-k0 { color: #c7c4bd; } .ph-k1 { color: #cbc8c1; } .ph-k2 { color: #c2bfb8; }
.ph-stripes { position: absolute; inset: 0; opacity: .8; }
.ph-label { position: relative; font-size: 11px; color: var(--ink-3); letter-spacing: .12em; background: var(--bg-2); padding: 4px 10px; }

/* ============================================================
   APP UI — MachiLog screens
   ============================================================ */
.ap { width: 100%; height: 100%; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; font-size: 12px; position: relative; overflow: hidden; }
.ap-status { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 4px; font-size: 10px; }
.ap-status .mono { font-weight: 700; } .ap-status-r { letter-spacing: -1px; }
.ap-notch { width: 60px; }
.ap-top { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 16px 14px; }
.ap-hello { font-size: 9px; color: var(--ink-3); letter-spacing: .08em; margin-bottom: 4px; }
.ap-title { font-size: 19px; font-weight: 700; }
.ap-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--line); }
.ap-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding: 0 16px 16px; }
.ap-sum-card { background: var(--paper); border: 1px solid var(--line); padding: 11px 10px; display: flex; flex-direction: column; gap: 7px; }
.ap-sum-card .mono { font-size: 8px; color: var(--ink-3); letter-spacing: .04em; }
.ap-sum-card strong { font-size: 22px; font-weight: 700; line-height: 1; }
.ap-sum-card strong small { font-size: 10px; font-weight: 500; color: var(--ink-3); margin-left: 2px; }
.ap-sum-card.accent { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.ap-sum-card.accent .mono { color: rgba(12,12,11,.65); }
.ap-sec-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 16px 10px; font-size: 13px; font-weight: 700; }
.ap-sec-row .mono { font-size: 9px; color: var(--accent); }
.ap-list { display: flex; flex-direction: column; gap: 1px; padding: 0 16px; flex: 1; }
.ap-item { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ap-pin { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ap-pin.k0 { background: var(--accent); } .ap-pin.k1 { background: #d99a3c; } .ap-pin.k2 { background: #8d8a83; }
.ap-item-b { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ap-item-b strong { font-size: 13px; font-weight: 700; } .ap-item-b .mono { font-size: 9px; color: var(--ink-3); }
.ap-chip { font-size: 9px; padding: 3px 8px; border-radius: 2px; font-weight: 700; white-space: nowrap; }
.ap-chip.s0 { background: rgba(122,232,0,.16); color: #4f8f00; }
.ap-chip.s1 { background: #f0e3cc; color: #9c6f1f; }
.ap-chip.s2 { background: #dceee2; color: #2f7d52; }
.ap-fab { position: absolute; bottom: 64px; left: 16px; right: 16px; background: var(--ink); color: #fff; text-align: center; padding: 14px; font-weight: 700; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.ap-tabbar { display: flex; justify-content: space-around; align-items: center; padding: 8px 0 12px; border-top: 1px solid var(--line); background: var(--paper); }
.ap-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink-3); font-size: 8px; }
.ap-tab i { font-size: 16px; font-style: normal; } .ap-tab em { font-style: normal; }
.ap-tab.on { color: var(--accent); }
.ap-tab.mid i { background: var(--accent); color: var(--ink); width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; margin-top: -18px; box-shadow: 0 6px 16px rgba(122,232,0,.4); }

/* map */
.ap-map-canvas { flex: 1; position: relative; background-color: #e9e7e2; }
.ap-map-roads { position: absolute; inset: 0; background-image: linear-gradient(90deg, #d8d5cf 2px, transparent 2px), linear-gradient(#d8d5cf 2px, transparent 2px); background-size: 60px 60px, 60px 60px; opacity: .8; }
.ap-map-roads::after { content:""; position:absolute; left:0; right:0; top:42%; height:10px; background:#d3d0c9; transform: rotate(-6deg); }
.ap-map-pin { position: absolute; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 3px 6px rgba(0,0,0,.2); }
.ap-map-pin.k0 { background: var(--accent); } .ap-map-pin.k1 { background: #d99a3c; } .ap-map-pin.k2 { background: var(--ink); }
.ap-map-pin.k0::after { content:""; position:absolute; inset:4px; background:#fff; border-radius:50%; }
.ap-map-head { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: color-mix(in srgb,var(--bg) 80%, transparent); backdrop-filter: blur(6px); }
.ap-back { font-size: 17px; font-weight: 700; }
.ap-map-title { font-size: 15px; font-weight: 700; flex: 1; }
.ap-map-head .mono { font-size: 10px; color: var(--ink-3); }
.ap-map-card { display: flex; align-items: center; gap: 11px; padding: 16px; background: var(--paper); border-top: 1px solid var(--line); margin-bottom: 56px; }

/* report */
.ap-report, .ap-confirm { padding-bottom: 16px; }
.ap-form-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px 14px; }
.ap-form-head span:last-child { flex: 1; }
.ap-form-lead { padding: 0 16px 14px; font-size: 17px; font-weight: 700; display: flex; flex-direction: column; gap: 4px; }
.ap-form-lead .mono { font-size: 9px; color: var(--ink-3); font-weight: 500; letter-spacing: .1em; }
.ap-cat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding: 0 16px 14px; }
.ap-cat { background: var(--paper); border: 1px solid var(--line); padding: 14px 6px; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; text-align: center; }
.ap-cat-i { font-size: 20px; }
.ap-cat.sel { border-color: var(--accent); background: rgba(122,232,0,.12); color: #4f8f00; }
.ap-photo { padding: 0 16px; }
.ap-photo-box { border: 1px dashed var(--line-2); padding: 22px; text-align: center; }
.ap-photo-box .mono { font-size: 11px; color: var(--ink-3); }
.ap-next, .ap-submit, .ap-home-btn { position: absolute; bottom: 16px; left: 16px; right: 16px; background: var(--ink); color: #fff; text-align: center; padding: 15px; font-weight: 700; font-size: 13px; }
.ap-confirm .ap-submit { background: var(--accent); color: var(--ink); }

/* confirm */
.ap-conf-img { height: 120px; margin: 0 16px 14px; display: grid; place-items: center; background-color: #e9e7e2; }
.ap-conf-img .mono { font-size: 11px; color: var(--ink-3); }
.ap-conf-rows { padding: 0 16px; display: flex; flex-direction: column; }
.ap-conf-row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ap-conf-row .mono { font-size: 9px; color: var(--ink-3); width: 64px; flex: none; padding-top: 3px; letter-spacing: .06em; }
.ap-conf-row strong { font-size: 13px; font-weight: 700; }

/* done */
.ap-done-c { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 28px; gap: 10px; }
.ap-check { width: 60px; height: 60px; margin-bottom: 6px; }
.ap-check svg { width: 32px; height: 32px; }
.ap-done-c h3 { font-size: 18px; font-weight: 700; }
.ap-done-c p { font-size: 12px; color: var(--ink-2); line-height: 1.7; }
.ap-done-id { font-size: 10px; color: var(--ink-3); border: 1px solid var(--line); padding: 6px 12px; letter-spacing: .08em; margin-top: 6px; }
.ap-home-btn { position: static; margin-top: 14px; width: 100%; }

@media (max-width: 1000px) {
  .wd-body { grid-template-columns: 1fr; gap: 30px; }
  .wd-static-frame { grid-template-columns: 1fr; }
  .wd-gallery { flex-direction: row; }
  .wd-thumb { width: auto; flex: 1; }
}
@media (max-width: 680px) {
  .wd-2col { grid-template-columns: 1fr; }
  .demo-stage { padding: 24px 16px; min-height: 0; }
  .demo-toolbar { gap: 10px; }
}