:root{--color-canvas:#e9eef2;--color-surface:#e9eef2;--color-surface-raised:#f1f4f6;--color-surface-result:#e2ebf3;--color-text:#1e2933;--color-text-muted:#5d6b78;--color-text-soft:#74818d;--color-border:#c7d0d8;--color-accent:#276ef1;--color-accent-deep:#1f55bb;--color-accent-soft:#dfeaff;--color-success:#147a4b;--color-success-soft:#ddf1e6;--color-danger:#b42318;--color-danger-soft:#f8e6e3;--shadow-light:-8px -8px 16px #ffffffdb;--shadow-dark:8px 8px 16px #3e4c592e;--shadow-raised:var(--shadow-light), var(--shadow-dark);--shadow-inset:inset 5px 5px 10px #3e4c5929, inset -5px -5px 10px #ffffffd1;--focus-ring:0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-accent);--radius:8px;--font-sans:"Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif}*{box-sizing:border-box;letter-spacing:0}html{background:var(--color-canvas);min-width:0;color:var(--color-text);font-family:var(--font-sans);text-rendering:optimizelegibility;font-size:16px}body{background:var(--color-canvas);min-width:0;min-height:100dvh;margin:0}button,input{font:inherit}button{cursor:pointer}a{color:inherit}button:focus-visible,input:focus-visible,a:focus-visible,[tabindex="-1"]:focus-visible{box-shadow:var(--focus-ring);outline:none}::selection{color:var(--color-text);background:#276ef12e}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.site-shell{flex-direction:column;width:min(1180px,100% - 48px);min-height:100dvh;margin:0 auto;padding:26px 0 24px;display:flex}.site-header{justify-content:space-between;align-items:center;gap:24px;min-height:50px;display:flex}.brand{align-items:center;gap:12px;text-decoration:none;display:inline-flex}.brand-mark{width:42px;height:42px;color:var(--color-accent-deep);background:var(--color-surface-raised);box-shadow:var(--shadow-raised);border-radius:50%;flex:0 0 42px;place-items:center;display:grid}.brand-copy{gap:1px;display:grid}.brand-copy strong{font-size:17px;line-height:1.2}.brand-copy span{color:var(--color-text-muted);font-size:12px;line-height:1.4}.global-nav{align-items:center;display:flex}.nav-link{border-radius:var(--radius);min-height:44px;color:var(--color-text-muted);align-items:center;gap:7px;padding:0 13px;font-size:14px;font-weight:650;text-decoration:none;transition:color .15s,background-color .15s,box-shadow .15s;display:inline-flex}.nav-link:hover{color:var(--color-accent-deep);background:#ffffff61}.nav-link.is-active{color:var(--color-accent-deep);background:var(--color-surface);box-shadow:var(--shadow-inset)}.site-main{flex:1}.site-footer{color:var(--color-text-soft);justify-content:center;align-items:center;gap:8px;padding-top:38px;font-size:12px;line-height:1.5;display:flex}.eyebrow,.section-kicker{color:var(--color-accent-deep);margin:0;font-size:12px;font-weight:700;line-height:1.4}h1,h2,h3,p{margin-top:0}.home-page{padding:78px 0 36px}.home-intro{grid-template-columns:minmax(0,.94fr) minmax(360px,.76fr);align-items:end;gap:76px;display:grid}.home-intro h1{margin:15px 0 13px;font-size:38px;font-weight:700;line-height:1.22}.home-copy{max-width:500px;color:var(--color-text-muted);margin-bottom:0;font-size:15px;line-height:1.7}.tool-search{border-radius:var(--radius);min-height:58px;color:var(--color-text-muted);background:var(--color-surface);box-shadow:var(--shadow-inset);border:1px solid #c7d0d894;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;padding:0 14px 0 18px;display:grid}.tool-search:focus-within{border-color:var(--color-accent);box-shadow:var(--focus-ring), var(--shadow-inset)}.tool-search input{width:100%;min-width:0;color:var(--color-text);background:0 0;border:0;outline:0;font-size:16px}.tool-search input::placeholder{color:var(--color-text-soft)}.tool-search input::-webkit-search-cancel-button{display:none}.search-clear{width:36px;height:36px;color:var(--color-text-muted);background:0 0;border:0;border-radius:50%;place-items:center;display:grid}.search-clear:hover{color:var(--color-accent-deep);background:#ffffff80}.tool-directory{padding-top:62px}.directory-heading,.surface-heading,.result-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.directory-heading h2,.surface-heading h2{margin:6px 0 0;font-size:21px;font-weight:650;line-height:1.35}.result-count,.surface-tag,.result-status,.tool-category{border-radius:5px;align-items:center;font-size:11px;font-weight:650;line-height:1.2;display:inline-flex}.result-count,.surface-tag{color:var(--color-accent-deep);background:#dfeaff9e;border:1px solid #276ef133;padding:6px 9px}.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-top:23px;display:grid}.tool-card{border-radius:var(--radius);min-width:0;min-height:228px;color:var(--color-text);background:var(--color-surface);box-shadow:var(--shadow-raised);border:1px solid #0000;flex-direction:column;justify-content:space-between;padding:24px;text-decoration:none;transition:transform .15s,border-color .15s,box-shadow .15s;display:flex}.tool-card:hover{border-color:#276ef13d;transform:translateY(-1px);box-shadow:-6px -6px 13px #fffc,7px 7px 14px #3e4c5933}.tool-card:active{box-shadow:var(--shadow-inset);transform:translateY(0)}.tool-card-topline{justify-content:space-between;align-items:center;display:flex}.tool-card-icon{width:44px;height:44px;color:var(--color-accent-deep);background:var(--color-surface-raised);box-shadow:var(--shadow-inset);border-radius:50%;place-items:center;display:grid}.tool-card-arrow{color:var(--color-text-soft);transition:color .15s,transform .15s}.tool-card:hover .tool-card-arrow{color:var(--color-accent-deep);transform:translate(1px,-1px)}.tool-card-body{padding:24px 0 20px}.tool-category{color:var(--color-accent-deep);padding:0}.tool-card h3{margin:8px 0;font-size:19px;font-weight:650;line-height:1.4}.tool-card p{color:var(--color-text-muted);margin-bottom:0;font-size:13px;line-height:1.65}.tool-card-meta{color:var(--color-success);align-items:center;gap:6px;font-size:12px;display:inline-flex}.search-empty{min-height:180px;color:var(--color-text-muted);align-items:center;gap:18px;padding:30px 0;display:flex}.search-empty>svg{color:var(--color-text-soft);flex:none}.search-empty div{flex:1}.search-empty h3{color:var(--color-text);margin:0 0 5px;font-size:17px}.search-empty p{margin:0;font-size:13px}.button{border-radius:var(--radius);border:0;justify-content:center;align-items:center;gap:8px;min-height:46px;padding:0 16px;font-size:14px;font-weight:650;line-height:1.2;text-decoration:none;transition:transform .15s,box-shadow .15s,background-color .15s,color .15s;display:inline-flex}.button-primary{color:#f7fbff;background:var(--color-accent);box-shadow:-5px -5px 11px #ffffffc7,6px 6px 12px #2a539142}.button-primary:hover{background:var(--color-accent-deep);transform:translateY(-1px)}.button-primary:active{transform:translateY(0);box-shadow:inset 3px 3px 7px #10317057,inset -3px -3px 7px #5d9dff47}.button-secondary{color:var(--color-accent-deep);background:var(--color-surface);box-shadow:var(--shadow-raised)}.button-quiet{color:var(--color-text-muted);background:0 0}.button-quiet:hover{color:var(--color-accent-deep);background:#ffffff5c}.tool-page{padding:44px 0 36px}.breadcrumb{color:var(--color-text-soft);align-items:center;gap:9px;font-size:12px;line-height:1.4;display:flex}.breadcrumb a{min-height:44px;color:var(--color-text-muted);align-items:center;gap:6px;text-decoration:none;display:inline-flex}.breadcrumb a:hover{color:var(--color-accent-deep)}.tool-page-header{align-items:flex-start;gap:17px;max-width:760px;padding:26px 0 36px;display:flex}.tool-title-icon{width:48px;height:48px;color:var(--color-accent-deep);background:var(--color-surface);box-shadow:var(--shadow-raised);border-radius:50%;flex:0 0 48px;place-items:center;display:grid}.tool-page-header h1{margin:6px 0 7px;font-size:30px;font-weight:700;line-height:1.28}.tool-page-header p:last-child{color:var(--color-text-muted);margin-bottom:0;font-size:14px;line-height:1.65}.calculator-layout{grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);align-items:start;gap:28px;display:grid}.calculator-layout>*{min-width:0}.form-surface,.result-surface{border-radius:var(--radius);min-width:0}.form-surface{background:var(--color-surface);box-shadow:var(--shadow-raised);padding:30px}.surface-heading{border-bottom:1px solid #c7d0d8ad;padding-bottom:24px}.field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding-top:24px;display:grid}.field{min-width:0}.field label,.field legend{color:var(--color-text);margin-bottom:8px;padding:0;font-size:14px;font-weight:650;line-height:1.4;display:block}.input-shell{border-radius:var(--radius);background:var(--color-surface);min-width:0;min-height:50px;box-shadow:var(--shadow-inset);border:1px solid #c7d0d88f;align-items:center;padding:0 14px;transition:border-color .15s,box-shadow .15s;display:flex}.input-shell:focus-within{border-color:var(--color-accent);box-shadow:var(--focus-ring), var(--shadow-inset)}.input-shell input{width:100%;min-width:0;color:var(--color-text);font-variant-numeric:tabular-nums;background:0 0;border:0;outline:0;padding:0;font-size:20px;font-weight:650;line-height:1}.input-shell input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.62}.field-help{min-height:19px;color:var(--color-text-soft);margin:7px 0 0;font-size:12px;line-height:1.55}.duration-field,.unit-field{padding-top:20px}.duration-inputs{gap:10px;min-width:0;display:flex}.input-shell-small{justify-content:space-between;width:148px;min-width:0}.input-shell-small input{width:72px}.input-shell-small span{color:var(--color-text-muted);white-space:nowrap;font-size:13px}.unit-field{border:0;min-width:0;margin:0}.unit-options{border-radius:var(--radius);background:var(--color-surface);box-shadow:var(--shadow-inset);border:1px solid #c7d0d88f;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:5px;display:grid}.unit-option{cursor:pointer;min-width:0;position:relative;margin:0!important}.unit-option input{opacity:0;pointer-events:none;position:absolute}.unit-option span{min-height:42px;color:var(--color-text-muted);text-align:center;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;padding:6px 9px;font-size:13px;font-weight:650;transition:color .15s,background-color .15s,box-shadow .15s,border-color .15s;display:flex}.unit-option:hover span{color:var(--color-accent-deep);background:#ffffff5c}.unit-option input:checked+span{color:var(--color-accent-deep);background:var(--color-surface-raised);border-color:#276ef129;box-shadow:-3px -3px 7px #ffffffb8,3px 3px 7px #3e4c5929}.unit-option input:focus-visible+span{box-shadow:var(--focus-ring)}.field-error{color:var(--color-danger);margin:15px 0 0;font-size:13px;line-height:1.55}.form-actions{grid-template-columns:1fr auto;align-items:center;gap:12px;padding-top:25px;display:grid}.result-surface{background:var(--color-surface-result);box-shadow:var(--shadow-inset);padding:28px 30px 24px;scroll-margin-top:20px;position:sticky;top:24px}.result-status{color:var(--color-success);background:#ddf1e6bd;border:1px solid #147a4b30;padding:5px 9px}.result-main{padding:25px 0 22px}.result-label{color:var(--color-text-muted);margin-bottom:8px;font-size:13px;font-weight:650;display:block}.result-value{overflow-wrap:anywhere;color:var(--color-accent-deep);font-variant-numeric:tabular-nums;font-size:36px;font-weight:700;line-height:1.14;display:block}.result-summary{color:var(--color-text-muted);margin:11px 0 0;font-size:14px;line-height:1.68}.result-details{border-top:1px solid #c7d0d8c7;display:grid}.detail-row{color:var(--color-text-muted);border-bottom:1px solid #c7d0d8c7;justify-content:space-between;align-items:baseline;gap:20px;padding:12px 0;font-size:13px;line-height:1.4;display:flex}.detail-row strong{color:var(--color-text);font-variant-numeric:tabular-nums;text-align:right;font-size:14px;font-weight:650}.privacy-inline{color:var(--color-success);align-items:center;gap:7px;padding-top:16px;font-size:12px;line-height:1.5;display:flex}.result-surface.is-error{background:var(--color-danger-soft);box-shadow:inset 5px 5px 10px #823a311a,inset -5px -5px 10px #fffaf9c7}.result-surface.is-error .result-status{color:var(--color-danger);background:#ffede9c2;border-color:#b423182e}.result-surface.is-error .result-value,.result-surface.is-error .result-summary,.result-surface.is-error .privacy-inline{color:var(--color-danger)}.result-surface.is-error .result-value{font-size:27px}.not-found{text-align:left;align-content:center;place-items:start;max-width:560px;min-height:62dvh;margin:0 auto;display:grid}.not-found>svg{color:var(--color-accent-deep);margin-bottom:20px}.not-found h1{margin:9px 0 10px;font-size:30px;line-height:1.3}.not-found p:not(.eyebrow){color:var(--color-text-muted);margin-bottom:25px;line-height:1.7}@media (width<=900px){.site-shell{width:min(720px,100% - 36px)}.home-page{padding-top:58px}.home-intro{grid-template-columns:1fr;gap:32px}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.calculator-layout{grid-template-columns:1fr}.result-surface{position:static}}@media (width<=620px){.site-shell{width:calc(100% - 32px);padding-top:18px}.brand-copy span{display:none}.nav-link{padding-left:10px;padding-right:10px}.home-page{padding-top:48px}.home-intro h1{font-size:32px}.tool-directory{padding-top:48px}.tool-grid{grid-template-columns:1fr}.tool-card{min-height:210px}.search-empty{flex-wrap:wrap;align-items:flex-start}.search-empty .button{width:100%}.tool-page{padding-top:31px}.breadcrumb>span:last-child,.breadcrumb>span[aria-hidden=true]{display:none}.tool-page-header{padding:20px 0 30px}.tool-page-header h1{font-size:27px}.form-surface,.result-surface{padding-left:20px;padding-right:20px}.field-grid{grid-template-columns:1fr;gap:16px}.input-shell-small{flex:1 1 0;width:auto}.unit-option span{padding-left:5px;padding-right:5px;font-size:12px}.form-actions{grid-template-columns:1fr}.button-quiet{min-height:42px}.result-value{font-size:32px}.site-footer{flex-wrap:wrap}}@media (width<=360px){.site-shell{width:calc(100% - 24px)}.brand-copy strong{font-size:15px}.home-intro h1{font-size:29px}.tool-page-header{gap:13px}.tool-title-icon{flex-basis:44px;width:44px;height:44px}.tool-page-header h1{font-size:24px}.duration-inputs{gap:8px}.input-shell-small{padding-left:10px;padding-right:10px}.input-shell-small input{width:58px}.unit-options{gap:4px}.unit-option span{font-size:11px}.detail-row{gap:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
