/* Studio Gray — spacious surface system, shared by every public tool. */
html[data-theme="dark"]{--sn-bg:#0e1011;--sn-panel:#151719;--sn-raised:#202327;--sn-text:#f5f5f2;--sn-muted:#a3a8aa;--sn-line:#34383b;--sn-strong:#f7f7f5;--sn-on-strong:#121415;color-scheme:dark}
html[data-theme="light"]{--sn-bg:#f0f1ef;--sn-panel:#fff;--sn-raised:#f5f6f4;--sn-text:#181b1b;--sn-muted:#62696a;--sn-line:#d8ddda;--sn-strong:#181b1b;--sn-on-strong:#fff;color-scheme:light}
body.ns-app{background:var(--sn-bg)!important;color:var(--sn-text)!important}
body.ns-app .ns-site-header{background:var(--sn-bg)!important;border-bottom:1px solid var(--sn-line)}
body.ns-app .ns-header-inner{min-height:88px}
body.ns-app .ns-brand strong{font-size:clamp(24px,2vw,31px);letter-spacing:-.07em}
body.ns-app .ns-theme{width:42px;height:42px;border-radius:14px;border-color:var(--sn-line);background:var(--sn-raised)}
body.ns-app .ns-theme:hover{border-color:var(--sn-muted);background:var(--sn-panel)}
body.ns-app:not(.ns-home) .ns-tool-strip{border-top:0;padding:0 0 12px;background:var(--sn-bg)}
body.ns-app:not(.ns-home) .ns-tool-strip-inner{gap:8px}
body.ns-app:not(.ns-home) .ns-tool-strip a{min-height:36px;height:36px;margin:0;padding:0 16px;border:1px solid transparent;border-radius:999px;background:var(--sn-raised);color:var(--sn-muted);font-size:12px}
body.ns-app:not(.ns-home) .ns-tool-strip a:hover{color:var(--sn-text);border-color:var(--sn-line)}
body.ns-app:not(.ns-home) .ns-tool-strip a[aria-current]{background:var(--sn-strong);color:var(--sn-on-strong);border-color:var(--sn-strong)}
body.ns-app .ns-footer{background:var(--sn-bg);border-color:var(--sn-line)}
body.ns-app .ns-disclosure{border-color:var(--sn-line)}

/* The index keeps its three original groups, with roomier cards. */
body.ns-home{--nh-bg:var(--sn-bg);--nh-card:var(--sn-raised);--nh-line:var(--sn-line);--nh-text:var(--sn-text);--nh-muted:var(--sn-muted);background:var(--sn-bg)!important;color:var(--sn-text)!important}
body.ns-home .nh-main{width:min(1220px,calc(100% - 48px));margin:34px auto 62px;padding:49px 52px 35px;background:var(--sn-panel);border:1px solid var(--sn-line);border-radius:32px;box-shadow:0 24px 80px rgba(0,0,0,.1)}
body.ns-home .nh-group{margin-bottom:50px}
body.ns-home .nh-group:last-child{margin-bottom:0}
body.ns-home .nh-group h1,body.ns-home .nh-group h2{margin-bottom:20px;padding:0 0 16px;border-color:var(--sn-line);font-size:17px;font-weight:680;letter-spacing:-.025em}
body.ns-home .nh-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
body.ns-home .nh-card{position:relative;min-height:174px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:18px;padding:23px 24px;background:var(--sn-raised);border:1px solid var(--sn-line);border-radius:21px;transition:background .18s,border-color .18s,transform .18s,box-shadow .18s}
body.ns-home .nh-card::after{content:'↗';position:absolute;right:25px;top:21px;font-size:19px;font-weight:400;color:var(--sn-muted)}
body.ns-home .nh-card:hover{transform:translateY(-3px);background:var(--sn-panel);border-color:var(--sn-muted);box-shadow:0 16px 32px rgba(0,0,0,.11)}
body.ns-home .nh-icon{width:58px;height:58px;flex:0 0 58px;border-radius:15px}
body.ns-home .nh-icon img{width:100%;height:100%;object-fit:contain}
body.ns-home .nh-copy strong{font-size:17px;letter-spacing:-.035em}
body.ns-home .nh-copy small{margin-top:5px;font-size:12px;white-space:normal;line-height:1.4}
body.ns-home .ns-disclosure{width:min(1220px,calc(100% - 48px));margin:0 auto;padding:18px 5px;border:0;border-top:1px solid var(--sn-line)}
body.ns-home .ns-footer-inner{width:min(1220px,calc(100% - 48px));max-width:none}

/* Calculator input and result panels use the same visual weight. */
body.ns-app .rcs-main,body.ns-app .rf-page{background:var(--sn-bg)!important}
body.ns-app .rcs-shell,body.ns-app .rf-shell,body.ns-fishing main.rf-app{max-width:1220px}
body.ns-exp .rcs-main,body.ns-farm .rcs-main,body.ns-collection .rcs-main,body.ns-fish .rf-page,body.ns-fishing .rcs-main,body.ns-character .rcs-main,body.ns-title .rcs-main{padding-top:38px!important;padding-bottom:80px!important}
body.ns-app .rcs-main :is(.card,.box,.rf-card),body.ns-app .rf-page :is(.rf-inventory,.rf-summary),body.ns-fishing .rf-card{background:var(--sn-panel)!important;border:1px solid var(--sn-line)!important;border-radius:21px!important;box-shadow:0 18px 48px rgba(0,0,0,.08)!important}
body.ns-app .rcs-main :is(.rcs-input-card,#resultCard,.rf-inventory,.rf-summary){padding:clamp(22px,2.8vw,36px)!important}
body.ns-app .rcs-main #resultCard{border-color:var(--sn-line)!important;background:var(--sn-panel)!important}
body.ns-app .rcs-main :is(.premium-input,.select-trigger,.in),body.ns-app .rf-page :is(.rf-search,.rf-filter-button,.rf-sort),body.ns-fishing .rcs-main :is(input,select,.rf-search){min-height:44px;background:var(--sn-raised)!important;color:var(--sn-text)!important;border:1px solid var(--sn-line)!important;border-radius:12px!important;box-shadow:none!important}
body.ns-app .rcs-main :is(.premium-input,.select-trigger,.in):focus-within,body.ns-app .rcs-main :is(input,select):focus-visible{border-color:var(--sn-text)!important}
body.ns-app .rcs-main :is(.btn-primary,.primary-btn,.calculate-btn),body.ns-app .rf-button-primary{min-height:44px;border-radius:999px!important;background:var(--sn-strong)!important;color:var(--sn-on-strong)!important;border-color:var(--sn-strong)!important}
body.ns-app .rcs-main :is(.quick-btn,.rf-quick button,.rf-btn-secondary,.rf-btn-quiet),body.ns-app .rf-page :is(.rf-tabs button,.rf-view-switch button){border-radius:999px!important}
body.ns-app .rcs-main :is(.chip,.badge,.rf-badge){border-radius:999px!important}
body.rcs-exp .rcs-main :is(.potion-item,.m3,.bt3-total),body.rcs-collection .rcs-main :is(.it,.gcell,.goal,.stat,.total,.inwrap,.step,.tier,.tier-row,.group-row,.groups button),body.ns-fishing .rcs-main :is(.rf-bait-card,.rf-friend-card,.rf-rod-card,.rf-equipment-card,.rf-cumulative,.rf-preview-summary){border-radius:15px!important;background:var(--sn-raised)!important;border-color:var(--sn-line)!important}
body.rcs-exp .rcs-main .potion-total{border-radius:14px!important;min-height:62px}
body.rcs-page:is(.rcs-exp,.rcs-farm) :is(#customLevelSelect,#customTargetSelect) .select-options{border-radius:24px!important;background:var(--sn-panel)!important}
body.rcs-page:is(.rcs-exp,.rcs-farm) :is(#customLevelSelect,#customTargetSelect) :is(.option-item.opt-cell,.tsel-item.tsel-cell){border-radius:12px!important;background:var(--sn-raised)!important}
body.ns-app .sn-history-row{border-radius:12px;background:var(--sn-raised)}
body.ns-app :is(.rcs-main,.rf-page) :is(h1,h2,h3){letter-spacing:-.04em}

@media(max-width:900px){body.ns-home .nh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}body.ns-home .nh-main{padding:38px 30px}}
@media(max-width:600px){body.ns-app .ns-header-inner{min-height:72px}body.ns-app .ns-theme{width:36px;height:36px;border-radius:12px}body.ns-home .nh-main{width:calc(100% - 28px);margin:18px auto 36px;padding:25px 18px;border-radius:22px}body.ns-home .nh-group{margin-bottom:34px}body.ns-home .nh-group h1,body.ns-home .nh-group h2{font-size:16px;margin-bottom:15px}body.ns-home .nh-grid{grid-template-columns:1fr;gap:9px}body.ns-home .nh-card{min-height:100px;flex-direction:row;align-items:center;justify-content:flex-start;gap:15px;padding:18px;border-radius:17px}body.ns-home .nh-card::after{top:50%;right:19px;transform:translateY(-50%)}body.ns-home .nh-icon{width:52px;height:52px;flex-basis:52px}body.ns-home .nh-copy{padding-right:18px}body.ns-home .nh-copy strong{font-size:15px}body.ns-home .nh-copy small{font-size:11px}body.ns-home .ns-disclosure,body.ns-home .ns-footer-inner{width:calc(100% - 32px)}body.ns-app:not(.ns-home) .ns-tool-strip-inner{gap:7px}body.ns-app:not(.ns-home) .ns-tool-strip a{height:34px;min-height:34px;padding:0 12px;font-size:11px}body.ns-exp .rcs-main,body.ns-farm .rcs-main,body.ns-collection .rcs-main,body.ns-fish .rf-page,body.ns-fishing .rcs-main,body.ns-character .rcs-main,body.ns-title .rcs-main{padding-top:22px!important;padding-bottom:50px!important}body.ns-app .rcs-main :is(.card,.box,.rf-card),body.ns-app .rf-page :is(.rf-inventory,.rf-summary){border-radius:17px!important}}
@media(prefers-reduced-motion:reduce){body.ns-home .nh-card{transition:none}}

/* Tighter index proportions while keeping the three category groups. */
body.ns-home .nh-main{width:min(1080px,calc(100% - 48px));margin-top:26px;margin-bottom:46px;padding:35px 38px 30px;border-radius:26px}
body.ns-home .nh-group{margin-bottom:36px}
body.ns-home .nh-group h1,body.ns-home .nh-group h2{margin-bottom:15px;padding-bottom:12px}
body.ns-home .nh-grid{gap:10px}
body.ns-home .nh-card{min-height:143px;gap:11px;padding:18px 20px;border-radius:18px}
body.ns-home .nh-card::after{right:20px;top:16px;font-size:17px}
body.ns-home .nh-icon{width:48px;height:48px;flex-basis:48px;border-radius:13px}
body.ns-home .nh-copy strong{font-size:15px}
body.ns-home .nh-copy small{font-size:11px}
body.ns-home .ns-disclosure,body.ns-home .ns-footer-inner{width:min(1080px,calc(100% - 48px))}
@media(max-width:600px){body.ns-home .nh-main{width:calc(100% - 28px);margin:17px auto 32px;padding:23px 17px;border-radius:21px}body.ns-home .nh-group{margin-bottom:30px}body.ns-home .nh-card{min-height:88px;gap:12px;padding:14px 16px;border-radius:16px}body.ns-home .nh-icon{width:46px;height:46px;flex-basis:46px}body.ns-home .nh-card::after{right:16px;top:50%}}

/* 20260925 Studio Gray brand */
body.ns-app .ns-brand{gap:12px}
body.ns-app .ns-brand .ns-mark{display:block;width:36px;height:36px;object-fit:contain}
body.ns-app .ns-footer-brand .ns-mark{display:block;width:29px;height:29px;object-fit:contain}
@media(max-width:600px){body.ns-app .ns-brand{gap:8px}body.ns-app .ns-brand .ns-mark{width:29px;height:29px}}

/* Keep the shared header visible while scrolling every calculator page. */
html:has(body.ns-app){scroll-padding-top:148px}
body.ns-app .ns-site-header{position:sticky!important;top:0!important;z-index:950;background:var(--sn-bg)!important}
@media(max-width:600px){html:has(body.ns-app){scroll-padding-top:132px}body.ns-app .ns-site-header{box-shadow:0 1px 0 var(--sn-line)}}
