/* /itokyo_client_portal/static/src/css/tokens.css */
 :root{--red-50: #FFF1F1; --red-100: #FFDEDE; --red-200: #FCB8B8; --red-300: #F58A8A; --red-400: #E95757; --red-500: #D7263D; --red-600: #BC1A2F; --red-700: #951322; --red-800: #6E0E19; --navy-50: #F4F6FB; --navy-100: #E4E8F2; --navy-200: #C2CADD; --navy-300: #95A1BE; --navy-400: #5F6E92; --navy-500: #324672; --navy-600: #1F2F55; --navy-700: #14213D; --navy-800: #0D172A; --navy-900: #060B17; --gold-50: #FDF8EC; --gold-100: #F9EDC8; --gold-200: #F1D88A; --gold-300: #E6C25A; --gold-400: #C9A23A; --gold-500: #A48426; --gold-600: #7E6418; --neutral-0: #FFFFFF; --neutral-50: #FAFAF8; --neutral-100: #F4F4F1; --neutral-200: #E7E7E2; --neutral-300: #D2D2CC; --neutral-400: #A5A5A0; --neutral-500: #6A6A62; --neutral-600: #535351; --neutral-700: #36363A; --neutral-800: #1F1F22; --neutral-900: #0F0F11; --success-50: #ECF8F1; --success-500: #1F9D55; --success-700: #136B3A; --warning-50: #FFF6E5; --warning-500: #E29C2A; --warning-700: #8F5B0E; --info-50: #EAF2FB; --info-500: #2563C4; --info-700: #173E80; --error-50: #FDECEC; --error-500: #D7263D; --error-700: #8A1224; --bg-page: var(--neutral-50); --bg-surface: var(--neutral-0); --bg-surface-alt: var(--neutral-100); --bg-inverse: var(--navy-700); --bg-ink: var(--navy-900); --fg-primary: var(--navy-900); --fg-secondary: var(--neutral-700); --fg-muted: var(--neutral-500); --fg-on-inverse: var(--neutral-50); --fg-on-inverse-muted: rgba(255,255,255,0.72); --accent-primary: var(--red-500); --accent-primary-hover: var(--red-600); --accent-gold: var(--gold-400); --border-subtle: var(--neutral-200); --border-default: var(--neutral-300); --border-strong: var(--neutral-700); --font-display: 'Outfit', 'Noto Sans JP', system-ui, -apple-system, Segoe UI, sans-serif; --font-body: 'Plus Jakarta Sans', 'Noto Sans JP', system-ui, -apple-system, Segoe UI, sans-serif; --font-jp: 'Noto Sans JP', 'Plus Jakarta Sans', system-ui, sans-serif; --font-jp-serif: 'Noto Serif JP', Georgia, serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 17px; --text-lg: 19px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-4xl: 48px; --text-5xl: 64px; --text-6xl: 84px; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-wide: 0.08em; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 6px 16px -4px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 18px 40px -12px rgba(15, 23, 42, 0.18), 0 6px 12px rgba(15, 23, 42, 0.06); --shadow-xl: 0 32px 64px -20px rgba(15, 23, 42, 0.26); --shadow-ring: 0 0 0 4px rgba(215, 38, 61, 0.15); --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.6, 0, 0.4, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 360ms; --container-max: 1240px; --container-pad: 24px;}html, body{background: var(--bg-page); color: var(--fg-primary); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}h1, h2, h3, h4, h5, h6{font-family: var(--font-display); color: var(--fg-primary); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); font-weight: 700; margin: 0; text-wrap: balance;}h1{font-size: clamp(40px, 5vw, var(--text-5xl)); font-weight: 700;}h2{font-size: clamp(30px, 3.5vw, var(--text-3xl));}h3{font-size: var(--text-2xl); font-weight: 600;}h4{font-size: var(--text-xl); font-weight: 600;}h5{font-size: var(--text-lg); font-weight: 600;}h6{font-size: var(--text-base); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase;}p{margin: 0; text-wrap: pretty;}.eyebrow{font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-primary);}.jp-accent{font-family: var(--font-jp); font-size: var(--text-sm); font-weight: 500; color: var(--accent-primary); letter-spacing: 0.12em;}.container{max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad);}.hinomaru{display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--accent-primary); vertical-align: middle; margin: 0 0.18em; transform: translateY(-0.08em);}*:focus-visible{outline: none; box-shadow: var(--shadow-ring); border-radius: inherit;}

/* /itokyo_client_portal/static/src/css/portal.css */
 *{box-sizing: border-box; -webkit-tap-highlight-color: transparent;}.stage{min-height: 100vh; background: radial-gradient(800px 500px at 18% 12%, rgba(215,38,61,0.06), transparent 60%), radial-gradient(700px 500px at 82% 88%, rgba(201,162,58,0.07), transparent 60%), var(--neutral-100); display: flex; align-items: center; justify-content: center; padding: 28px 16px 28px; font-family: var(--font-body); color: var(--fg-primary);}.screen{width: 100%; min-height: 100%; background: var(--neutral-50); position: relative; display: flex; flex-direction: column; font-size: 14.5px;}.screen.dark{background: var(--navy-900); color: var(--fg-on-inverse);}.screen-pad-top{height: 4px;}.app-header{position: sticky; top: 0; z-index: 30; background: rgba(250, 250, 248, 0.92); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--border-subtle); padding: 10px 18px;}.app-header.dark{background: rgba(13,23,42,0.78); border-bottom-color: rgba(255,255,255,0.06);}.ah-row{display: flex; align-items: center; justify-content: space-between; gap: 10px;}.ah-back{width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; color: var(--navy-700); cursor: pointer;}.ah-title{flex: 1; min-width: 0; font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; text-align: center;}.ah-title small{display: block; font-family: var(--font-jp); font-size: 10.5px; font-weight: 500; color: var(--accent-primary); letter-spacing: 0.14em; margin-bottom: 1px;}.ah-action{width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; color: var(--navy-700); cursor: pointer; position: relative;}.ah-action .dot{position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--red-500); border: 1.5px solid var(--neutral-50);}.course-pill{display: inline-flex; align-items: center; gap: 6px; background: var(--navy-900); color: #fff; padding: 4px 10px 4px 4px; border-radius: 999px; font-family: var(--font-display); font-size: 11.5px; font-weight: 600; white-space: nowrap;}.course-pill .lvl{background: var(--red-500); color: #fff; font-size: 9.5px; font-weight: 700; padding: 2.5px 6px; border-radius: 999px; letter-spacing: 0.06em;}.scroll{flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px 110px; display: flex; flex-direction: column; gap: 14px;}.scroll > *{flex-shrink: 0;}.scroll.dense{gap: 10px; padding: 14px 14px 108px;}.scroll.airy{gap: 18px; padding: 18px 18px 116px;}.tabbar{position: absolute; left: 12px; right: 12px; bottom: 34px; z-index: 40; height: 64px; background: rgba(255,255,255,0.78); border-radius: 22px; border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 1px 1px rgba(15,23,42,0.04), 0 16px 36px -10px rgba(15,23,42,0.22); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 6px;}.tabbar.dark{background: rgba(20,33,61,0.78); border-color: rgba(255,255,255,0.06);}.tab{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: none; background: transparent; color: var(--navy-600); font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; border-radius: 16px; transition: color 160ms var(--ease-out); position: relative;}.tab svg{width: 22px; height: 22px;}.tab.active{color: var(--red-500);}.tab.active::before{content: ''; position: absolute; top: 4px; width: 22px; height: 3px; border-radius: 2px; background: var(--red-500);}.tab .count{position: absolute; top: 4px; right: 16px; background: var(--red-500); color: #fff; font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 1.5px solid rgba(255,255,255,0.9);}.topnav{display: flex; gap: 6px; padding: 6px 12px 0; overflow-x: auto; scrollbar-width: none; background: var(--bg-page); border-bottom: 1px solid var(--border-subtle);}.topnav::-webkit-scrollbar{display: none;}.topnav .tn{flex: 0 0 auto; background: transparent; border: none; font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--navy-600); padding: 10px 12px 12px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;}.topnav .tn.active{color: var(--navy-900); border-bottom-color: var(--red-500);}.drawer-overlay{position: absolute; inset: 0; z-index: 60; background: rgba(13,23,42,0.4); backdrop-filter: blur(2px); animation: fade 180ms var(--ease-out);}.drawer{position: absolute; top: 0; left: 0; bottom: 0; z-index: 65; width: 78%; background: #fff; border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; animation: drawerIn 220ms var(--ease-out);}@keyframes drawerIn{from{transform: translateX(-100%);}to{transform: translateX(0);}}@keyframes fade{from{opacity: 0;}to{opacity: 1;}}.card{background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-xs);}.card.pad-tight{padding: 12px;}.card.flush{padding: 0; overflow: hidden;}.card.dark{background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-700) 100%); color: #fff; border: none; position: relative; overflow: hidden;}.card.dark h1, .card.dark h2, .card.dark h3, .card.dark h4, .card.dark h5, .card.dark h6{color: #fff;}.card.dark::after{content: ''; position: absolute; top: -120px; right: -100px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(215,38,61,0.55) 0%, rgba(215,38,61,0) 65%); pointer-events: none;}.card.feature{background: var(--bg-surface); position: relative; overflow: hidden;}.card.feature::before{content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--red-500), var(--gold-400));}.card-head{display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px;}.card-head h3{font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -0.005em; color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;}.card-head .link{flex-shrink: 0; white-space: nowrap;}.card-head .link{font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--red-500); text-decoration: none; background: none; border: none; cursor: pointer;}.ktile{width: 40px; height: 40px; border-radius: 11px; background: var(--navy-900); color: var(--gold-300); font-family: var(--font-jp-serif); font-size: 19px; font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}.ktile.red{background: var(--red-50); color: var(--red-600);}.ktile.gold{background: var(--gold-50); color: var(--gold-600);}.ktile.navy{background: var(--navy-50); color: var(--navy-700);}.ktile.success{background: var(--success-50); color: var(--success-700);}.ktile.info{background: var(--info-50); color: var(--info-700);}.ktile.sm{width: 32px; height: 32px; font-size: 15px; border-radius: 9px;}.ktile.lg{width: 48px; height: 48px; font-size: 22px; border-radius: 13px;}.bd{display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.02em; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);}.bd .dot{width: 6px; height: 6px; border-radius: 50%;}.bd.due{background: var(--warning-50); color: var(--warning-700);}.bd.due .dot{background: var(--warning-500);}.bd.live{background: var(--success-50); color: var(--success-700);}.bd.live .dot{background: var(--success-500);}.bd.over{background: var(--error-50); color: var(--error-700);}.bd.over .dot{background: var(--error-500);}.bd.info{background: var(--info-50); color: var(--info-700);}.bd.info .dot{background: var(--info-500);}.bd.flat{background: var(--neutral-100); color: var(--fg-secondary);}.bd.done{background: var(--success-50); color: var(--success-700);}.bd.done .dot{background: var(--success-500);}.bd.gold{background: var(--gold-50); color: var(--gold-600);}.card.dark .bd.gold, .nc .bd.gold{background: rgba(230,194,90,0.18); color: var(--gold-300); box-shadow: inset 0 0 0 1px rgba(230,194,90,0.45);}.row{display: flex; align-items: center; gap: 12px; padding: 10px 0;}.row + .row{border-top: 1px solid var(--border-subtle);}.row .body{flex: 1; min-width: 0;}.row .body b{font-family: var(--font-display); font-size: 13.5px; font-weight: 600; display: block; line-height: 1.3;}.row .body > span{font-size: 12px; color: var(--fg-muted); display: block; margin-top: 2px; line-height: 1.4;}.row .end{display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0;}.row .chev{color: var(--neutral-400); flex-shrink: 0;}.brow{display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-surface); text-align: left; width: 100%; cursor: pointer; transition: border-color 160ms;}.brow:hover, .brow:active{border-color: var(--border-default);}.brow .body{flex: 1; min-width: 0;}.brow .body b{font-family: var(--font-display); font-size: 13.5px; font-weight: 600; display: block; line-height: 1.3; color: var(--navy-900);}.brow .body > span{font-size: 11.5px; color: var(--fg-muted); display: block; margin-top: 2px; line-height: 1.4;}.brow .end{display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0;}.empty{padding: 36px 18px; text-align: center; color: var(--fg-muted);}.empty .glyph{font-family: var(--font-jp-serif); font-size: 38px; color: var(--neutral-300); margin-bottom: 8px;}.empty h4{font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--navy-700); margin-bottom: 4px;}.empty p{font-size: 13px; line-height: 1.5; max-width: 220px; margin: 0 auto;}.bar{height: 6px; background: var(--neutral-100); border-radius: 999px; overflow: hidden;}.bar i{display: block; height: 100%; background: linear-gradient(90deg, var(--red-500), var(--gold-400)); border-radius: 999px; transition: width 360ms var(--ease-out);}.bar.success i{background: var(--success-500);}.bar.warn i{background: var(--warning-500);}.bar.error i{background: var(--error-500);}.btn{display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-size: 14px; font-weight: 600; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--navy-900); cursor: pointer; text-decoration: none; transition: transform 160ms, box-shadow 160ms;}.btn:hover{box-shadow: var(--shadow-sm);}.btn:active{transform: translateY(1px);}.btn.primary{background: var(--red-500); border-color: var(--red-500); color: #fff; box-shadow: 0 8px 22px -8px rgba(215,38,61,0.45);}.btn.primary:hover{background: var(--red-600); border-color: var(--red-600);}.btn.dark{background: var(--navy-900); border-color: var(--navy-900); color: #fff;}.btn.ghost{background: transparent;}.btn.full{width: 100%;}.btn.sm{padding: 7px 13px; font-size: 12.5px;}.chips{display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;}.chips::-webkit-scrollbar{display: none;}.chip{flex: 0 0 auto; background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--navy-700); font-family: var(--font-display); font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;}.chip.active{background: var(--red-500); color: #fff; border-color: var(--red-500); box-shadow: 0 4px 12px -4px rgba(215,38,61,0.45);}.chip .ct{opacity: 0.6; margin-left: 4px;}.chip.active .ct{opacity: 0.92;}.seg{display: inline-flex; background: var(--neutral-100); border-radius: 10px; padding: 3px; width: 100%;}.seg button{flex: 1; border: none; background: transparent; font-family: var(--font-display); font-size: 12.5px; font-weight: 600; padding: 8px 10px; border-radius: 8px; color: var(--fg-secondary); cursor: pointer; white-space: nowrap;}.seg button.active{background: #fff; color: var(--navy-900); box-shadow: var(--shadow-xs);}.greet{display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px;}.greet .jp{font-family: var(--font-jp); font-size: 11px; font-weight: 500; color: var(--red-500); letter-spacing: 0.16em; margin-bottom: 4px; display: block;}.greet h1{font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--navy-900);}.greet h1 em{font-style: normal; color: var(--red-500);}.greet .sub{font-size: 13px; color: var(--fg-secondary); margin-top: 6px; line-height: 1.4;}.greet .av{width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, var(--red-500), var(--gold-400)); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}.stats2{display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}.stats4{display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}.stat{background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; position: relative;}.stat .lab{font-family: var(--font-display); font-size: 10px; font-weight: 700; color: var(--fg-muted); letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}.stat .ic{width: 18px; height: 18px; border-radius: 6px; background: var(--red-50); color: var(--red-500); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 10px;}.stat .ic.gold{background: var(--gold-50); color: var(--gold-600);}.stat .ic.navy{background: var(--navy-50); color: var(--navy-700);}.stat .ic.warn{background: var(--warning-50); color: var(--warning-700);}.stat .ic.success{background: var(--success-50); color: var(--success-700);}.stat .ic.error{background: var(--error-50); color: var(--error-700);}.stat .val{font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--navy-900); margin-top: 2px;}.stat .val sub{font-size: 12px; font-weight: 500; color: var(--fg-muted); letter-spacing: 0; margin-left: 1px;}.stat .delta{font-size: 11px; font-weight: 600; color: var(--success-700); margin-top: 2px;}.stat .delta.warn{color: var(--warning-700);}.stat .delta.muted{color: var(--fg-muted);}.stat .delta.error{color: var(--error-700);}.nc{background: linear-gradient(155deg, var(--navy-900) 0%, var(--navy-700) 100%); border-radius: 18px; padding: 18px; color: #fff; position: relative; overflow: hidden;}.nc::before{content: ''; position: absolute; top: -60px; right: -50px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(215,38,61,0.55), rgba(215,38,61,0) 65%);}.nc .jp{font-family: var(--font-jp); font-size: 10.5px; font-weight: 500; color: var(--gold-300); letter-spacing: 0.18em; margin-bottom: 6px; position: relative; z-index: 2;}.nc h2{font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 12px; position: relative; z-index: 2; text-wrap: balance; color: #fff;}.nc .meta{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; row-gap: 8px; font-size: 11.5px; color: rgba(255,255,255,0.65); margin-bottom: 16px; position: relative; z-index: 2;}.nc .meta b{display: block; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 12.5px;}.nc .actions{display: flex; gap: 8px; position: relative; z-index: 2;}.nc .join{background: var(--red-500); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 13px; border: none; border-radius: 999px; padding: 10px 18px; cursor: pointer; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 8px 22px -8px rgba(215,38,61,0.6);}.nc .later{background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.18); font-family: var(--font-display); font-weight: 600; font-size: 13px; border-radius: 999px; padding: 10px 14px; cursor: pointer;}.nc.live::after{content: 'LIVE'; position: absolute; top: 14px; right: 14px; background: var(--red-500); color: #fff; font-family: var(--font-display); font-size: 9.5px; font-weight: 800; letter-spacing: 0.15em; padding: 3px 7px; border-radius: 4px; z-index: 3;}.sec-label{font-family: var(--font-display); font-size: 10.5px; font-weight: 700; color: var(--fg-muted); letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 4px 0; display: flex; justify-content: space-between; align-items: center;}.sec-label .link{font-size: 12px; font-weight: 600; color: var(--red-500); text-transform: none; letter-spacing: 0; background: none; border: none; cursor: pointer; text-decoration: none;}.ring-wrap{display: flex; align-items: center; gap: 14px;}.ring{position: relative; width: 92px; height: 92px; flex-shrink: 0;}.ring svg{transform: rotate(-90deg);}.ring .val{position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--navy-900);}.ring .val small{font-size: 10px; font-weight: 600; color: var(--fg-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 1px;}.announce{background: linear-gradient(135deg, var(--gold-50) 0%, var(--red-50) 100%); border: 1px solid var(--gold-200); border-radius: 14px; padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start;}.announce .ktile{background: var(--gold-100); color: var(--gold-600);}.announce .body{flex: 1;}.announce .body b{font-family: var(--font-display); font-size: 13px; font-weight: 700; display: block; color: var(--navy-900);}.announce .body > span{font-size: 12px; color: var(--fg-secondary); display: block; margin-top: 2px; line-height: 1.4;}.announce .x{background: none; border: none; color: var(--fg-muted); cursor: pointer; font-size: 16px; padding: 0 2px;}.mat{background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: border-color 160ms;}.mat:hover{border-color: var(--border-default); box-shadow: var(--shadow-sm);}.mat .top{display: flex; justify-content: space-between; align-items: flex-start;}.mat .doc{width: 40px; height: 40px; border-radius: 11px; background: var(--red-50); color: var(--red-500); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em;}.mat .doc.mp3{background: var(--gold-50); color: var(--gold-600);}.mat .doc.doc{background: var(--navy-50); color: var(--navy-700);}.mat .doc.mp4{background: var(--info-50); color: var(--info-700);}.mat h4{font-family: var(--font-display); font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; color: var(--navy-900); margin: 2px 0 1px;}.mat .meta{font-size: 12px; color: var(--fg-muted);}.mat .foot{display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border-subtle);}.mat .foot .open{background: none; border: none; color: var(--red-500); font-family: var(--font-display); font-size: 12.5px; font-weight: 600; cursor: pointer;}.classcard{background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 14px; display: flex; align-items: center; gap: 12px; position: relative;}.classcard.live{border-color: var(--red-200); background: linear-gradient(0deg, var(--red-50) 0%, #fff 60%);}.classcard.cancelled{opacity: 0.55;}.classcard .when{width: 56px; flex-shrink: 0; text-align: center; border-right: 1px dashed var(--border-subtle); padding-right: 12px;}.classcard .when b{font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--navy-900); display: block; line-height: 1; margin-bottom: 2px;}.classcard .when > span{font-family: var(--font-display); font-size: 10px; font-weight: 600; color: var(--fg-muted); letter-spacing: 0.06em; text-transform: uppercase;}.classcard .info{flex: 1; min-width: 0;}.classcard .info b{font-family: var(--font-display); font-size: 13.5px; font-weight: 600; display: block; color: var(--navy-900); line-height: 1.3;}.classcard .info > span{font-size: 11.5px; color: var(--fg-muted); display: block; margin-top: 3px;}.classcard .info .topic{font-style: italic; color: var(--navy-700);}.modal-overlay{position: absolute; inset: 0; z-index: 70; background: rgba(13,23,42,0.55); backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; animation: fade 200ms var(--ease-out);}.modal{width: 100%; background: #fff; border-radius: 24px 24px 0 0; padding: 18px 18px 28px; max-height: 85%; overflow-y: auto; animation: sheetIn 280ms var(--ease-out); position: relative;}.modal .grab{width: 38px; height: 5px; border-radius: 4px; background: var(--neutral-300); margin: 0 auto 14px;}.modal h3{font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px;}.modal .sub{color: var(--fg-secondary); font-size: 13px; margin-bottom: 16px;}@keyframes sheetIn{from{transform: translateY(100%);}to{transform: translateY(0);}}.field{display: flex; flex-direction: column; gap: 6px;}.field label{font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--fg-muted); letter-spacing: 0.1em; text-transform: uppercase;}.field input, .field textarea, .field select{font-family: var(--font-body); font-size: 14.5px; padding: 11px 12px; border-radius: 10px; border: 1.5px solid var(--border-subtle); background: var(--bg-surface); color: var(--navy-900); outline: none; transition: border-color 160ms, box-shadow 160ms;}.field input:focus, .field textarea:focus, .field select:focus{border-color: var(--red-500); box-shadow: var(--shadow-ring);}.field textarea{resize: vertical; min-height: 80px;}.field .hint{font-size: 11.5px; color: var(--fg-muted);}.upload{border: 1.5px dashed var(--border-default); border-radius: 12px; padding: 18px 14px; text-align: center; background: var(--neutral-50); cursor: pointer;}.upload b{font-family: var(--font-display); font-size: 13px; font-weight: 600; display: block; color: var(--navy-900);}.upload span{font-size: 11.5px; color: var(--fg-muted);}.upload.dropped{border-style: solid; border-color: var(--success-500); background: var(--success-50);}.score{display: flex; align-items: center; justify-content: space-between; padding: 10px 0; gap: 12px;}.score + .score{border-top: 1px solid var(--border-subtle);}.score b{font-family: var(--font-display); font-size: 13.5px; font-weight: 600;}.score .pts{font-family: var(--font-mono); font-size: 13px; color: var(--navy-900); font-weight: 600;}.score .pts em{font-style: normal; color: var(--fg-muted); font-weight: 500;}.msg-thread{display: flex; flex-direction: column; gap: 8px;}.bubble{max-width: 78%; padding: 10px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; word-wrap: break-word;}.bubble.in{background: var(--neutral-100); color: var(--navy-900); border-bottom-left-radius: 4px; align-self: flex-start;}.bubble.out{background: var(--red-500); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end;}.bubble .sender{font-family: var(--font-display); font-size: 11px; font-weight: 700; margin-bottom: 3px; color: var(--navy-700);}.bubble.out .sender{color: rgba(255,255,255,0.85);}.bubble time{display: block; font-size: 10px; color: var(--fg-muted); margin-top: 4px;}.bubble.out time{color: rgba(255,255,255,0.7);}.day-sep{text-align: center; font-family: var(--font-display); font-size: 10.5px; font-weight: 600; color: var(--fg-muted); letter-spacing: 0.12em; text-transform: uppercase; margin: 6px 0;}.composer{position: sticky; bottom: 0; background: rgba(250,250,248,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--border-subtle); padding: 10px 14px 14px; display: flex; gap: 8px; align-items: center; margin: 0 -16px;}.composer input{flex: 1; background: var(--neutral-100); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 10px 14px; font-size: 14px; outline: none;}.composer .send{width: 38px; height: 38px; background: var(--red-500); color: #fff; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 16px -6px rgba(215,38,61,0.5);}.muted{color: var(--fg-muted);}.flex{display: flex;}.flex-between{display: flex; justify-content: space-between; align-items: center;}.flex-col{display: flex; flex-direction: column;}.gap-1{gap: 4px;}.gap-2{gap: 8px;}.gap-3{gap: 12px;}.gap-4{gap: 16px;}.text-jp{font-family: var(--font-jp);}.text-mono{font-family: var(--font-mono);}.divider{height: 1px; background: var(--border-subtle); margin: 4px 0;}

/* /itokyo_client_portal/static/src/css/desktop.css */
 .stage.desktop, body{background: var(--neutral-100);}.dsk-app{display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; font-family: var(--font-body); color: var(--fg-primary); background: var(--neutral-100);}.dsk-sidebar{background: var(--navy-900); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; left: 0; height: 100vh; border-right: 1px solid rgba(255,255,255,0.04); position: relative; overflow: hidden;}.dsk-sidebar::before{content: ''; position: absolute; top: -140px; right: -100px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(215,38,61,0.32) 0%, rgba(215,38,61,0) 70%); pointer-events: none;}.dsk-brand{padding: 22px 24px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); position: relative; z-index: 2;}.dsk-brand::after{content: ''; position: absolute; top: 0; left: 24px; width: 56px; height: 3px; background: linear-gradient(90deg, var(--red-500), var(--gold-400)); border-radius: 0 0 3px 3px;}.dsk-brand img{height: 40px; filter: brightness(0) invert(1);}.dsk-greet{padding: 16px 16px; margin: 12px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 12px; position: relative; z-index: 2;}.dsk-greet-name{font-family: var(--font-display); font-size: 13.5px; font-weight: 600; color: #fff; line-height: 1.2;}.dsk-greet-sub{font-size: 11.5px; color: rgba(255,255,255,0.55); margin-top: 3px; line-height: 1.3;}.dsk-bell{width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; background: rgba(255,255,255,0.06); border: none; color: #fff; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center;}.dsk-bell:hover{background: rgba(255,255,255,0.1);}.dsk-bell-dot{position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--red-500); border: 1.5px solid var(--navy-900);}.dsk-nav{flex: 1; overflow-y: auto; padding: 8px 12px 16px; scrollbar-width: thin; position: relative; z-index: 2;}.dsk-nav::-webkit-scrollbar{width: 4px;}.dsk-nav::-webkit-scrollbar-thumb{background: rgba(255,255,255,0.1); border-radius: 4px;}.dsk-nav-group{margin-bottom: 14px;}.dsk-nav-label{font-family: var(--font-display); font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.4); letter-spacing: 0.16em; text-transform: uppercase; padding: 10px 12px 8px;}.dsk-nav-item{width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border: none; background: transparent; color: rgba(255,255,255,0.65); font-family: var(--font-display); font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer; border-radius: 10px; transition: background 160ms var(--ease-out), color 160ms var(--ease-out); position: relative;}.dsk-nav-item:hover{background: rgba(255,255,255,0.04); color: #fff;}.dsk-nav-item.active{background: rgba(229,38,40,0.14); color: #fff; font-weight: 600;}.dsk-nav-item.active svg{color: var(--red-300);}.dsk-nav-item span{flex: 1;}.dsk-nav-rail{position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; background: linear-gradient(180deg, var(--red-500), var(--gold-400)); border-radius: 0 3px 3px 0;}.dsk-nav-badge{background: var(--red-500); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; padding: 0 6px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display);}.dsk-nav-badge.alert{background: var(--warning-500); color: var(--navy-900);}.dsk-foot{border-top: 1px solid rgba(255,255,255,0.06); padding: 14px 16px; position: relative; z-index: 2;}.dsk-foot-row{display: flex; justify-content: space-between; align-items: center; gap: 8px;}.dsk-signout{background: none; border: none; color: var(--red-300); font-family: var(--font-display); font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap;}.dsk-signout:hover{color: var(--red-300); text-decoration: underline;}.dsk-main{display: flex; flex-direction: column; min-width: 0; background: var(--bg-page);}.dsk-topbar{position: sticky; top: 0; z-index: 30; background: rgba(250, 250, 248, 0.85); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--border-subtle); display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 14px 32px;}.dsk-crumb{display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 13.5px;}.dsk-crumb button{background: none; border: none; color: var(--fg-muted); font-family: inherit; font-size: inherit; font-weight: 500; cursor: pointer;}.dsk-crumb button:hover{color: var(--navy-900);}.dsk-crumb-sep{color: var(--neutral-300); font-size: 14px;}.dsk-crumb-cur{color: var(--navy-900); font-weight: 600;}.dsk-search{display: flex; align-items: center; gap: 10px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 8px 14px; max-width: 420px; width: 100%; justify-self: center;}.dsk-search:focus-within{border-color: var(--red-300); box-shadow: var(--shadow-ring);}.dsk-search input{flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-body); font-size: 13.5px; color: var(--navy-900);}.dsk-search input::placeholder{color: var(--fg-muted);}.dsk-kbd{font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-muted); padding: 2px 6px; border: 1px solid var(--border-subtle); border-radius: 4px; background: var(--neutral-50);}.dsk-tools{display: flex; gap: 8px; align-items: center;}.dsk-tool{display: inline-flex; align-items: center; gap: 8px; background: var(--red-500); color: #fff; border: 1px solid var(--red-500); border-radius: 999px; padding: 8px 14px; font-family: var(--font-display); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 160ms, border-color 160ms, box-shadow 160ms; box-shadow: 0 8px 20px -10px rgba(215,38,61,0.5); white-space: nowrap;}.dsk-tool:hover{background: var(--red-600); border-color: var(--red-600);}.dsk-tool .dot{width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.3);}.dsk-tool.icon{background: var(--bg-surface); color: var(--navy-700); border: 1px solid var(--border-subtle); padding: 8px; width: 36px; height: 36px; justify-content: center;}.dsk-tool.icon:hover{background: var(--neutral-100);}.dsk-content{flex: 1; padding: 28px 32px 48px; max-width: 1320px; width: 100%; margin: 0 auto;}.dsk-content > div{height: 100%;}.dsk-content .scroll{padding: 0 !important; gap: 22px !important; overflow: visible;}.page-header-desktop{display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--border-subtle); gap: 24px; flex-wrap: wrap;}.page-header-desktop .phd-l{display: flex; gap: 14px; align-items: flex-end; min-width: 0;}.page-header-desktop .phd-jp{font-family: var(--font-jp); font-size: 11.5px; font-weight: 500; color: var(--red-500); letter-spacing: 0.18em; margin-bottom: 4px;}.page-header-desktop h1{font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--navy-900); line-height: 1.1; white-space: nowrap;}.page-header-desktop .phd-r{display: flex; align-items: center; gap: 10px; flex-shrink: 0;}.page-header-desktop .course-pill{white-space: nowrap; flex-shrink: 0;}.dsk-content .stats2, .dsk-content .stats4{grid-template-columns: repeat(4, 1fr);}.dsk-content .nc{padding: 28px 32px;}.dsk-content .nc h2{font-size: 22px;}.dsk-content .nc .meta{grid-template-columns: repeat(4, 1fr);}.dsk-grid-2{display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: flex-start;}.dsk-content .card{padding: 22px;}.dsk-content .card-head h3{font-size: 16px;}.dsk-content .greet{padding: 8px 4px 16px;}.dsk-content .greet h1{font-size: 30px;}.dsk-content .greet .sub{font-size: 14px; max-width: 480px;}.dsk-content .greet .av{width: 56px; height: 56px; font-size: 17px; border-radius: 16px;}.dsk-content .greet .jp{font-size: 12px;}.dsk-content .app-header{display: none;}.dsk-content .tabbar{display: none;}.dsk-content .topnav{display: none;}.dsk-content .scroll > div[style*='grid-template-columns: 1fr 1fr']{}.dsk-content .ring-wrap{gap: 28px;}.dsk-content .classcard{padding: 18px 20px;}.dsk-content .classcard .when{width: 84px;}.dsk-content .composer{margin: 0; border-radius: 12px; border: 1px solid var(--border-subtle); margin-top: 12px;}.dsk-msg-pane{display: grid; grid-template-columns: 320px 1fr; gap: 0; border: 1px solid var(--border-subtle); border-radius: 16px; background: var(--bg-surface); overflow: hidden; height: calc(100vh - 220px); min-height: 520px;}.dsk-msg-list{border-right: 1px solid var(--border-subtle); overflow-y: auto; background: var(--neutral-50);}.dsk-msg-conv{display: flex; flex-direction: column; overflow: hidden;}.dsk-app .toast, body > .toast{}.dsk-app + .toast, .dsk-app .toast-mount{z-index: 9999;}.dsk-app [style*='bottom: 110px']{bottom: 32px !important; left: 50% !important; position: fixed !important;}.tabbar.android{bottom: 22px; background: rgba(255,255,255,0.94); border-radius: 28px; height: 60px;}.tabbar.android .tab.active::before{display: none;}.tabbar.android .tab.active{background: var(--red-50); color: var(--red-700);}.tabbar.android .tab.active svg{color: var(--red-600);}.dsk-content > section{width: 100%;}.dsk-content .greet{margin-bottom: 0;}

/* /itokyo_client_portal/static/src/css/client_overrides.css */
 body.o_itokyo_cp{margin: 0; padding: 0; background: var(--neutral-100);}.o_itokyo_cp a{text-decoration: none; color: inherit;}.o_itokyo_cp .dsk-tool:not(.icon){color: #fff;}.o_itokyo_cp .dsk-tool:not(.icon) .dot{background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.30);}.o_itokyo_cp .dsk-content > section{display: flex; flex-direction: column; gap: 22px;}body.o_itokyo_cp .dsk-content > section{will-change: opacity, transform;}.o_itokyo_cp .dsk-nav-item, .o_itokyo_cp .dsk-brand a{text-decoration: none;}.o_itokyo_cp .dsk-nav-item{color: rgba(255,255,255,0.65);}.o_itokyo_cp .ja{display: none;}body.o_itokyo_cp.lang-ja .en{display: none;}body.o_itokyo_cp.lang-ja .ja{display: inline;}body.o_itokyo_cp.lang-ja{font-family: var(--font-jp), var(--font-body, sans-serif);}.o_itokyo_cp .cp-lang{display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-surface, #fff);}.o_itokyo_cp .cp-lang-btn{appearance: none; border: 0; background: transparent; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 12px; line-height: 1; padding: 5px 9px; border-radius: 8px; color: var(--fg-muted); min-height: 30px;}.o_itokyo_cp .cp-lang-btn.active{background: var(--navy-700); color: #fff;}.o_itokyo_cp .cp-lang-sep{color: var(--border-strong, #d7dbe3); font-size: 12px;}body.o_itokyo_cp .dsk-sidebar{position: sticky; top: 0; align-self: start;}body.o_itokyo_cp .dsk-topbar{position: sticky; top: 0; z-index: 30;}.o_itokyo_cp .cp-burger{display: none; background: var(--bg-surface); border: 1px solid var(--border-subtle); width: 36px; height: 36px; border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; color: var(--navy-700);}.o_itokyo_cp .cp-scrim{display: none;}.o_itokyo_cp .cp-tabbar{display: none;}.o_itokyo_cp .cp-readonly{display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--neutral-100); color: var(--fg-muted); border: 1px solid var(--border-subtle); font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.02em;}.o_itokyo_cp .cp-readonly::before{content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-400, #C9A23A);}@media (max-width: 1024px){.o_itokyo_cp .dsk-app{grid-template-columns: 1fr;}body.o_itokyo_cp .dsk-sidebar{position: fixed !important; z-index: 60; width: 264px; left: 0; top: 0; height: 100dvh; align-self: auto; transform: translateX(-100%); transition: transform 240ms var(--ease-out, ease);}body.o_itokyo_cp .dsk-app.cp-open .dsk-sidebar{transform: translateX(0);}.o_itokyo_cp .dsk-app.cp-open .cp-scrim{display: block; position: fixed; inset: 0; z-index: 55; background: rgba(6,11,23,0.5);}.o_itokyo_cp .cp-burger{display: inline-flex;}.o_itokyo_cp .dsk-topbar{grid-template-columns: auto 1fr auto; padding: 12px 16px;}.o_itokyo_cp .dsk-search{display: none;}.o_itokyo_cp .dsk-content{padding: 18px 16px 96px;}.o_itokyo_cp .cp-tabbar{display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: rgba(255,255,255,0.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--border-subtle); padding: 6px 4px env(safe-area-inset-bottom, 8px);}.o_itokyo_cp .cp-tabbar a{display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; min-height: 44px; justify-content: center; font-family: var(--font-display); font-size: 10.5px; font-weight: 600; color: var(--fg-muted);}.o_itokyo_cp .cp-tabbar a.active{color: var(--red-600, var(--red-500));}}@media (max-width: 720px){.o_itokyo_cp .dsk-content .stats2, .o_itokyo_cp .dsk-content .stats4{grid-template-columns: 1fr 1fr;}.o_itokyo_cp .cp-grid-2{grid-template-columns: 1fr;}.o_itokyo_cp .page-header-desktop h1{font-size: 22px; white-space: normal;}.o_itokyo_cp .cp-table-wrap{overflow-x: auto;}}.o_itokyo_cp .cp-grid-2{display: grid; grid-template-columns: 1fr 1fr; gap: 14px;}.o_itokyo_cp .cp-grid-3{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;}@media (max-width: 980px){.o_itokyo_cp .cp-grid-3{grid-template-columns: 1fr 1fr;}}@media (max-width: 640px){.o_itokyo_cp .cp-grid-2, .o_itokyo_cp .cp-grid-3{grid-template-columns: 1fr;}}@keyframes cp-rise{from{opacity: 0; transform: translateY(10px);}to{opacity: 1; transform: none;}}@keyframes tp-anim-in{from{opacity: 0; transform: translateY(8px);}to{opacity: 1; transform: none;}}@media (prefers-reduced-motion: no-preference){body.o_itokyo_cp .dsk-content > section{animation: cp-rise 360ms var(--ease-out, ease) both;}body.o_itokyo_cp .dsk-content > section.tp-anim-in{animation: tp-anim-in 280ms var(--ease-out, ease) both;}}.o_itokyo_cp .tp-progress{position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; background: transparent; pointer-events: none; opacity: 0; transition: opacity 200ms ease;}.o_itokyo_cp .tp-progress.go{opacity: 1;}.o_itokyo_cp .tp-progress-fill{height: 100%; width: 40%; background: linear-gradient(90deg, var(--red-500), var(--gold-400, #C9A23A)); animation: cp-progress 1.1s ease-in-out infinite;}@keyframes cp-progress{0%{margin-left: -40%;}100%{margin-left: 100%;}}.o_itokyo_cp .tp-loading{opacity: 0.55; transition: opacity 160ms ease;}.o_itokyo_cp .tp-toast-host{position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 8px; pointer-events: none;}.o_itokyo_cp .tp-toast{display: flex; align-items: center; gap: 8px; background: var(--navy-900, #060B17); color: #fff; padding: 10px 14px; border-radius: 12px; font-family: var(--font-display); font-size: 13px; font-weight: 600; box-shadow: 0 10px 30px rgba(6,11,23,0.30); opacity: 0; transform: translateY(8px); transition: opacity 220ms ease, transform 220ms ease;}.o_itokyo_cp .tp-toast.in{opacity: 1; transform: none;}.o_itokyo_cp .tp-toast.out{opacity: 0; transform: translateY(8px);}.o_itokyo_cp .tp-toast.tone-ok .tp-toast-ic{color: var(--success-500, #29A36A);}.o_itokyo_cp .tp-toast.tone-err .tp-toast-ic{color: var(--red-500);}.o_itokyo_cp .cp-barchart{display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-top: 6px;}.o_itokyo_cp .cp-bar-col{flex: 1; height: 100%; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;}.o_itokyo_cp .cp-bar{width: 100%; max-width: 34px; min-height: 2px; border-radius: 5px 5px 0 0; transition: height 400ms var(--ease-out, ease);}.o_itokyo_cp .cp-bar-val{font-size: 10px; font-weight: 700; color: var(--navy-700); margin-bottom: 3px; font-variant-numeric: tabular-nums;}.o_itokyo_cp .cp-bar-lab{font-size: 9.5px; color: var(--fg-muted); margin-top: 5px; text-align: center; white-space: nowrap;}.o_itokyo_cp .cp-hbar{flex: 1; height: 9px; background: var(--neutral-100); border-radius: 6px; overflow: hidden;}.o_itokyo_cp .cp-hbar-fill{height: 100%; border-radius: 6px; min-width: 2px; transition: width 400ms var(--ease-out, ease);}.o_itokyo_cp .cp-cmp-row{display: flex; align-items: center; gap: 10px; margin: 4px 0;}.o_itokyo_cp .cp-cmp-lab{width: 84px; font-size: 11px; color: var(--fg-muted); flex-shrink: 0;}.o_itokyo_cp .cp-cmp-val{width: 34px; text-align: right; font-size: 12px; font-weight: 700; color: var(--navy-700); font-variant-numeric: tabular-nums;}.o_itokyo_cp .cp-stack{display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: var(--neutral-100);}.o_itokyo_cp .cp-stack-seg{height: 100%; min-width: 2px;}.o_itokyo_cp .cp-empty{padding: 24px; text-align: center; color: var(--fg-muted); font-size: 12.5px;}.o_itokyo_cp .cp-cal{width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed;}.o_itokyo_cp .cp-cal th{font-size: 10px; color: var(--fg-muted); font-weight: 600; padding: 2px; text-align: center;}.o_itokyo_cp .cp-cal td{padding: 0; vertical-align: top;}.o_itokyo_cp .cp-cal-cell{min-height: 40px; border-radius: 7px; padding: 5px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; color: var(--navy-700);}.o_itokyo_cp .cp-cal-cell.today{outline: 2px solid var(--navy-700); outline-offset: -2px;}.o_itokyo_cp .cp-cal-day{font-weight: 700; line-height: 1.1;}.o_itokyo_cp .cp-cal-pct{font-size: 9px; opacity: 0.92;}@media (max-width: 820px){.o_itokyo_cp .cp-search{display: none !important;}}.o_itokyo_cp .classcard{display: block;}.o_itokyo_cp a.classcard, .o_itokyo_cp a.card{transition: transform 160ms var(--ease-out, ease), box-shadow 160ms var(--ease-out, ease), border-color 160ms var(--ease-out, ease);}.o_itokyo_cp a.classcard:hover, .o_itokyo_cp a.card:hover{transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-default);}.o_itokyo_cp a.classcard:active, .o_itokyo_cp a.card:active{transform: translateY(0); box-shadow: var(--shadow-sm);}.o_itokyo_cp .cp-row-link{transition: background 140ms var(--ease-out, ease);}.o_itokyo_cp .cp-row-link:hover{background: var(--neutral-50);}.o_itokyo_cp .cp-kpis{display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;}@media (min-width: 981px){.o_itokyo_cp .cp-grid-2.cp-dash{grid-template-columns: 1.25fr 1fr;}}.o_itokyo_cp .cp-kpis > .classcard, .o_itokyo_cp .cp-grid-3 > .classcard{height: 100%;}.o_itokyo_cp .cp-readnote{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--fg-muted); margin:2px 0 6px;}.o_itokyo_cp .cp-readnote::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold-400); flex-shrink:0;}.o_itokyo_cp .cp-h3{font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--navy-700); letter-spacing:-.01em; margin:20px 0 10px; display:flex; align-items:center; gap:8px;}.o_itokyo_cp .cp-h3-warn{color:var(--red-700);}.o_itokyo_cp .cp-h3-warn::before{content:""; width:4px; height:16px; border-radius:2px; background:linear-gradient(180deg,var(--red-500),var(--gold-400));}.o_itokyo_cp .cp-filterbar{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px; background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:14px; padding:12px 14px; box-shadow:var(--shadow-xs); margin-bottom:6px;}.o_itokyo_cp .cp-filter-field{display:flex; flex-direction:column; gap:5px; min-width:0;}.o_itokyo_cp .cp-filter-lbl{font-family:var(--font-display); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-muted);}.o_itokyo_cp .cp-select{appearance:none; -webkit-appearance:none; -moz-appearance:none; font-family:var(--font-body); font-size:13.5px; color:var(--navy-900); background:var(--bg-surface); border:1.5px solid var(--border-subtle); border-radius:10px; padding:9px 34px 9px 12px; min-height:40px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236A6A62' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; transition:border-color 160ms, box-shadow 160ms;}.o_itokyo_cp input.cp-select{padding-right:12px; background-image:none; cursor:text;}.o_itokyo_cp .cp-select:focus{outline:none; border-color:var(--red-400); box-shadow:var(--shadow-ring);}.o_itokyo_cp .cp-filter-go{font-family:var(--font-display); font-size:13px; font-weight:600; color:#fff; background:var(--red-500); border:1px solid var(--red-500); border-radius:999px; padding:9px 18px; min-height:40px; cursor:pointer; box-shadow:0 8px 20px -10px rgba(215,38,61,.5); transition:background 160ms;}.o_itokyo_cp .cp-filter-go:hover{background:var(--red-600); border-color:var(--red-600);}.o_itokyo_cp .cp-filter-clear{font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--fg-muted); text-decoration:none; padding:9px 12px; min-height:40px; display:inline-flex; align-items:center; border-radius:999px;}.o_itokyo_cp .cp-filter-clear:hover{color:var(--navy-900); background:var(--neutral-100);}.o_itokyo_cp .cp-kpi{display:flex; flex-direction:column; gap:4px; padding:16px 18px; min-height:96px; justify-content:center;}.o_itokyo_cp .cp-kpi-v{font-family:var(--font-display); font-size:28px; font-weight:800; line-height:1.05; color:var(--navy-700); letter-spacing:-.02em; font-variant-numeric:tabular-nums;}.o_itokyo_cp .cp-kpi-v .bd{font-size:16px; vertical-align:middle;}.o_itokyo_cp .cp-kpi-l, .o_itokyo_cp .cp-kpi-lab{font-family:var(--font-display); font-size:12px; font-weight:600; color:var(--fg-secondary);}.o_itokyo_cp .cp-kpi-sub{font-size:11.5px; color:var(--fg-muted);}.o_itokyo_cp .cp-pad{padding:16px 18px;}.o_itokyo_cp .cp-card-title{font-family:var(--font-display); font-size:13.5px; font-weight:700; color:var(--navy-700); margin-bottom:8px;}.o_itokyo_cp .cp-card-meta{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--fg-muted);}.o_itokyo_cp .cp-card-meta strong{color:var(--navy-700); font-weight:700;}.o_itokyo_cp .cp-flush{padding:0; overflow:hidden;}.o_itokyo_cp .cp-table{width:100%; border-collapse:collapse; font-size:13px;}.o_itokyo_cp .cp-table thead th{font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-muted); text-align:left; padding:11px 16px; background:var(--neutral-50); border-bottom:1px solid var(--border-subtle); white-space:nowrap;}.o_itokyo_cp .cp-table tbody td{padding:11px 16px; border-top:1px solid var(--border-subtle); color:var(--fg-secondary); vertical-align:middle;}.o_itokyo_cp .cp-table tbody tr:hover{background:var(--neutral-50);}.o_itokyo_cp .cp-num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}.o_itokyo_cp .cp-strong{font-family:var(--font-display); font-weight:600; color:var(--navy-700);}.o_itokyo_cp .cp-muted{color:var(--fg-muted);}.o_itokyo_cp .cp-low{border-left:3px solid var(--red-400); background:linear-gradient(90deg,var(--red-50),transparent 60%);}.o_itokyo_cp .cp-low-name{font-family:var(--font-display); font-weight:700; color:var(--navy-700); font-size:13.5px; margin-bottom:6px;}.o_itokyo_cp .cp-low-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px;}.o_itokyo_cp .cp-passrate{display:flex; align-items:baseline; gap:10px; margin:2px 0 10px;}.o_itokyo_cp .cp-prog{height:8px; background:var(--neutral-100); border-radius:999px; overflow:hidden;}.o_itokyo_cp .cp-prog-sm{height:6px;}.o_itokyo_cp .cp-prog-fill{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--red-500),var(--gold-400)); transition:width 360ms var(--ease-out,ease);}.o_itokyo_cp .cp-grades{display:flex; flex-direction:column; gap:8px;}.o_itokyo_cp .cp-grade-row{display:flex; align-items:center; gap:10px;}.o_itokyo_cp .cp-grade-row .cp-prog{flex:1;}.o_itokyo_cp .cp-grade-chip{width:26px; height:26px; border-radius:8px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:12px; font-weight:800; background:var(--neutral-100); color:var(--navy-700);}.o_itokyo_cp .cp-grade-A{background:var(--success-50); color:var(--success-700);}.o_itokyo_cp .cp-grade-B{background:var(--info-50); color:var(--info-700);}.o_itokyo_cp .cp-grade-C{background:var(--gold-50); color:var(--gold-600);}.o_itokyo_cp .cp-grade-D{background:var(--warning-50); color:var(--warning-700);}.o_itokyo_cp .cp-grade-F{background:var(--error-50); color:var(--error-700);}.o_itokyo_cp .cp-grade-n{font-variant-numeric:tabular-nums; font-weight:700; color:var(--navy-700); min-width:22px; text-align:right;}.o_itokyo_cp .cp-chips{display:flex; flex-wrap:wrap; gap:10px;}@media (max-width:640px){.o_itokyo_cp .cp-filter-field{flex:1 1 100%;}.o_itokyo_cp .cp-select{width:100%;}}