/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --sb-bg:       #f5f4f2;/*#f0ede8;*/
  --sb-hover:    #e6e2dc;
  --sb-active:   #dedad3;
  --sb-border:   #dedad3;
  --sb-text:     #2d2d2a;
  --sb-muted:    #8a8680;
  --sb-accent:   #cc5833;

  /* Main content area */
  --bg:          #f9f9f8;
  --bg2:         #f2f2f0;
  --card:        #ffffff;
  --border:      #E3E1DA;/*#e8e8e5;*/
  --border2:     #d4d4d0;

  /* Text scale */
  --t1:  #1a1a18;
  --t2:  #141413;/*#585854;*/
  --t3:  #6c6c64;/*#8a8a84;*/
  --t4:  #b8b8b2;

  /* Accent & interactions */
  --accent:      #cc5833;
  --focus-ring:  rgba(204,88,51,.2);

  /* Status */
  --err-bg:  #fff4f4;
  --err-bd:  #f5c5c5;
  --err-t:   #b33030;

  /* Dimensions */
  --topbar-h: 48px;
  --sb-w:     240px;

  /* Radii */
  --r:  8px;
  --rs: 6px;

  /* Font sizes */
  --fxs:   0.6875rem;
  --fsm:   0.75rem;
  --fui:   0.92rem;
  --fbody: 0.875rem;
}
/* ── RESET ──────────────────────────────────────────────── */
*,::after,::before{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--t1);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100svh}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;cursor:pointer;border:none;background:0 0}
input,select{font-family:inherit}
ul{list-style:none}
/* ── SHELL ──────────────────────────────────────────────── */
.shell { display:flex; flex-direction:column; min-height:100svh }
/* ── TOPBAR ─────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:200;height:var(--topbar-h);background:var(--sb-bg);border-bottom:1px solid var(--sb-border);display:flex;align-items:center;padding:0 12px;gap:8px;flex-shrink:0}
.topbar__ham{flex-shrink:0;width:32px;height:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:var(--rs);transition:background .12s}
.topbar__ham:hover{background:var(--sb-hover)}
.topbar__ham span{display:block;width:15px;height:1.5px;background:var(--sb-text);border-radius:2px;transition:transform .2s,opacity .15s}
.topbar__ham:hover span{background:var(--t1)}
body.nav-open .topbar__ham span:first-child{transform:translateY(6.5px) rotate(45deg)}
body.nav-open .topbar__ham span:nth-child(2){opacity:0}
body.nav-open .topbar__ham span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.topbar__logo-mobile{font-size:.8rem;font-weight:600;color:var(--sb-text);letter-spacing:-.01em;white-space:nowrap;display:none}
.topbar__logo-mobile:hover{text-decoration:none;color:var(--t1)}
.topbar__title{font-size:var(--fui);color:var(--sb-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.topbar__share{margin-left:auto;display:flex;align-items:center;gap:5px;flex-shrink:0}
.share-pill{font-size:var(--fxs);font-weight:500;padding:4px 10px;border:1px solid var(--sb-border);border-radius:20px;color:var(--sb-text);background:0 0;white-space:nowrap;display:none;transition:background .12s,border-color .12s}
.share-pill:hover{background:var(--sb-hover);border-color:var(--border2)}
.share-pill.on{display:none}
/* ── BODY AREA ──────────────────────────────────────────── */
.body-area {flex:1; display:flex; position:relative}
.sb-overlay {display:none; position:fixed; inset:0; top:var(--topbar-h);background:rgba(0,0,0,.45); z-index:100;}
.sb-overlay.on { display:block }
/* ── SIDEBAR ────────────────────────────────────────────── */
.sidebar{position:fixed;top:var(--topbar-h);left:0;bottom:0;width:var(--sb-w);z-index:110;background:var(--sb-bg);overflow-y:auto;overflow-x:hidden;transform:translateX(-100%);transition:transform .22s cubic-bezier(.4,0,.2,1);scrollbar-width:thin;scrollbar-color:var(--sb-border) transparent;border-right:1px solid var(--sb-border)}
.sidebar::-webkit-scrollbar{width:3px}
.sidebar::-webkit-scrollbar-thumb{background:var(--sb-border);border-radius:3px}
.sidebar.open{transform:translateX(0)}
@media(min-width:860px){
.topbar__logo-mobile{display:none!important}
.topbar__title{display:block}
.sidebar{position:sticky;top:var(--topbar-h);height:calc(100svh - var(--topbar-h));transform:none!important;flex-shrink:0;width:var(--sb-w);opacity:1;transition:width .2s ease,opacity .2s ease}
.sidebar.collapsed{width:0;opacity:0;overflow:hidden;pointer-events:none}
.sb-overlay{display:none!important}
.body-area{position:static}
}
@media(max-width:859px){
.topbar__logo-mobile{display:block}
.topbar__title{display:none}
}
.sidebar-inner{padding:0 0 32px}
.sb-logo-block{padding:14px 12px 12px;border-bottom:1px solid var(--sb-border);margin-bottom:4px}
.sb-logo{font-size:.82rem;font-weight:600;color:var(--sb-text);letter-spacing:-.01em;display:block}
.sb-logo:hover{color:var(--t1);text-decoration:none}
.sb-section{padding:12px 0 6px}
.sb-section+.sb-section{border-top:1px solid var(--sb-border)}
.sb-label{font-size:var(--fxs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--sb-muted);padding:0 12px 6px}
.sb-link{display:block;padding:6px 12px;font-size:var(--fui);color:var(--sb-text);border-left:2px solid transparent;transition:background .1s,color .1s}
.sb-link:hover{background:var(--sb-hover);color:var(--t1);text-decoration:none}
.sb-link.active{background:var(--sb-active);color:var(--t1);font-weight:500;border-left-color:var(--sb-accent);padding-left:10px}
/* collapse */
.sb-label{display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none}
.sb-label::after{content:'▼';font-size:.75em;transition:transform .2s ease}
.sb-section.collapsed .sb-label::after{transform:rotate(-90deg)}
.sb-section.collapsed .sb-link{display:none}
/* ── MAIN PANE ──────────────────────────────────────────── */
.main {flex:1; min-width:0; display:flex; flex-direction:column; background:var(--bg);align-items:center;justify-content:center;}
.tool-wrap { flex:1; padding:20px 18px 40px; max-width:560px; width:100% }
@media(min-width:560px){ .tool-wrap { padding:25px 28px 48px;margin-left:-60px; } }
.tool-head { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border) }
.tool-head h1 { font-size:1rem; font-weight:600; letter-spacing:-.01em; margin-bottom:3px }
.tool-head p  { font-size:var(--fui); color:var(--t3) }
/* ── FOOTER ─────────────────────────────────────────────── */
.site-footer {border-top:1px solid var(--border); background:var(--card);padding:14px 18px;width:100%}
@media(min-width:560px){ .site-footer { padding:14px 28px } }
.footer-inner {max-width:560px; display:flex;align-items:center; justify-content:space-between;flex-wrap:wrap; gap:8px;}
.footer-copy { font-size:var(--fsm); color:var(--t3) }
.footer-legal { display:flex; gap:14px }
.footer-legal a { font-size:var(--fsm); color:var(--t3) }
.footer-legal a:hover { color:var(--t1); text-decoration:none }
/* ── TOOLS COMMON ────────────────────────────────────────── */
.calc{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.calc-block{padding:14px 16px;border-bottom:1px solid var(--border)}
.calc-block:last-child{border-bottom:none}
.block-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.block-tag{font-size:var(--fxs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.now-btn{font-size:var(--fxs);font-weight:500;color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:3px 8px;background:0 0;transition:background .12s,color .12s;opacity:.8}
.now-btn:hover{background:var(--accent);color:#fff;opacity:1}
.fields-date{display:flex;gap:6px;flex-wrap:nowrap;align-items:flex-end;margin-bottom:10px}
.time-divider{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.time-divider::after,.time-divider::before{content:'';display:block;height:1px;background:var(--border);flex:1}
.time-divider__label{font-size:var(--fxs);color:var(--t4);letter-spacing:.04em;white-space:nowrap;flex-shrink:0}
.fields-time{display:flex;gap:6px;flex-wrap:nowrap;align-items:flex-end}
.fc{display:flex;flex-direction:column;gap:4px;min-width:0;flex-shrink:0}
.fc>label{font-size:var(--fxs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t2);line-height:1;display:block}
.fc input,.fc select{width:100%;border:1px solid var(--border2);border-radius:var(--rs);padding:7px 8px;font-size:var(--fbody);color:var(--t1);background:var(--bg2);outline:0;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s,background .15s}
.fc input:focus,.fc select:focus{border-color:#b06040;box-shadow:0 0 0 3px var(--focus-ring);background:var(--card)}
.fc select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%238a8a84'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center;padding-right:22px}
.fc.opt input,.fc.opt select{color:var(--t4);border-color:var(--border);background:var(--bg)}
.fc.opt input:focus,.fc.opt select:focus{color:var(--t1);background:var(--card);border-color:#b06040}
.fc input.invalid,.fc select.invalid{border-color:var(--err-t)!important;box-shadow:0 0 0 3px rgb(179 48 48 / .15)!important;background:var(--err-bg)!important}
.fc-err{font-size:.65rem;color:var(--err-t);margin-top:2px;line-height:1.3;display:none}
.fc-err.on{display:block}
.fc--month{width:106px}
.fc--day{width:58px}
.fc--year{width:72px}
.fc--hour{width:52px}
.fc--min{width:52px}
.fc--sec{width:52px}
.fc--ampm{width:64px}
@media(max-width:380px){
.fc--month{width:90px}
.fc--day{width:50px}
.fc--year{width:64px}
.fc--hour,.fc--min,.fc--sec{width:44px}
.fc--ampm{width:56px}
.fields-date,.fields-time{gap:4px}
}
.calc-actions{display:flex;gap:8px;margin-top:14px;align-items:center}
.btn-calc{font-size:var(--fbody);font-weight:600;padding:9px 22px;background:var(--t1);color:#fff;border-radius:var(--rs);transition:opacity .12s}
.btn-calc:hover{opacity:.78}
.btn-ghost{font-size:var(--fui);font-weight:500;padding:8px 14px;color:var(--t3);border:1px solid var(--border2);border-radius:var(--rs);transition:border-color .12s,color .12s}
.btn-ghost:hover{border-color:#aaa;color:var(--t1)}
.calc-err{display:none;margin-top:10px;font-size:var(--fui);color:var(--err-t);background:var(--err-bg);border:1px solid var(--err-bd);border-radius:var(--rs);padding:8px 12px}
.calc-err.on{display:block}
.result{display:none;margin-top:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;animation:fadeUp .2s ease both}
.result.show{display:block}
@keyframes fadeUp{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:translateY(0)}
}
.result__primary{padding:14px 16px 12px;font-size:clamp(.95rem, 2.8vw, 1.15rem);font-weight:600;letter-spacing:-.01em;line-height:1.4;color:var(--t1);border-bottom:1px solid var(--border);word-break:break-word;}
.result__table{width:100%;border-collapse:collapse}
.result__table tr{border-bottom:1px solid var(--border)}
.result__table tr:last-child{border-bottom:none}
.result__table tr:hover{background:var(--bg)}
.result__table td{padding:9px 16px;font-size:var(--fbody);vertical-align:middle}
.col-label{color:var(--t2);font-weight:500;width:50%}
.col-value{color:var(--t1);font-weight:600;text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.fmt-toggle{display:inline-flex;border:1px solid var(--border2);border-radius:5px;overflow:hidden;flex-shrink:0}
.fmt-btn{font-size:var(--fxs);font-weight:600;letter-spacing:.04em;padding:3px 9px;color:var(--t3);background:#fff0;border:none;cursor:pointer;transition:background .1s,color .1s;line-height:1.6}
.fmt-btn.active{background:var(--t1);color:#fff}
.fmt-btn:not(.active):hover{background:var(--sb-hover);color:var(--t1)}
.fc input.invalid,.fc select.invalid{border-color:var(--err-t)!important;box-shadow:0 0 0 3px rgb(179 48 48 / .15)!important;background:var(--err-bg)!important}
.fc-err{font-size:.65rem;color:var(--err-t);margin-top:2px;line-height:1.3;min-height:0;display:none}
.fc-err.on{display:block}
.fc--ampm.hidden{display:none}