/* OfficeCalculator.Net — Universal Office Theme */
:root{
  --oc-primary:#173f67;--oc-primary-2:#245f94;--oc-primary-3:#0f2f4d;--oc-accent:#2f80c8;
  --oc-accent-soft:#eaf3fb;--oc-success:#177a5b;--oc-bg:#f3f6f9;--oc-surface:#fff;
  --oc-surface-2:#eef3f7;--oc-text:#182534;--oc-muted:#5e6d7d;--oc-border:#d8e1e9;
  --oc-danger:#b43b3b;--oc-shadow:0 12px 32px rgba(20,45,70,.10);
  --oc-shadow-sm:0 4px 14px rgba(20,45,70,.08);--oc-radius:16px;--oc-sidebar:292px
}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth;background:var(--oc-bg)}
body{min-height:100%;margin:0;background:linear-gradient(180deg,#f7f9fc 0,#f1f5f8 100%);color:var(--oc-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--oc-primary-2);text-decoration-thickness:1px;text-underline-offset:3px}a:hover{color:var(--oc-primary-3);text-decoration:none}
.container{display:flex;min-height:100vh;max-width:1680px;margin:auto;background:var(--oc-surface);box-shadow:0 0 60px rgba(22,47,73,.08)}
.left-column{position:sticky;top:0;align-self:flex-start;flex:0 0 var(--oc-sidebar);width:var(--oc-sidebar);height:100vh;overflow:auto;padding:24px 18px;background:linear-gradient(165deg,var(--oc-primary-3),var(--oc-primary));color:#fff;box-shadow:8px 0 30px rgba(16,44,70,.13);z-index:50}
.site-name{width:100%;min-width:0;margin:0 4px 24px;padding:4px 0 20px;border-bottom:1px solid rgba(255,255,255,.16);font-size:1.08rem;font-weight:850;letter-spacing:-.035em;text-align:left;overflow:hidden}.site-name a{display:flex;align-items:center;gap:10px;width:100%;min-width:0;color:#fff;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.site-name a::before{content:"";display:block;flex:0 0 34px;width:34px;height:34px;margin:0;border-radius:10px;background:url("assets/brand/officecalculator-mark.svg") center/contain no-repeat;box-shadow:0 7px 18px rgba(0,0,0,.18)}
.menu{display:flex;flex-direction:column;gap:7px}.menu a{display:flex;align-items:center;min-height:46px;padding:11px 13px;border:1px solid transparent;border-radius:10px;color:#eaf3fb;background:rgba(255,255,255,.055);font-size:.93rem;font-weight:650;text-decoration:none;transition:.18s ease}.menu a:hover,.menu a:focus-visible,.menu a.current{color:#fff;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.16);transform:translateX(2px)}.menu a[href*="search"]{margin-top:8px;background:#fff;color:var(--oc-primary);box-shadow:var(--oc-shadow-sm)}.menu-icon{display:none;color:#fff;font-size:1.55rem;cursor:pointer}
.right-column{display:flex;flex:1;min-width:0;min-height:100vh;flex-direction:column;padding:28px clamp(18px,3vw,48px);background:var(--oc-bg)}.content{display:flex;flex:1;flex-direction:column;max-width:1160px;width:100%;margin:0 auto}.header{width:100%;padding:14px;background:transparent;color:var(--oc-text);text-align:center}
h1,h2,h3,h4{color:var(--oc-primary);line-height:1.22;letter-spacing:-.025em;text-wrap:balance}h1{font-size:clamp(2rem,4vw,3rem);margin:.15em 0 .65em}h2{font-size:clamp(1.5rem,2.7vw,2.1rem);margin:1.55em 0 .55em}h3{font-size:clamp(1.22rem,2vw,1.6rem);margin:1.3em 0 .5em}h4{font-size:1.2rem}p{font-size:1.06rem;line-height:1.75;color:#455568;margin:.7em 0 1.15em}ul,ol{font-size:1.03rem;line-height:1.65;padding-left:1.4rem}li{margin:.45rem 0;color:#455568}
.cal-section{position:relative;display:flex;flex-direction:column;gap:12px;max-width:820px;width:100%;margin:22px auto 30px;padding:clamp(20px,4vw,38px);border:1px solid var(--oc-border);border-radius:var(--oc-radius);background:var(--oc-surface);box-shadow:var(--oc-shadow);text-align:left}.cal-section>h1:first-child,.cal-section>h2:first-child,.cal-section>h3:first-child{margin-top:0}.cal-section br{line-height:.35}
label{display:inline-block;margin-top:4px;color:#27394b;font-weight:700;font-size:.96rem}input,select,textarea{max-width:100%;min-height:46px;padding:10px 12px;border:1px solid #c8d4df;border-radius:9px;background:#fff;color:var(--oc-text);font:inherit;box-shadow:inset 0 1px 2px rgba(20,45,70,.035);transition:border-color .18s,box-shadow .18s}input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=color]),select,textarea{width:min(100%,520px)}input:focus,select:focus,textarea:focus{outline:0;border-color:var(--oc-accent);box-shadow:0 0 0 4px rgba(47,128,200,.14)}input[type=radio],input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--oc-primary-2);vertical-align:middle}
button,.link-button,.tool-button,input[type=submit],input[type=button]{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:4px 5px 4px 0;padding:10px 18px;border:0;border-radius:9px;background:linear-gradient(180deg,var(--oc-primary-2),var(--oc-primary));color:#fff;font:700 .97rem/1.15 inherit;cursor:pointer;text-decoration:none;box-shadow:0 4px 11px rgba(23,63,103,.18);transition:transform .16s,box-shadow .16s,background .16s}button:hover,.link-button:hover,.tool-button:hover,input[type=submit]:hover,input[type=button]:hover{background:var(--oc-primary-3);color:#fff;transform:translateY(-1px);box-shadow:0 7px 16px rgba(23,63,103,.22)}button:focus-visible,.link-button:focus-visible{outline:3px solid rgba(47,128,200,.34);outline-offset:2px}button a{color:#fff;text-decoration:none}
:is(div,p,span,output)[id^="result"]:not([id$="Section"]):not([id$="Container"]):not(.photos){min-height:30px;padding:12px 14px;border-left:4px solid var(--oc-accent);border-radius:7px;background:var(--oc-accent-soft);color:var(--oc-primary-3);font-weight:750;overflow-wrap:anywhere}
table{width:100%;margin:24px 0;border-collapse:separate;border-spacing:0;border:1px solid var(--oc-border);border-radius:12px;background:#fff;box-shadow:var(--oc-shadow-sm);overflow:hidden}th,td{padding:13px 14px;border:0;border-bottom:1px solid var(--oc-border);text-align:left}th{background:var(--oc-primary);color:#fff;font-weight:750}tr:last-child td{border-bottom:0}tbody tr:nth-child(even){background:#f8fafc}
img{max-width:100%;height:auto;border-radius:12px}.footer-menu{margin-bottom:12px}.footer-menu a,footer a{color:#fff}footer{margin-top:auto;padding:28px;border-radius:14px 14px 0 0;background:var(--oc-primary-3);color:#eaf3fb;text-align:center}.tool-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:28px 0}.tool-button{width:100%;max-width:none;margin:0;padding:14px}.current{background:var(--oc-primary-3)!important;color:#fff!important}
@media(max-width:900px){.container{display:block}.left-column{position:sticky;top:0;width:100%;height:auto;min-height:64px;overflow:visible;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}.site-name{margin:0;padding:0;border:0;font-size:1.15rem}.site-name a::before{width:31px;height:31px}.menu-icon{display:block;padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.12)}.menu{display:none;position:absolute;top:100%;left:0;width:100%;max-height:72vh;overflow:auto;padding:12px 16px;background:var(--oc-primary-3);box-shadow:0 16px 35px rgba(0,0,0,.24)}.menu.active{display:flex}.right-column{min-height:calc(100vh - 64px);padding:18px 14px}}
@media(max-width:600px){h1{font-size:1.85rem}.cal-section{padding:18px 15px;border-radius:12px}button,.link-button,.tool-button,input[type=submit],input[type=button]{width:auto;max-width:100%;padding:10px 14px}.tool-buttons{grid-template-columns:1fr}p{font-size:1rem}table{display:block;overflow-x:auto}}
@media print{.left-column,.adsbygoogle,footer{display:none!important}.right-column{padding:0;background:#fff}.container{display:block;box-shadow:none}.cal-section{box-shadow:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Brand, empty-ad and legacy-layout safeguards */
.site-name a{color:#fff!important}.site-name a:hover{color:#fff!important;opacity:.94}
ins.adsbygoogle[data-ad-status="unfilled"],ins.adsbygoogle.oc-ad-empty{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}
.oc-blog-support{width:100%;margin:20px 0;padding:0}.oc-blog-support>.w3-border{border-color:var(--oc-border)!important;border-radius:12px;background:var(--oc-surface)}
.content>br:last-child,.content>p:empty{display:none}
@media(max-width:900px){.site-name a::before{width:34px;height:34px;flex-basis:34px}}


/* Premium universal refinements — brand containment, dark contrast and compact actions */
.site-name a{max-width:100%}
.site-name a::after{content:"";min-width:0}
.cal-section>button,.cal-section>input[type="button"],.cal-section>input[type="submit"]{align-self:flex-start;width:auto!important;max-width:100%;min-width:132px}
.oc-auto-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%;margin:10px 0 2px}
.oc-auto-actions>button,.oc-auto-actions>input[type="button"],.oc-auto-actions>input[type="submit"],.oc-auto-actions>.link-button{flex:0 0 auto;width:auto!important;min-width:124px;max-width:100%;margin:0!important}
body.oc-dark h1,body.oc-dark h2,body.oc-dark h3,body.oc-dark h4,body.oc-dark h5,body.oc-dark h6{color:#8fd0ff!important;text-shadow:0 1px 0 rgba(0,0,0,.12)}
body.oc-dark a:not(.menu a):not(.oc-share-button):not(.oc-button-link){color:#83c9ff}
body.oc-dark .cal-section .input-group label,body.oc-dark .cal-section .slider-value,body.oc-dark .cal-section .input-with-icon span,body.oc-dark .cal-section .results-header,body.oc-dark .cal-section .result-label,body.oc-dark .cal-section strong{color:#d7e6f2!important}
body.oc-dark .cal-section .results-container,body.oc-dark .cal-section .result-box,body.oc-dark .cal-section [class*="result-box"]{background:#1c2b38!important;color:#e8eef4!important;border-color:#3a5062!important}
body.oc-dark .cal-section .result-value{color:#72e0ac!important}
body.oc-dark .cal-section input[type="range"]{background:#405365!important}
body.oc-dark .oc-appbar{border-color:#476176;background:rgba(19,31,42,.94)}
body.oc-dark .oc-app-action{background:#243747!important;color:#d7e9f6!important}
body.oc-dark .oc-app-action:hover{background:#30485b!important;color:#fff!important}
@media(max-width:900px){.site-name{font-size:1.05rem;overflow:visible}.site-name a{overflow:visible;text-overflow:clip}.site-name a::before{flex-basis:32px;width:32px;height:32px}}
@media(max-width:520px){.oc-auto-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.oc-auto-actions>button,.oc-auto-actions>input[type="button"],.oc-auto-actions>input[type="submit"],.oc-auto-actions>.link-button{width:100%!important;min-width:0}.cal-section>button,.cal-section>input[type="button"],.cal-section>input[type="submit"]{width:100%!important}}


/* v9 responsive application frame — laptops, tablets and phones */
html,body{overflow-x:clip}
.content,.cal-section,.right-column{min-width:0}
.content{container-type:inline-size;container-name:oc-content}

/* Collapse the permanent sidebar before it starts squeezing calculators. */
@media(max-width:1120px){
  .container{display:block}
  .left-column{position:sticky;top:0;width:100%;height:auto;min-height:64px;overflow:visible;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 8px 24px rgba(16,44,70,.18)}
  .site-name{max-width:calc(100% - 62px);margin:0;padding:0;border:0;font-size:1.05rem;overflow:visible}
  .site-name a{overflow:visible;text-overflow:clip}
  .site-name a::before{flex-basis:32px;width:32px;height:32px}
  .menu-icon{display:block;padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.12)}
  .menu{display:none;position:absolute;top:100%;left:0;width:100%;max-height:72vh;overflow:auto;padding:12px 16px;background:var(--oc-primary-3);box-shadow:0 16px 35px rgba(0,0,0,.24)}
  .menu.active{display:flex}
  .right-column{min-height:calc(100vh - 64px);padding:18px clamp(14px,3vw,28px)}
}

@media(max-width:640px){
  .right-column{padding:14px 10px}
  h1{font-size:clamp(1.65rem,8vw,2.05rem);margin:.35em 0 .7em}
  h2{font-size:clamp(1.35rem,6vw,1.75rem)}
  p,ul,ol{font-size:1rem}
  input,select,textarea{font-size:16px}
  .cal-section{margin:14px auto 24px;padding:16px 12px;border-radius:14px;box-shadow:0 8px 22px rgba(20,45,70,.09)}
  footer{padding:22px 14px}
}

@media(max-width:380px){
  .site-name{font-size:.98rem}
  .site-name a{gap:8px}
  .right-column{padding-left:8px;padding-right:8px}
  .cal-section{padding-left:10px;padding-right:10px}
}

/* v10 sidebar overflow correction — vertical access without a horizontal scrollbar */
@media(min-width:1121px){
  .left-column{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.24) transparent}
  .left-column::-webkit-scrollbar{width:6px;height:0}
  .left-column::-webkit-scrollbar-track{background:transparent}
  .left-column::-webkit-scrollbar-thumb{border-radius:999px;background:rgba(255,255,255,.22)}
  .left-column::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.36)}
  .menu{min-width:0;max-width:100%;overflow-x:hidden}
  .menu a{width:100%;max-width:100%;min-width:0;transform:none!important}
}


/* v16 homepage calculator safeguards */
.oc-calculator-app .display-panel output#result,.oc-calculator-app .display-panel #expression,.oc-calculator-app .display-panel #displayMessage{padding:0!important;border:0!important;border-left:0!important;background:transparent!important;box-shadow:none!important;overflow-wrap:anywhere!important}
.oc-calculator-app .display-panel output#result{color:#f8fbff!important;-webkit-text-fill-color:#f8fbff!important}

/* v53 people-first long-tail question section */
.oc-v53-longtail{margin:22px auto;padding:22px 24px;border:1px solid #dce5f2;border-radius:18px;background:#fff;box-shadow:0 8px 24px rgba(30,55,90,.06)}.oc-v53-longtail h2{margin-top:0}.oc-v53-longtail h3{margin:18px 0 6px;color:#18345f}.oc-v53-longtail p{margin:0 0 10px;line-height:1.7;color:#4f6078}@media(prefers-color-scheme:dark){html:not([data-theme="light"]) .oc-v53-longtail{background:#162132;border-color:#2b3a50}html:not([data-theme="light"]) .oc-v53-longtail h3{color:#a9c2ff}html:not([data-theme="light"]) .oc-v53-longtail p{color:#b8c2d3}}html[data-theme="dark"] .oc-v53-longtail{background:#162132;border-color:#2b3a50}html[data-theme="dark"] .oc-v53-longtail h3{color:#a9c2ff}html[data-theme="dark"] .oc-v53-longtail p{color:#b8c2d3}@media(max-width:700px){.oc-v53-longtail{padding:18px 16px;margin:16px auto}.oc-v53-longtail h3{font-size:1rem}}