.ui-icon{display:block;width:1.25em;height:1.25em;pointer-events:none}
html,body{max-width:100%;overflow-x:hidden}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable="true"]{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none}
.nav-item .ui-icon{width:20px;height:20px}
.sidebar{overflow:hidden}
.category-icon .ui-icon,.activity-icon .ui-icon{width:20px;height:20px}
.topbar.is-hidden{display:none}
.avatar{display:grid;place-items:center;cursor:pointer;font-weight:700}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#toast{left:50%;right:auto;bottom:24px;max-width:calc(100% - 32px);pointer-events:none;text-align:center;transform:translate(-50%,15px)}
#toast.show{transform:translate(-50%,0)}
.money-input>span{font-size:14px;font-weight:700;margin-left:8px}
.account-status{font-size:11px;color:var(--muted);line-height:1.6}
.account-status strong{color:var(--ink)}
.account-role{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:999px;background:#edf0ff;color:var(--mint-dark);font-size:9px;font-weight:700}
.account-error{min-height:18px;color:#bd5c4c;font-size:11px}
.account-delete{color:#a44f4f;border-color:#efcece}.account-delete:hover{background:#fff4f4}
.password-warning{margin-top:-6px;font-size:10px;line-height:1.55;color:#a35e45;background:#fff5ed;border-radius:9px;padding:9px 10px}
.account-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.secondary-btn{border:1px solid var(--line);background:#fff;padding:11px 14px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer}
.auth-fields{display:grid;gap:14px}
.auth-fields[hidden],.account-session[hidden]{display:none}
.sync-state{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted)}
.sync-state::before{content:"";width:7px;height:7px;border-radius:50%;background:#a8b2ae}
.sync-state.online::before{background:var(--mint-dark)}
.sync-state.syncing::before{background:#e5a23b}
body[data-active-view="sheets"] .content{max-width:none;padding:16px 18px 24px}
body[data-active-view="sheets"] .sheet-heading{margin:0 0 10px}
body[data-active-view="sheets"] .spreadsheet-wrap{max-height:calc(100dvh - 205px)!important}
.sheet-zoom{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}.sheet-zoom button{border:0!important;border-radius:0!important;padding:7px 9px!important}.sheet-zoom b{min-width:42px;text-align:center;font-size:9px;color:var(--muted)}

/* 独自のブルー・ラベンダー配色。銀行系の深緑から印象を分離する。 */
:root{--ink:#24324a;--muted:#7b8495;--line:#e2e5ec;--paper:#f7f7f4;--mint:#aebbf5;--mint-dark:#5267c9;--coral:#ee9478;--shadow:0 12px 35px rgba(36,50,74,.08)}
.nav-item:hover,.nav-item.active,.template-options input:checked+span,.format-toolbar button:hover,.format-toolbar button.active,.fill-control:hover,.sim-result{background:#edf0ff}
.trend{background:#eef0ff}.status-pill{background:#eef0ff;color:#4d5fb7}.bar{background:#3a4862}.balance-card .subtle,.balance-meta{color:#b9c2d2}.safe-box{background:#f2f3f8}
body:not([data-active-view="dashboard"]) .content{padding-top:14px}
body:not([data-active-view="dashboard"]) .view.active>.section-heading:first-child{margin-top:0}
#financesView .section-heading{margin-top:18px}
.mini-bars{grid-template-columns:minmax(44px,auto) minmax(80px,1fr) auto!important;gap:9px 12px!important}
.mini-bars>div:first-child,.mini-bars>div:nth-child(3){display:contents!important}.mini-bars>div span{grid-column:1}.mini-bars>div b{grid-column:3;text-align:right}.mini-bars>.bar{grid-column:2}
.sheet-heading-actions{display:flex;gap:8px;align-items:center}.sheet-cell{overflow-wrap:anywhere;word-break:break-word}.sheet-toolbar h2,.sheet-toolbar p,.section-heading h2,.section-heading p{overflow-wrap:anywhere}
#assetChart polyline,#assetChart circle{stroke:var(--mint-dark)}#assetChart stop:first-child{stop-color:var(--mint)}
.salary-summary{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}.payday-picker{font-size:9px;font-weight:700}.payday-picker>span{display:flex;align-items:center;gap:5px;margin-top:4px}.payday-picker input{width:66px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:8px}.payday-value{font-size:15px!important}
.carryover-panel{margin-bottom:18px}.carryover-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.carryover-head h2{font-size:18px}.carryover-head p{margin-top:5px;color:var(--muted);font-size:11px}.carryover-mode{flex:none;border-radius:999px;padding:6px 10px;font-size:10px;font-weight:700;background:#f0f2f5;color:var(--muted)}.carryover-mode.manual{background:#fff1e8;color:#a35e45}.carryover-mode.auto{background:#edf0ff;color:var(--mint-dark)}.carryover-controls{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;align-items:stretch;gap:10px}.carryover-controls label{display:flex;align-items:center;min-width:0;border:1px solid var(--line);border-radius:11px;background:#fff;overflow:hidden}.carryover-controls input{width:100%;min-width:0;border:0;background:transparent;padding:12px 4px 12px 14px;text-align:right;font-size:18px;font-weight:700;outline:none}.carryover-controls label:focus-within{border-color:var(--mint-dark);box-shadow:0 0 0 3px #edf0ff}.carryover-controls label>span{padding:0 14px 0 7px;font-size:12px;font-weight:700}.carryover-note{min-height:18px;margin-top:10px;color:var(--muted);font-size:10px;line-height:1.6}

@media(min-width:761px) and (max-width:1100px){
  .sidebar{width:96px;padding:22px 9px 16px;align-items:stretch}
  .brand{justify-content:center}.brand-name{display:none}.brand-mark{width:42px;height:42px}
  .main-nav{margin-top:34px;gap:6px}
  .main-nav .nav-item,.sidebar-foot .nav-item{display:grid;grid-template-columns:1fr;place-items:center;gap:5px;padding:10px 3px;text-align:center;font-size:9px;line-height:1.25}
  .main-nav .nav-item>span,.sidebar-foot .nav-item>span{width:auto}
  .main-nav .nav-item .ui-icon,.sidebar-foot .nav-item .ui-icon{width:23px;height:23px}
  .sidebar-foot{gap:7px}.safe-box{display:none}
  main{margin-left:96px}
  .topbar{height:92px;padding:20px 24px}
  .content{padding:24px 24px 48px}
  body[data-active-view="sheets"] .content{padding-inline:12px}
}

@media(max-width:760px){
  body,.app-shell{height:100dvh;overflow:hidden}
  main{height:calc(100dvh - 96px - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable}
  .fab{display:none!important}
  .app-shell .mobile-nav{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));height:calc(96px + env(safe-area-inset-bottom));padding:7px 8px calc(10px + env(safe-area-inset-bottom));gap:0;overflow:visible!important;justify-content:unset;box-shadow:0 -8px 25px rgba(36,50,74,.08)}
  .app-shell .mobile-nav button{position:relative;width:100%;min-width:0!important;height:78px;align-content:center;justify-content:center;gap:6px;border-radius:15px;font-size:20px;cursor:pointer;user-select:none;pointer-events:auto;transform:none}
  .mobile-nav button i{display:grid;place-items:center;font-style:normal}
  .mobile-nav button .ui-icon{width:31px;height:31px}
  .mobile-nav button span{font-size:11px;font-weight:700;line-height:1}
  .mobile-nav button>i,.mobile-nav button>span{transform:translateY(-3px)}
  .mobile-nav button.active{background:transparent;color:var(--muted)}
  .mobile-nav button:active{transform:none;background:transparent;color:var(--muted)}
  #toast{bottom:calc(110px + env(safe-area-inset-bottom))}
  .content{padding-bottom:28px}
  main:has(.topbar.is-hidden) .content{padding-top:8px}
  body[data-active-view="sheets"] .content{padding:10px 8px 18px}
  body[data-active-view="sheets"] .spreadsheet-wrap{max-height:calc(100dvh - 205px)!important;border-radius:10px}
  .carryover-head{align-items:center}.carryover-controls{grid-template-columns:1fr 1fr}.carryover-controls label{grid-column:1/-1}.carryover-controls button{white-space:normal;padding-inline:10px}
}

@media(max-width:390px){
  .mobile-nav{padding-inline:1px}
  .mobile-nav button span{font-size:10px}
  .mobile-nav button .ui-icon{width:29px;height:29px}
}

/* Protected tabs remain visible while their operation area waits for login. */
body[data-authenticated="false"] .view.active:not(#dashboardView):not(#academicHomeView){position:relative;min-height:clamp(360px,62dvh,720px)}
body[data-authenticated="false"] .view.active:not(#dashboardView):not(#academicHomeView)>*{visibility:hidden;pointer-events:none}
body[data-authenticated="false"] .view.active:not(#dashboardView):not(#academicHomeView)::before{content:"ログイン後に使用可能です";position:absolute;inset:0;display:grid;place-items:center;padding:30px;border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--muted);font-size:clamp(15px,2vw,20px);font-weight:700;text-align:center;box-shadow:var(--shadow);visibility:visible}