/* USAGI 1.2 — Actual functional layout based on the 5-rabbit AI character sheet. */
:root{--usagi-ink:#24384f;--usagi-muted:#746e75;--usagi-orange:#f58a36;--usagi-peach:#fff0e4;--usagi-pink:#f9cad5;--usagi-sky:#e9f4ff}
html{scroll-padding-top:90px}body{color:var(--usagi-ink)!important;background:radial-gradient(circle at 4% 0%,#fff4d8 0%,transparent 26%),radial-gradient(circle at 98% 35%,#ffe1eb 0%,transparent 35%),#fff9f3!important;font-family:system-ui,-apple-system,'Noto Sans JP',sans-serif!important}
body .topbar{padding:11px max(14px,calc((100% - 1200px)/2))!important;gap:10px!important;box-shadow:0 4px 16px #77534212!important;border-bottom:1px solid #efddd3!important;background:#fffaf5!important}
body .topbar .brand{font-size:19px!important;line-height:1.2!important;color:#213a54!important}
body .topbar .subbrand{font-size:9px!important;letter-spacing:.05em!important;color:#9d7b76!important}
body .ninja-mark{width:49px!important;height:49px!important;border-radius:16px!important;padding:2px!important;box-shadow:0 0 0 1px #f1d5c7!important;overflow:hidden!important;background:#fff7ed!important}
body .ninja-mark img{width:100%;height:100%;border-radius:13px;object-fit:cover}
body .topbar label{font-size:12px!important}body .topbar select{color:#24384f!important;background:#fff!important;border:1px solid #dfc8bc!important;border-radius:12px!important;min-width:115px!important}
body .topbar .btn-quiet{border:1px solid #eed9cc!important;background:#fff4ee!important;color:#794b41!important}
body main{max-width:1200px!important;padding:0 18px!important;margin:22px auto 42px!important}
body .panel{background:#fffdfa!important;color:#273d50!important;border:1px solid #eaded7!important;outline:0!important;border-radius:22px!important;padding:22px!important;box-shadow:0 8px 23px #6c4b4020!important;margin:0!important;overflow:hidden!important}
body .panel:before,body .panel:after{display:none!important}
body .panel .section-head{position:relative;z-index:1}body .panel .section-head h2{font-size:18px!important;color:#24384f!important;letter-spacing:.01em}
body .panel .section-head p{color:#897d78!important;font-size:12px!important}
body .panel label{font-size:13px!important;color:#31465b!important;font-weight:700!important;line-height:1.35!important}
body .panel input,body .panel select{font-size:16px!important;min-width:0!important;color:#203a52!important;border:1.5px solid #d9dfe5!important;background:#fff!important;border-radius:12px!important;padding:11px 12px!important;box-shadow:none!important;max-width:100%!important}
body .panel input:focus,body .panel select:focus{border-color:#ee9d6b!important;outline:3px solid #ffd4bf70!important}
body .btn{border-radius:13px!important;font-weight:750!important;min-height:43px!important;letter-spacing:.005em!important;box-shadow:none!important}
body .btn-primary{background:#f68b37!important;color:white!important;border:1px solid #ed8841!important;box-shadow:0 3px 0 #d87026!important}
body .btn-quiet-dark{background:#fff9f5!important;color:#4b4c60!important;border:1px solid #e4d9d5!important}
body .btn-danger{color:#b74f5b!important;background:#fff5f5!important;border:1px solid #efcaca!important}
body .hero{height:254px!important;min-height:254px!important;position:relative!important;display:block!important;background:linear-gradient(110deg,#fff3e4 0%,#fff5ee 50%,#ffe7ed 100%)!important;border:2px solid #f5c6bc!important;border-radius:26px!important;padding:0!important;box-shadow:0 12px 32px #b77c7a22!important;outline:none!important;overflow:hidden!important}
body .hero .hero-art,body .hero .hero-scenery,body .hero .anime-atmosphere,body .hero .anime-mascot,body .hero .hero-symbol,body .hero:before,body .hero:after{display:none!important}
.usagi-hero-copy{position:absolute;top:50%;left:5%;transform:translateY(-50%);z-index:2;width:52%;color:#21384f;text-shadow:none!important}.usagi-hero-pill{display:inline-block;padding:8px 14px;border-radius:999px;background:#fffaf2;color:#c27252;border:1px solid #f3d5c1;font-size:12px;font-weight:850}.usagi-hero-copy h1{font-size:clamp(25px,3.4vw,42px)!important;line-height:1.33!important;margin:12px 0!important;color:#253b56!important;font-weight:900!important}.usagi-hero-copy h1 em{color:#ed8548!important}.usagi-hero-copy p{color:#856f6d!important;font-size:13px!important;line-height:1.7!important;margin:0!important}
.usagi-hero-bunny{height:100%;width:48%;position:absolute;right:0;bottom:0;object-fit:cover;object-position:center 20%;border-radius:0 24px 24px 0;mask-image:linear-gradient(to right,transparent 0%,#000 25%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 25%)}
.usagi-friends{margin:17px 0 19px;border:1px solid #f0deda;border-radius:24px;padding:17px 18px;background:rgba(255,255,255,.85);box-shadow:0 4px 18px #ae806312}
.usagi-friends-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin-bottom:13px}.usagi-friends-title strong{font-weight:900;font-size:17px;color:#2e435a}.usagi-friends-title span{font-size:11px;color:#957d79}
.usagi-friends-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.usagi-friend{min-width:0;display:flex;align-items:center;flex-direction:column;border-radius:17px;border:1px solid #f1d8d0;background:linear-gradient(170deg,#fff7e7,#fffefa);padding:8px 7px 12px;overflow:hidden;text-align:center;box-shadow:inset 0 2px #ffffff85}
.usagi-friend img{display:block;width:100%;height:120px;object-fit:cover;object-position:center 37%;border-radius:12px;mix-blend-mode:multiply}
.usagi-friend strong{font-size:12px;font-weight:900;color:#4f4860;margin-top:7px;line-height:1.4}.usagi-friend span{font-size:10px;color:#8d8182;margin-top:3px}.usagi-friend.plan{background:linear-gradient(180deg,#edf9f0,#fff)}.usagi-friend.sleepy{background:linear-gradient(180deg,#f1edff,#fff)}.usagi-friend.happy{background:linear-gradient(180deg,#fff0ee,#fff)}.usagi-friend.fashion{background:linear-gradient(180deg,#fff0f5,#fff)}
body .quick-tabs{position:sticky!important;top:0!important;z-index:10!important;display:flex!important;gap:7px!important;padding:8px!important;border:1px solid #f1dcd2!important;background:#fffcf7ed!important;backdrop-filter:blur(12px)!important;border-radius:18px!important;box-shadow:0 4px 17px #84634514!important;margin:0 0 18px!important;outline:none!important}
body .quick-tabs a{border-radius:11px!important;color:#42546b!important;background:transparent!important;border:0!important;font-weight:800!important;min-height:40px!important;text-align:center!important}
body .quick-tabs a.selected,body .quick-tabs a:hover{background:#ffead7!important;color:#e57932!important}
body .workspace{border-top:0!important;margin:0 0 18px!important;background:#fffdfa!important}
body .workspace-head h2{font-size:19px!important;color:#233e55!important}body .cloud-tag{background:#eaf8ef!important;color:#247957!important;border:1px solid #c9eed5!important}
body .workspace .toolbar{gap:9px!important;margin-top:14px!important}
.usagi-live-preview{margin:0 0 20px;padding:14px 17px 18px;border-radius:22px;background:linear-gradient(115deg,#f8f1ff,#eff8ff 55%,#fff5e9);border:1px solid #e4dbe6;box-shadow:0 6px 18px #72585a12;position:relative;overflow:hidden}
.usagi-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}.usagi-preview-head div{display:flex;flex-direction:column;gap:3px}.usagi-preview-head b{font-size:18px;color:#35425f}.usagi-preview-head span{font-size:11px;color:#897b89}.usagi-preview-head img{width:86px;height:58px;object-fit:cover;object-position:center 38%;border-radius:14px}
.usagi-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.usagi-preview-box{border:1px solid #e2e9f0;border-radius:15px;padding:12px 14px;background:#fff;min-width:0}.usagi-preview-box span{color:#8c7f80;font-size:12px;font-weight:750;display:block;margin-bottom:6px}.usagi-preview-box strong{color:#283d59;font-size:clamp(18px,2.6vw,26px);letter-spacing:-.03em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.usagi-calc-heading{display:flex;align-items:center;justify-content:space-between;padding:15px 18px 10px;border-radius:22px 22px 0 0;background:#e8f5ff;border:1px solid #d9eaf8;border-bottom:0;overflow:hidden}.usagi-calc-heading small{color:#7289a0;font-size:10px;font-weight:850;letter-spacing:.1em}.usagi-calc-heading h2{font-size:24px;color:#25445f;margin:4px 0}.usagi-calc-heading p{color:#688196;margin:0;font-size:12px}.usagi-calc-heading img{width:102px;height:87px;object-fit:cover;object-position:center 33%;border-radius:15px}
.usagi-calc-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:16px;align-items:start;background:linear-gradient(180deg,#edf7ff,#fffaf5 14%);padding:17px 16px 18px;border:1px solid #d9eaf8;border-radius:0 0 22px 22px}
.usagi-calc-inputs{display:grid;gap:15px;min-width:0}.usagi-calc-output{min-width:0;position:sticky;top:84px}
body .usagi-calc-inputs .panel{box-shadow:0 3px 12px #8a68720b!important;background:#fff!important;padding:17px 18px!important;border:1px solid #e0e3e7!important}
body .usagi-calc-inputs .panel:nth-child(odd) {background:#fffdfa!important}
body .usagi-calc-inputs .section-head{margin-bottom:10px!important}
body .usagi-calc-inputs .section-head h2{font-size:17px!important}
body .field-grid{gap:9px 13px!important}body .field-grid label{min-width:0!important}body .field-grid input{max-width:100%!important}
body .subtotal{background:#fff0e3!important;border:1px solid #f3dccc!important;border-radius:12px!important;color:#4f5361!important}
body .subtotal strong,body .result-strip strong{color:#dc7b3f!important}
body .result-panel{background:linear-gradient(180deg,#fff6eb,#fffdf8)!important;color:#263c56!important;border:1px solid #f3dbc0!important;box-shadow:0 8px 23px #c27c4b1a!important}
body .result-panel .section-head h2{color:#273e55!important}
body .result-panel .section-head p,body .result-panel>.hint{color:#8a7f7a!important}
body .result-panel .main-result{background:linear-gradient(120deg,#ffead9,#fff7f1)!important;border:1px solid #f7d4ba!important;color:#264059!important}
body .main-result strong{color:#de7e37!important;font-size:clamp(27px,3vw,39px)!important}
body .result-panel .breakdown{border:1px solid #f1e1d8!important;color:#344356!important}
body .result-panel .metric{background:#edf6ff!important;border:1px solid #dcebf7!important;color:#3c526a!important}
body .result-panel .metric strong{color:#2661a0!important}
body .cost-analysis{background:#fff!important;outline:none!important;border-radius:16px!important}
body .actions-bottom{margin:12px 0 25px!important;display:flex!important;flex-wrap:wrap!important}
body #dashboardStart,body #snapshotPanel,body #adminPanel{margin:20px 0!important}
body #dashboardStart{background:linear-gradient(135deg,#fffdfb,#f9f5ff)!important}
body #snapshotPanel{background:linear-gradient(135deg,#fffefd,#f0f8ff)!important}
body #adminPanel{background:#fffdfb!important}
body .login-panel{max-width:500px!important;margin:32px auto 45px!important;text-align:center!important;padding:24px 27px!important;background:#fffcf8!important;border:1px solid #edddd3!important}
body .usagi-login-art{width:min(350px,100%)!important;max-width:100%!important;margin:0 auto!important}
body .usagi-login-art img{width:100%!important;height:auto!important;border-radius:20px;object-fit:cover!important;box-shadow:none!important;filter:none!important}
body .login-panel h1{color:#223b56!important;font-size:clamp(25px,6vw,32px)!important;margin:9px 0 0!important}
body .usagi-login-sub{color:#937469;font-size:13px;margin:5px 0 16px}body .login-panel .hint{line-height:1.65!important}
body .usagi-login-babies{display:flex;gap:18px;justify-content:center;align-items:center;margin-top:18px;font-size:24px}
body .ninja-splash{background:radial-gradient(ellipse at 50% 35%,#fffdfa 0%,#ffe8e6 58%,#e6f5ff 100%)!important}
body .splash-art{background:#fff8f4!important}body .splash-art img{object-fit:contain!important;background:#fff9f3!important}
body footer{padding:28px 18px!important;color:#a18487!important;font-size:12px!important}
@media(max-width:850px){body main{padding:0 12px!important} .usagi-calc-grid{grid-template-columns:1fr!important}.usagi-calc-output{position:static!important}body .panel{padding:17px!important}.usagi-friend img{height:100px}}
@media(max-width:600px){body main{padding:0 11px!important;margin-top:14px!important}.topbar .brand-wrap{flex:1 1 100%!important}body .topbar .theme-control,body .topbar .language-control{min-width:0!important;flex:1!important}body .topbar .theme-control select,body .topbar .language-control select{min-width:0!important;width:100%!important;max-width:none!important;font-size:12px!important}body .hero{height:206px!important;min-height:206px!important;border-radius:21px!important} .usagi-hero-copy{left:5%;width:54%}.usagi-hero-copy h1{font-size:clamp(23px,6.3vw,31px)!important}.usagi-hero-pill{font-size:9px;padding:6px 9px}.usagi-hero-copy p{font-size:10px!important}.usagi-hero-bunny{width:58%}.usagi-friends{padding:13px 10px!important;margin:12px 0 13px!important}.usagi-friends-grid{grid-template-columns:repeat(5,128px);overflow-x:auto;scroll-snap-type:x mandatory;gap:9px;padding-bottom:6px;scrollbar-width:thin}.usagi-friend{scroll-snap-align:start}.usagi-friend img{height:88px}.usagi-friend strong{font-size:11px}.usagi-friend span{font-size:9px}.usagi-friends-title strong{font-size:15px}.usagi-friends-title span{font-size:10px}body .quick-tabs{gap:3px!important;padding:6px!important}body .quick-tabs a{font-size:12px!important;padding:7px 3px!important;min-width:0!important}body .workspace{padding:15px!important}body .workspace .toolbar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}body .workspace .toolbar .btn{font-size:11px!important;min-height:53px!important} .usagi-preview-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.usagi-preview-box{padding:10px 7px}.usagi-preview-box span{font-size:10px}.usagi-preview-box strong{font-size:clamp(14px,3.8vw,19px)!important}.usagi-preview-head img{width:65px;height:50px}.usagi-calc-grid{padding:10px;gap:11px}.usagi-calc-heading{padding:10px 14px}.usagi-calc-heading h2{font-size:21px}.usagi-calc-heading p{font-size:11px}.usagi-calc-heading img{width:75px;height:75px}.usagi-calc-inputs{gap:10px!important}body .usagi-calc-inputs .panel{padding:15px 13px!important}.field-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}.field-grid label{font-size:12px!important}body .result-panel{padding:15px!important}.usagi-login-art{max-width:295px!important}}
@media(max-width:360px){.usagi-preview-grid{grid-template-columns:1fr!important}.usagi-preview-box{display:flex;justify-content:space-between;align-items:center}.usagi-hero-copy h1{font-size:22px!important}}
@media(prefers-reduced-motion:reduce){body .ninja-splash:before,body .splash-art{animation:none!important}}
/* Override old Shinobi theme wallpaper layers in data cards so labels stay crisp. */
body[data-theme] .panel,body[data-theme] .panel:not(.result-panel){background-image:none!important}
body[data-theme] .hero{background-image:linear-gradient(110deg,#fff3e4 0%,#fff5ee 50%,#ffe7ed 100%)!important}
body[data-theme] .result-panel{background-image:linear-gradient(180deg,#fff6eb,#fffdf8)!important}