/* PORTAL-1C1 · DUAL THEME ENGINE */
html{color-scheme:dark}
html[data-theme="light"]{
color-scheme:light;
--bg:#eee9e1;
--surface:#fffdfa;
--surface-2:#f6f1e9;
--panel:#fffdfa;
--panel-2:#f6f1e9;
--line:rgba(62,42,35,.14);
--line-hot:rgba(153,25,0,.24);
--text:#211b19;
--muted:#6d6870;
--shadow:0 22px 58px rgba(62,40,29,.12);
}
.portal-theme-toggle{
appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-width:42px;height:38px;padding:0 11px;border:1px solid rgba(255,255,255,.12);
border-radius:999px;background:rgba(255,255,255,.035);color:#f6f7f9;
font:800 12px/1 Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer;
transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.portal-theme-toggle:hover{transform:translateY(-1px);border-color:rgba(255,153,0,.58);background:rgba(255,153,0,.1)}
.portal-theme-toggle:focus-visible{outline:3px solid rgba(255,153,0,.3);outline-offset:3px}
.portal-theme-toggle .theme-label{font-size:10px;letter-spacing:.06em}
.portal-theme-toggle.is-floating{position:fixed;z-index:90;right:18px;bottom:18px;height:44px;box-shadow:0 12px 34px rgba(0,0,0,.28);background:#211917}
html[data-theme="light"] body{background:#eee9e1;color:#211b19}
/* Brand chrome intentionally remains dark in both themes. */
html[data-theme="light"] :is(.site-header,.utility-bar,.topbar,.admin-topbar,.admin-sidebar){
--text:#f6f7f9;--muted:#a5adba;--surface:#111419;--surface-2:#191d22;--line:rgba(255,255,255,.1);
color:#f6f7f9;
}
html[data-theme="light"] :is(.site-header,.utility-bar,.topbar,.admin-topbar){background:rgba(14,16,19,.97)}
html[data-theme="light"] .admin-sidebar{background:linear-gradient(180deg,#211310,#101317 45%);border-color:rgba(255,255,255,.08)}
/* Landing */
html[data-theme="light"] :is(.summary-section,.apps-section,.news-section,.information-page){background:#eee9e1}
html[data-theme="light"] .notice-section{background:linear-gradient(115deg,#f3ded3,#eee9e1 58%)}
html[data-theme="light"] :is(.metric-card,.app-card,.news-card,.information-cover){background:#fffdfa;border-color:rgba(62,42,35,.14);box-shadow:0 12px 34px rgba(62,40,29,.06)}
html[data-theme="light"] .metric-featured{background:linear-gradient(145deg,#7b2013,#431813);color:#fff}
html[data-theme="light"] .metric-featured :is(span,em){color:#f2d7ce}
html[data-theme="light"] :is(.section-head p,.app-card small,.news-body p,.method-note,.information-meta,.information-lead,.rich-article,.closing-card p){color:#68636b}
html[data-theme="light"] .app-card:hover{background:#fff7eb;border-color:#e88700;box-shadow:0 18px 42px rgba(140,74,0,.13)}
html[data-theme="light"] .news-visual{background-color:#4c170e}
html[data-theme="light"] .notice-item{border-color:rgba(62,42,35,.14)}
html[data-theme="light"] .closing-section{background:#eee9e1}
html[data-theme="light"] .closing-card{background:radial-gradient(circle at 90% 40%,rgba(255,153,0,.18),transparent 33%),linear-gradient(120deg,#fffaf2,#f2e4d7);border-color:rgba(153,25,0,.2)}
html[data-theme="light"] .site-footer{background:#171514;color:#f7f7f5}
html[data-theme="light"] .site-footer :is(span,a,small){color:#aeb3bd}
html[data-theme="light"] .rich-article :is(h2,h3){color:#211b19}
html[data-theme="light"] .rich-article blockquote{background:#fffdfa;color:#30241f;border-color:#ff9900}
/* Dashboard */
html[data-theme="light"] :is(.app-shell,.dashboard-shell,.dashboard-main,.page-main,.main-content){background:#eee9e1;color:#211b19}
html[data-theme="light"] :is(.panel,.card,.data-card,.metric-card:not(.metric-featured),.table-card,.chart-card,.chart-panel,.content-card,.detail-card,.filter-panel,.toolbar,.pagination){background:#fffdfa;border-color:rgba(62,42,35,.14);color:#211b19;box-shadow:0 12px 34px rgba(62,40,29,.055)}
html[data-theme="light"] :is(table,thead,tbody,tr,th,td){border-color:rgba(62,42,35,.12)}
html[data-theme="light"] th{color:#706870}
html[data-theme="light"] td{color:#2d2725}
html[data-theme="light"] :is(input,select,textarea){background:#fffdfa;color:#211b19;border-color:rgba(62,42,35,.2)}
html[data-theme="light"] :is(input,textarea)::placeholder{color:#91898b}
html[data-theme="light"] :is(.muted,.subtitle,.description,.meta,.hint,.note){color:#6d6870}
html[data-theme="light"] .hero{box-shadow:0 20px 55px rgba(88,28,15,.15)}
/* Admin workspace */
html[data-theme="light"] :is(.admin-main,.admin-content){background:#eee9e1;color:#211b19}
html[data-theme="light"] :is(.content-panel,.studio-panel,.media-studio,.media-library-panel,.media-library-card,.inventory-item,.rich-editor-section,.image-preview,.upload-zone,.user-mini,.settings-card,.analytics-card,.stat-card,.trend-panel,.top-pages){background:#fffdfa;border-color:rgba(62,42,35,.14);color:#211b19;box-shadow:0 12px 34px rgba(62,40,29,.055)}
html[data-theme="light"] :is(.content-panel,.studio-panel) :is(input,select,textarea,.rich-editor){background:#f9f5ef;color:#211b19;border-color:rgba(62,42,35,.18)}
html[data-theme="light"] .editor-toolbar{background:#eee8df;border-color:rgba(62,42,35,.16)}
html[data-theme="light"] .editor-toolbar button{color:#312925}
html[data-theme="light"] :is(.panel-head p,.field-hint,.editor-help,.media-empty,.safety-note,.inventory-item small,.media-library-card small){color:#706970}
html[data-theme="light"] .safety-note{background:#fffdfa}
html[data-theme="light"] .landing-admin .landing-hero{color:#fff}
html[data-theme="light"] .landing-admin .landing-hero p{color:#b9c1cd}
html[data-theme="light"] .flash.success{background:#e2f7ed;color:#176541}
html[data-theme="light"] .flash.error{background:#fde8e5;color:#8e281d}
@media(max-width:700px){
.portal-theme-toggle .theme-label{display:none}
.portal-theme-toggle{min-width:40px;padding:0 9px}
}
@media(prefers-reduced-motion:reduce){.portal-theme-toggle{transition:none}}
/* PORTAL-1C2 · LANDING LIGHT POLISH */
html[data-theme="light"] .hero-slide:not(.has-image){
color:#211b19;
background:
radial-gradient(circle at 77% 45%,rgba(255,153,0,.115),transparent 24%),
radial-gradient(circle at 18% 85%,rgba(153,25,0,.055),transparent 32%),
linear-gradient(112deg,#fffdf9 0%,#f6f0e7 54%,#eee5d9 100%);
}
html[data-theme="light"] .hero-slide:not(.has-image) .hero-copy{color:#211b19}
html[data-theme="light"] .hero-slide:not(.has-image) .hero-copy p{color:#625e64}
html[data-theme="light"] .hero-slide:not(.has-image) .hero-orbit{
border-color:rgba(79,50,39,.17);
box-shadow:inset 0 0 90px rgba(255,153,0,.08),0 22px 55px rgba(82,52,38,.08);
}
html[data-theme="light"] .hero-slide:not(.has-image) .hero-orbit::before{border-color:rgba(79,50,39,.12)}
html[data-theme="light"] .hero-slide:not(.has-image) .hero-orbit::after{background:#fffdfa;border-color:rgba(79,50,39,.14)}
html[data-theme="light"] .hero-slide:not(.has-image) .hero-orbit span{color:#2b2421}
html[data-theme="light"] .hero-slide:not(.has-image)~.slider-controls>button{background:#fffdfa;color:#211b19;border-color:rgba(62,42,35,.2)}
/* Contact remains a dark brand island, with explicit readable text. */
html[data-theme="light"] #kontak{
--text:#f7f7f5;
--muted:#aeb6c3;
color:#f7f7f5;
}
html[data-theme="light"] #kontak :is(h2,h3,strong,address,a){color:#f7f7f5}
html[data-theme="light"] #kontak :is(p,small,.contact-value){color:#aeb6c3}
html[data-theme="light"] #kontak [class*="contact-item"]{
background:rgba(255,255,255,.035);
border-color:rgba(255,255,255,.08);
}
html[data-theme="light"] #kontak a:hover{color:#ffb13b}
/* PORTAL-1C3 · DASHBOARD SURFACE POLISH */
/* Image slides always retain cinematic white caption text. */
html[data-theme="light"] .hero-slide.has-image .hero-caption-panel,
html[data-theme="light"] .hero-slide.has-image .hero-caption-panel h1{color:#f7f7f5}
html[data-theme="light"] .hero-slide.has-image .hero-caption-panel p{color:#c2c9d3}
/* Dashboard hero is a deliberate dark brand island. */
html[data-theme="light"] .app-shell .hero{
--text:#f5f7fa;
--muted:#aeb7c4;
color:#f5f7fa;
border-color:rgba(255,153,0,.2);
background:
radial-gradient(circle at 88% 55%,rgba(255,153,0,.15),transparent 26%),
linear-gradient(118deg,#4b1c16 0%,#2b1c1d 43%,#1b1f24 100%) !important;
box-shadow:0 24px 65px rgba(60,31,22,.2);
}
html[data-theme="light"] .app-shell .hero :is(h1,.hero-copy,.hero-meta strong){color:#f5f7fa}
html[data-theme="light"] .app-shell .hero h1 span{color:#cfd5dd}
html[data-theme="light"] .app-shell .hero :is(p,.hero-meta span){color:#b4bdca}
html[data-theme="light"] .app-shell .hero .hero-meta div{border-color:rgba(255,255,255,.13)}
html[data-theme="light"] .app-shell .hero .hero-orbit{border-color:rgba(255,255,255,.12)}
html[data-theme="light"] .app-shell .hero .orbit{border-color:rgba(255,255,255,.09)}
html[data-theme="light"] .app-shell .hero .orbit-core{
color:#f7f7f5;background:#1a1e23;border-color:rgba(255,255,255,.13);
box-shadow:0 20px 55px rgba(0,0,0,.25);
}
/* Featured KPI remains maroon and readable. */
html[data-theme="light"] .app-shell .kpi-card.featured{
--text:#fffaf7;--muted:#e7c7c0;
color:#fffaf7;
background:linear-gradient(145deg,#8a2a1b,#551b14) !important;
border-color:rgba(153,25,0,.24);
}
html[data-theme="light"] .app-shell .kpi-card.featured :is(.kpi-label,.kpi-value,.kpi-note,strong,span){color:inherit}
html[data-theme="light"] .app-shell .kpi-card.featured .kpi-note{color:#e8cbc5}
/* Procurement profile remains dark as an intelligence workspace. */
html[data-theme="light"] .app-shell .profile-hub{
--text:#f5f7fa;--muted:#aab5c3;
color:#f5f7fa;
background:
radial-gradient(circle at 100% 0%,rgba(255,153,0,.09),transparent 25%),
linear-gradient(120deg,#181c21,#111419) !important;
border-color:rgba(255,153,0,.2);
box-shadow:0 24px 65px rgba(34,27,24,.18);
}
html[data-theme="light"] .app-shell .profile-hub :is(h2,h3,strong){color:#f5f7fa}
html[data-theme="light"] .app-shell .profile-hub :is(p,small){color:#9faaba}
html[data-theme="light"] .app-shell .profile-hub :is(.profile-bridge article,.profile-panel,.profile-split-cards>div,.profile-policy>div,.profile-contract-grid>div){
color:#f5f7fa;background:#20242a;border-color:rgba(255,255,255,.09);
}
html[data-theme="light"] .app-shell .profile-hub .profile-bridge-focus{
background:linear-gradient(135deg,#4c241d,#2c2020);
border-color:rgba(255,153,0,.32);
}
html[data-theme="light"] .app-shell .profile-hub :is(.profile-bridge span,.profile-panel-head>span,.profile-split-cards span,.profile-policy span,.profile-contract-grid span){color:#9dabc0}
html[data-theme="light"] .app-shell .profile-hub .profile-bar-row>div:first-child span{color:#d1d7df}
html[data-theme="light"] .app-shell .profile-hub .profile-channel-row>span{color:#bac4d0}
html[data-theme="light"] .app-shell .profile-hub .profile-bar-track{background:#30353b}
/* Ivory analytical panels receive explicit dark typography. */
html[data-theme="light"] .app-shell .panel{color:#28211f;background:#fffdfa;border-color:rgba(62,42,35,.14)}
html[data-theme="light"] .app-shell .panel :is(h2,h3,strong,.panel-total,.money,.composition-title,.rank-title){color:#28211f}
html[data-theme="light"] .app-shell .panel :is(p,small,.head-note,.policy-caption,.flow-disclaimer,.composition-foot,.rank-meta,.contract-note){color:#69636a}
html[data-theme="light"] .app-shell .panel :is(.composition-item,.contract-note,.revision-stats>div,.revision-types>div){background:#fbf8f3;border-color:rgba(62,42,35,.12)}
html[data-theme="light"] .app-shell .panel .progress{background:#e3ddd5}
html[data-theme="light"] .app-shell .panel .rank-bar{background:#e3ddd5}
html[data-theme="light"] .app-shell .panel .flow-line{background:rgba(153,25,0,.16)}
html[data-theme="light"] .app-shell .panel .flow-dot{background:#fffdfa;color:#9a390f;border-color:rgba(255,153,0,.38)}
html[data-theme="light"] .app-shell .panel .ring-inner{background:#fffdfa;color:#28211f}
/* Comparison Intelligence intentionally keeps its own dark palette. */
html[data-theme="light"] .app-shell [class^="ci-"],
html[data-theme="light"] .app-shell [class*=" ci-"]{--text:#f5f7fa;--muted:#aab5c3}
/* PORTAL-1C4 · FULL LIGHT DASHBOARD */
/* The black topbar remains the visual frame; dashboard surfaces become fully light. */
html[data-theme="light"] .app-shell .hero{
--text:#261f1c;--muted:#6d6663;
color:#261f1c;
border-color:rgba(129,76,38,.16);
background:
radial-gradient(circle at 84% 52%,rgba(255,153,0,.16),transparent 27%),
radial-gradient(circle at 12% 92%,rgba(153,25,0,.055),transparent 30%),
linear-gradient(118deg,#fffdfa 0%,#fbf6ee 52%,#f3eadc 100%) !important;
box-shadow:0 24px 65px rgba(74,50,35,.13);
}
html[data-theme="light"] .app-shell .hero :is(h1,.hero-copy,.hero-meta strong){color:#261f1c}
html[data-theme="light"] .app-shell .hero h1 span{color:#554d49}
html[data-theme="light"] .app-shell .hero :is(p,.hero-meta span){color:#6d6663}
html[data-theme="light"] .app-shell .hero .hero-meta div{border-color:rgba(65,43,35,.14)}
html[data-theme="light"] .app-shell .hero .hero-orbit{border-color:rgba(88,56,39,.15)}
html[data-theme="light"] .app-shell .hero .orbit{border-color:rgba(88,56,39,.11)}
html[data-theme="light"] .app-shell .hero .orbit-core{
color:#261f1c;background:#fffdfa;border-color:rgba(88,56,39,.14);
box-shadow:0 20px 50px rgba(74,50,35,.13);
}
/* The featured KPI joins the white card family with a restrained maroon accent. */
html[data-theme="light"] .app-shell .kpi-card.featured{
--text:#261f1c;--muted:#746b67;
color:#261f1c;
background:
linear-gradient(90deg,#991900 0 5px,transparent 5px),
radial-gradient(circle at 100% 0%,rgba(153,25,0,.07),transparent 34%),
#fffdfa !important;
border-color:rgba(153,25,0,.18);
box-shadow:0 18px 45px rgba(74,50,35,.1);
}
html[data-theme="light"] .app-shell .kpi-card.featured :is(.kpi-label,.kpi-value,.kpi-note,strong,span){color:#261f1c}
html[data-theme="light"] .app-shell .kpi-card.featured :is(.kpi-label,.kpi-icon){color:#991900}
html[data-theme="light"] .app-shell .kpi-card.featured .kpi-note{color:#746b67}
/* Procurement Profile becomes a light intelligence canvas. */
html[data-theme="light"] .app-shell .profile-hub{
--text:#261f1c;--muted:#6d6663;
color:#261f1c;
background:
radial-gradient(circle at 100% 0%,rgba(255,153,0,.09),transparent 26%),
linear-gradient(120deg,#fffdfa,#f7f1e8) !important;
border-color:rgba(129,76,38,.16);
box-shadow:0 24px 65px rgba(74,50,35,.12);
}
html[data-theme="light"] .app-shell .profile-hub :is(h2,h3,strong){color:#261f1c}
html[data-theme="light"] .app-shell .profile-hub :is(p,small){color:#6d6663}
html[data-theme="light"] .app-shell .profile-hub :is(.profile-bridge article,.profile-panel,.profile-split-cards>div,.profile-policy>div,.profile-contract-grid>div){
color:#261f1c;background:#fffdfa;border-color:rgba(76,52,42,.13);
box-shadow:0 10px 26px rgba(74,50,35,.055);
}
html[data-theme="light"] .app-shell .profile-hub .profile-bridge-focus{
background:linear-gradient(135deg,#fff3e4,#fae8d8);
border-color:rgba(153,25,0,.2);
}
html[data-theme="light"] .app-shell .profile-hub :is(.profile-bridge span,.profile-panel-head>span,.profile-split-cards span,.profile-policy span,.profile-contract-grid span){color:#786e69}
html[data-theme="light"] .app-shell .profile-hub .profile-bar-row>div:first-child span{color:#39312e}
html[data-theme="light"] .app-shell .profile-hub .profile-channel-row>span{color:#625955}
html[data-theme="light"] .app-shell .profile-hub .profile-bar-track{background:#e7dfd5}
/* Cross-year intelligence uses the same light visual language. */
html[data-theme="light"] .app-shell .ci-section{
--text:#261f1c;--muted:#6d6663;
color:#261f1c;
background:
radial-gradient(circle at 100% 0%,rgba(255,153,0,.09),transparent 25%),
linear-gradient(120deg,#fffdfa,#f7f1e8) !important;
border-color:rgba(129,76,38,.16);
box-shadow:0 24px 65px rgba(74,50,35,.12);
}
html[data-theme="light"] .app-shell .ci-section :is(h2,h3,strong,.ci-current-value,.ci-efficiency-rate,.ci-opd-name,.ci-opd-value){color:#261f1c}
html[data-theme="light"] .app-shell .ci-section :is(p,small,.ci-intro,.ci-subheading,.ci-baseline,.ci-method-note,.ci-empty){color:#6d6663}
html[data-theme="light"] .app-shell .ci-section :is(.ci-context-panel,.ci-metric-card,.ci-top-preview,.ci-method-note,.ci-table-wrap){
color:#261f1c;background:#fffdfa !important;border-color:rgba(76,52,42,.13);
box-shadow:0 10px 25px rgba(74,50,35,.05);
}
html[data-theme="light"] .app-shell .ci-section :is(.ci-efficiency-panel,.ci-efficiency-strip){
color:#261f1c;
background:linear-gradient(120deg,#fff3e4,#fae6d3) !important;
border-color:rgba(153,25,0,.17);
}
html[data-theme="light"] .app-shell .ci-section :is(.ci-summary-grid,.ci-analysis-grid,.ci-executive-grid){color:#261f1c}
html[data-theme="light"] .app-shell .ci-section :is(.ci-bars,.ci-opd-row,.ci-card-head,.ci-heading,.ci-heading-meta,.ci-efficiency-facts,.ci-value-bridge){border-color:rgba(76,52,42,.12)}
html[data-theme="light"] .app-shell .ci-section :is(.ci-bars,.ci-opd-list,.ci-ranking,.ci-table){color:#302925}
html[data-theme="light"] .app-shell .ci-section :is(.ci-bridge-arrow,.ci-eyebrow,.ci-action){color:#c45a00}
html[data-theme="light"] .app-shell .ci-section .ci-table :is(th,td){color:#302925;border-color:rgba(76,52,42,.11)}
html[data-theme="light"] .app-shell .ci-section .ci-table th{color:#746b67}
html[data-theme="light"] .app-shell .ci-section .ci-badge{background:#fff6ea;border-color:rgba(255,153,0,.25)}
html[data-theme="light"] .app-shell .ci-section .ci-status-note{background:#eef8f1;border-color:rgba(38,143,88,.2)}
/* PORTAL-1C5 · LIGHT NAVIGATION CONTRAST */
/* Dashboard navigation sits on ivory in light mode; use strong ink typography. */
html[data-theme="light"] .app-shell > nav a,
html[data-theme="light"] .app-shell .main-nav a,
html[data-theme="light"] .app-shell .dashboard-nav a,
html[data-theme="light"] .app-shell .section-nav a,
html[data-theme="light"] .app-shell .primary-nav a,
html[data-theme="light"] .app-shell .nav-tabs a{
color:#4d4744 !important;
text-shadow:none;
}
html[data-theme="light"] .app-shell > nav a:hover,
html[data-theme="light"] .app-shell .main-nav a:hover,
html[data-theme="light"] .app-shell .dashboard-nav a:hover,
html[data-theme="light"] .app-shell .section-nav a:hover,
html[data-theme="light"] .app-shell .primary-nav a:hover,
html[data-theme="light"] .app-shell .nav-tabs a:hover{
color:#991900 !important;
}
html[data-theme="light"] .app-shell > nav a:is(.active,[aria-current="page"]),
html[data-theme="light"] .app-shell .main-nav a:is(.active,[aria-current="page"]),
html[data-theme="light"] .app-shell .dashboard-nav a:is(.active,[aria-current="page"]),
html[data-theme="light"] .app-shell .section-nav a:is(.active,[aria-current="page"]),
html[data-theme="light"] .app-shell .primary-nav a:is(.active,[aria-current="page"]),
html[data-theme="light"] .app-shell .nav-tabs a:is(.active,[aria-current="page"]){
color:#1f1b19 !important;
font-weight:900;
}
html[data-theme="light"] .app-shell :is(.nav-chip,.year-label,.year-switcher label){
color:#4d4744;
}
/* Never recolor navigation contained by the deliberately dark topbar. */
html[data-theme="light"] .app-shell .topbar nav a,
html[data-theme="light"] .app-shell .topbar a{
color:#f5f7fa !important;
}
/* PORTAL-1D · MOBILE DASHBOARD HARDENING */
/* Horizontal dashboard navigation is intentionally swipeable on compact screens. */
@media (max-width:900px){
.app-shell,.app-shell>*{min-width:0}
.app-shell .command-nav{min-width:0;overflow:hidden}
.app-shell .command-nav-links{
min-width:0;width:100%;max-width:100%;
overflow-x:auto;overflow-y:hidden;
overscroll-behavior-inline:contain;
scroll-snap-type:x proximity;
scrollbar-width:none;
touch-action:pan-x;
padding-right:48px;
-webkit-overflow-scrolling:touch;
-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent 100%);
mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent 100%);
}
.app-shell .command-nav-links::-webkit-scrollbar{display:none}
.app-shell .command-nav-links>a{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
}
/* A lean two-context header: identity on the left, live controls on the right. */
@media (max-width:700px){
html,body{max-width:100%;overflow-x:hidden}
.app-shell .topbar{
display:grid;
grid-template-columns:minmax(0,1fr) auto auto;
align-items:center;
gap:10px;
padding:14px 16px;
}
.app-shell .brand{min-width:0;gap:10px}
.app-shell .brand>div:not(.brand-mark){min-width:0}
.app-shell .brand-mark.brand-logo{flex:0 0 52px;width:52px;height:52px}
.app-shell .brand-kicker{font-size:8px;line-height:1.3;letter-spacing:.11em}
.app-shell .brand-title{font-size:12px;line-height:1.18;letter-spacing:.015em}
.app-shell .brand-platform{font-size:8px;line-height:1.2;margin-top:4px;letter-spacing:.12em}
.app-shell .command-context{min-width:0;justify-self:end;align-items:flex-end}
.app-shell .command-context-title,
.app-shell .command-context-clock{display:none}
.app-shell .command-context-data{font-size:10px;white-space:nowrap}
.app-shell .command-nav{padding-inline:16px}
.app-shell .command-nav-links{gap:28px;padding-right:52px}
.app-shell .command-nav-links>a{min-height:46px;display:inline-flex;align-items:center}
.app-shell :is(a,button,select,[tabindex]):focus-visible{
outline:3px solid rgba(255,153,0,.7);
outline-offset:3px;
}
}
/* On phone width, use a concise identity without changing source content. */
@media (max-width:480px){
.app-shell .topbar{gap:8px;padding:12px}
.app-shell .brand-mark.brand-logo{flex-basis:46px;width:46px;height:46px}
.app-shell .brand-kicker{display:none}
.app-shell .brand-title{font-size:0;line-height:1}
.app-shell .brand-title::before{
content:'UKPBJ INHIL';
display:block;
color:#f5f7fa;
font-size:12px;
font-weight:900;
line-height:1.15;
white-space:nowrap;
}
.app-shell .brand-platform{display:block;font-size:7px;white-space:nowrap}
.app-shell .command-context-data{font-size:9px}
.app-shell .command-nav{padding-inline:12px}
.app-shell .command-nav-links{gap:24px}
}
@media (prefers-reduced-motion:reduce){
.app-shell .command-nav-links{scroll-behavior:auto}
}
/* PORTAL-1D1 · MOBILE NAV ROW FIX */
@media (max-width:700px){
.app-shell .command-nav{
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
gap:8px !important;
overflow:visible !important;
}
.app-shell .command-nav-links{
order:1;
flex:0 0 auto !important;
width:100% !important;
max-width:100% !important;
}
.app-shell .command-nav-tools{
order:2;
display:flex !important;
width:100% !important;
max-width:100% !important;
align-items:center !important;
justify-content:flex-end !important;
gap:8px !important;
margin:0 !important;
position:static !important;
}
}
@media (max-width:480px){
.app-shell .command-nav-tools>.nav-chip:first-child{display:none !important}
.app-shell .command-nav-tools :is(.global-year-switcher,.nav-chip:last-child){margin-left:auto}
}