/* Keigo foundation: restored from Django site.css; theme preferences retained. */
:root{--primary:#14549a;--secondary:#22b8b2;--accent:#f39a45;--navy:#132f50;--bg:#f4f7f9;--surface:#fff;--text:#22374b;--muted:#526574;--border:#d4dfe4;--field-border:#aabdc6;--radius:12px;--space:clamp(20px,3.3vw,44px);--motion:180ms;--shadow:0 10px 30px #1537450c;--on-primary:#fff;--danger:#a42936;color-scheme:light;font:16px/1.65 Arial,Helvetica,sans-serif;color:var(--text);background:var(--bg)}
*{box-sizing:border-box}body{margin:0}h1,h2,h3,p{margin:0}h1{font-size:36px;line-height:1.15;letter-spacing:-1px;font-weight:600}h2{font-size:23px;line-height:1.3;letter-spacing:-.5px;font-weight:500;margin:0 0 16px}h3{font-size:17px;line-height:1.4;margin:18px 0 12px}p{color:var(--muted);margin:16px 0;line-height:1.65}a{color:var(--primary);text-decoration:none;text-underline-offset:4px}a:hover{text-decoration:underline}img{display:block;max-width:100%;object-fit:cover}button,input,select,textarea{font:inherit}button{cursor:pointer}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a,input,select,textarea,summary{outline-offset:3px}:focus-visible{outline:1px solid var(--primary);outline-offset:2px}small,.muted{font-size:12px;color:var(--muted)}small{display:block;margin-top:5px}.eyebrow{display:block;font-size:11px;line-height:1.5;letter-spacing:2px;font-weight:700;color:var(--primary);margin:0 0 10px}.icon{width:20px;height:20px;flex:none;vertical-align:middle}.skip-link{position:fixed;left:16px;top:-100px;z-index:100;background:var(--surface);padding:12px}.skip-link:focus{top:12px}
/* One geometry for button variants; legacy primary/secondary classes remain supported. */
.button,.primary,.secondary,.outline,.ghost,.danger{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 18px;border:1px solid transparent;border-radius:6px;font-size:14px;line-height:1.4;font-weight:600;text-align:center;text-decoration:none;vertical-align:middle;max-width:100%;white-space:normal;transition:background-color var(--motion),border-color var(--motion),color var(--motion),transform 120ms}
.button,.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}.secondary{background:color-mix(in srgb,var(--primary) 6%,var(--surface));color:var(--text);border-color:var(--border)}.outline{background:transparent;color:var(--text);border-color:var(--field-border)}.ghost{background:transparent;color:var(--text);border-color:transparent}.danger{background:var(--danger);border-color:var(--danger);color:#fff}.button:hover,.primary:hover,.secondary:hover,.outline:hover,.ghost:hover,.danger:hover{text-decoration:none;filter:brightness(.95)}.ghost:hover,.secondary:hover,.outline:hover{background:color-mix(in srgb,var(--primary) 10%,var(--surface));filter:none}.button:active,.primary:active,.secondary:active{transform:translateY(1px)}button:disabled,.button[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none;filter:none}button[aria-busy=true]{cursor:progress}.icon-button{width:44px;min-width:44px;padding:10px}.inline{display:inline-flex}form>.primary{margin-top:20px}.auth-card form>.primary{width:100%}
label{display:block;font-size:14px;font-weight:600;margin:18px 0 7px}input:not([type=checkbox]),select,textarea{width:100%;max-width:100%;min-height:45px;padding:10px 13px;border:1px solid var(--field-border);border-radius:7px;background:var(--surface);color:var(--text);font-size:15px}textarea{resize:vertical;min-height:100px}input:focus,select:focus,textarea:focus{border-color:var(--primary)}input[type=checkbox]{width:19px;height:19px;accent-color:var(--primary);flex:none}.check{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:400;line-height:1.6}.check input{margin-top:3px}.password-field{position:relative}.password-field input{padding-right:52px}.password-toggle{position:absolute;right:3px;top:3px;width:42px;height:39px;border:0;border-radius:5px;background:transparent;color:var(--muted)}.form-link{display:block;text-align:right;font-size:14px;margin-top:12px}.notice,.error{padding:16px 19px;margin:18px 0;border-left:3px solid var(--primary);border-radius:4px;font-size:14px;line-height:1.6;overflow-wrap:anywhere}.notice{background:color-mix(in srgb,var(--primary) 7%,var(--surface));color:var(--text)}.error{background:#fff0ef;color:#8e3333;border-color:#b5333d}.error ul{padding-left:20px;margin:0}
/* Sidebar has one scroll region: navigation. Identity stays in the fixed footer. */
.sidebar{position:fixed;inset:0 auto 0 0;width:235px;height:100vh;height:100dvh;background:var(--surface);border-right:1px solid var(--border);padding:24px 16px 14px;display:flex;flex-direction:column;z-index:40;transition:width var(--motion),transform var(--motion)}.brand{display:flex;align-items:center;gap:10px;color:var(--navy);font-size:25px;font-weight:800;letter-spacing:2px;line-height:1.1;text-decoration:none;flex:none}.brand:hover{text-decoration:none}.brand img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:4px;flex:none}.brand>span{display:block}.brand small{font-size:8px;letter-spacing:1.2px;color:inherit;margin-top:7px}.sidebar-caption{margin:28px 10px 12px;font-size:10px;flex:none}.sidebar nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;display:flex;flex-direction:column;gap:5px;padding:4px 0 10px;scrollbar-width:thin}.sidebar nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:7px;min-height:44px;font-size:14px;color:var(--text);text-decoration:none;flex:none}.sidebar nav a:hover,.sidebar nav a.active{background:color-mix(in srgb,var(--primary) 9%,var(--surface));color:var(--primary)}.sidebar nav a.active{font-weight:600;box-shadow:inset 3px 0 var(--primary)}.sidebar nav span{overflow-wrap:anywhere}.sidebar-bottom{flex:none;border-top:1px solid var(--border);padding:12px 8px 0}.sidebar time{display:block;white-space:pre-line;font-size:11px;line-height:1.65;color:var(--muted)}.identity{display:flex;align-items:center;gap:10px;padding:12px 0 8px;font-size:13px;line-height:1.4}.identity>b{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--primary) 9%,var(--surface));color:var(--primary)}.identity>span{min-width:0;overflow-wrap:anywhere}.identity small{font-size:11px}.version{font-size:11px;margin:0}.portal-main{margin-left:235px;min-width:0;transition:margin-left var(--motion)}.sidebar-backdrop{display:none}.topbar{min-height:78px;padding:12px var(--space);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;position:relative;z-index:45}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto;min-width:0}.header-actions form{margin:0}.header-actions .button{font-size:13px}.public-link{font-weight:500}.public-link .icon{width:16px;height:16px}.notification-control{position:relative}.notification-count{position:absolute;top:0;right:-2px;border-radius:12px;background:var(--primary);color:var(--on-primary);font-size:10px;line-height:18px;min-width:18px;padding:0 4px}.language-placeholder{display:inline-flex}.language-placeholder .button{padding:10px 8px;gap:5px}.theme-menu{position:relative;margin:0}.theme-menu summary{list-style:none;cursor:pointer}.theme-menu summary::-webkit-details-marker{display:none}.theme-menu form{position:absolute;right:0;top:calc(100% + 12px);width:260px;max-width:calc(100vw - 32px);padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 15px 45px #0b375324;z-index:50}.theme-menu label:first-of-type{margin-top:0}.theme-menu .primary{width:100%}
/* Page composition remains unchanged. Direct page actions share a wrapping row. */
.page{padding:36px var(--space);max-width:1700px;margin:auto;min-width:0}.page-heading{margin-bottom:28px}.page-heading h1{margin:0 0 12px}.page-heading p{font-size:14px;margin:0}.page-content{display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;row-gap:0;min-width:0}.page-content>*{flex:0 0 100%;min-width:0;max-width:100%}.page-content>:is(a,form){flex:0 1 auto;margin-bottom:12px}.page-content>a:not(.primary):not(.secondary):not(.button){display:inline-flex;align-items:center;min-height:44px;padding:8px 0;font-size:14px;font-weight:600}.actions,.page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:24px}.actions>form,.page-actions>form{margin:0;min-width:0}.actions .primary,.page-actions .primary{margin-top:0}.actions>span{font-size:12px;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:24px}.stat{padding:23px;background:var(--surface);border:1px solid var(--border);border-radius:10px}.stat>span{font-size:13px;color:var(--muted)}.stat strong{display:block;font-size:36px;line-height:1.3;font-weight:500;color:var(--navy);margin-top:7px}.panel{padding:27px;background:var(--surface);border:1px solid var(--border);border-radius:12px;margin:0 0 24px;min-width:0}.panel>p{font-size:14px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.section-heading h2{margin:0}.section-heading select{width:auto;max-width:100%}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px}.badge{display:inline-block;font-size:11px;line-height:1.5;padding:5px 10px;border:1px solid var(--border);border-radius:20px;color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--surface));overflow-wrap:anywhere}.list-row{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:18px 0;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);font-size:14px;text-align:left;text-decoration:none;overflow-wrap:anywhere}.list-row:last-child{border-bottom:0}.list-row:hover{color:var(--primary);text-decoration:none}.steps{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 24px}.steps a{display:inline-flex;align-items:center;min-height:38px;padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:13px;background:var(--surface);color:var(--text);text-decoration:none}.steps a.active{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}.form-grid,.review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}.field{min-width:0}.review-grid>div{padding:12px 0;border-bottom:1px solid var(--border)}dt{font-size:12px;color:var(--muted)}dd{margin:5px 0 0;font-size:14px;line-height:1.65;overflow-wrap:anywhere}fieldset{border:0;padding:0;margin:0;min-width:0}fieldset:disabled{opacity:.75}.repeat-row{padding:20px;border:1px solid var(--border);border-radius:10px;margin:24px 0}.repeat-row>.secondary{margin-top:16px}.search{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin-bottom:24px}.search>input,.search>select{flex:1 1 180px;width:auto}.search>.primary{flex:0 0 auto;margin:0}.table-wrap{overflow:auto;max-width:100%}table{border-collapse:collapse;width:100%;font-size:14px}th,td{padding:15px 12px;text-align:left;border-bottom:1px solid var(--border)}th{font-size:12px;color:var(--muted)}.note{padding:18px 0;border-bottom:1px solid var(--border)}details:not(.theme-menu){margin:16px 0}summary{cursor:pointer;font-weight:600;padding:12px 0}nav[role=navigation]{margin-top:24px}nav[role=navigation] svg{width:20px}progress{width:100%;height:10px;accent-color:var(--primary);margin-top:16px}.growth{display:flex;gap:12px;align-items:end;min-height:230px;overflow-x:auto;padding-top:20px}.growth>div{flex:1;min-width:32px;display:flex;flex-direction:column;align-items:center;gap:8px}.growth i{display:block;width:70%;max-width:50px;background:var(--primary);border-radius:4px 4px 0 0}.growth strong{font-size:12px}.growth small{font-size:11px}:target{scroll-margin-top:24px}
/* Authentication keeps existing content and workflow, restoring the old story/photo treatment. */
.auth-layout{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:var(--surface)}.intro{padding:44px 12%;background:#eaf4f1;display:flex;flex-direction:column;justify-content:center}.intro .brand{margin-bottom:44px}.intro h1{font-size:43px;letter-spacing:-1.5px}.intro p{max-width:470px;font-size:15px}.intro .eyebrow{color:#087e78}.intro-footer{font-size:11px;letter-spacing:1px;color:var(--muted);margin-top:20px}.auth-photo{margin-top:20px;width:100%;height:270px;object-fit:cover;border-radius:12px}.auth-card{max-width:560px;width:100%;padding:48px;margin:auto}.auth-card h2{font-size:30px}.auth-card footer{margin-top:36px;font-size:12px;color:var(--muted)}
html[data-palette=teal]{--primary:#087e78;--secondary:#20c4ad;--accent:#1760a4;--bg:#f3fbf9}html[data-palette=navy]{--primary:#123e73;--secondary:#4e9fd1;--accent:#f0a36b;--bg:#f8f9fb}html[data-palette=aqua]{--primary:#168cb5;--secondary:#35d0c0;--accent:#f2a45d;--bg:#f3fcfc}html[data-palette=orange]{--primary:#ea7a2b;--secondary:#ffb366;--accent:#1760a4;--bg:#fff8f4}html[data-palette=black]{--primary:#111827;--secondary:#4b5563;--accent:#0ea5e9;--bg:#f7f8fa}html[data-mode=dark]{color-scheme:dark;--bg:#0d1521;--surface:#162233;--text:#e7eef8;--muted:#adbbce;--border:#30435a;--primary:#79b7fa;--shadow:0 16px 50px #0002}html[data-mode=dark][data-palette=teal]{--primary:#51d2c2;--bg:#0c1b1b;--surface:#152a29}html[data-mode=dark][data-palette=navy]{--primary:#91bbed;--bg:#0c1423;--surface:#152039}html[data-mode=dark][data-palette=aqua]{--primary:#5fd1ed;--bg:#0b1b23;--surface:#132c36}html[data-mode=dark][data-palette=orange]{--primary:#ffb274;--bg:#21170f;--surface:#302318}html[data-mode=dark][data-palette=black]{--primary:#d2dbe7;--bg:#101215;--surface:#1c2026}
html[data-mode=dark]{--on-primary:#102033;--navy:#e7eef8;--field-border:#52677e}html[data-mode=dark] .error{background:#39242a;color:#ffc0bc}html[data-mode=dark] .brand{color:var(--text)}
.collapsed .sidebar{width:88px;padding:24px 12px 14px}.collapsed .sidebar .brand{justify-content:center}.collapsed .sidebar .brand>span,.collapsed .sidebar-caption,.collapsed .sidebar nav span,.collapsed .sidebar time,.collapsed .identity>span{display:none}.collapsed .sidebar nav{margin-top:24px}.collapsed .sidebar nav a{justify-content:center;padding:11px}.collapsed .sidebar-bottom{padding:10px 0 0}.collapsed .identity{justify-content:center}.collapsed .version{font-size:10px;text-align:center}.collapsed .portal-main{margin-left:88px}
@media(max-width:1100px){.topbar{padding:12px 20px}.header-actions{gap:4px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.header-actions .public-link{padding:10px}.panel{padding:24px}}
@media(max-width:760px){.sidebar,.collapsed .sidebar{width:235px;padding:22px 16px 14px;transform:translateX(-100%);z-index:60}.mobile-nav-open .sidebar{transform:translateX(0)}.portal-main,.collapsed .portal-main{margin-left:0}.sidebar-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:55;background:#0b213e66;border:0;padding:0;width:100%;height:100%}.collapsed .sidebar .brand>span,.collapsed .sidebar-caption,.collapsed .sidebar nav span,.collapsed .sidebar time,.collapsed .identity>span{display:block}.collapsed .sidebar .brand,.collapsed .sidebar nav a,.collapsed .identity{justify-content:flex-start}.collapsed .sidebar nav{margin-top:0}.collapsed .sidebar-bottom{padding:12px 8px 0}.collapsed .version{text-align:left;font-size:11px}.topbar{padding:10px 14px;min-height:74px;gap:6px;flex-wrap:wrap}.header-actions{gap:3px}.header-actions .button{padding:9px;min-height:42px}.header-actions .icon-button{width:40px;min-width:40px}.header-actions .language-placeholder .button{padding:9px 5px}.public-link span{font-size:12px}.page{padding:28px 20px}.page-heading h1{font-size:30px}.panel{padding:20px}.form-grid,.review-grid{grid-template-columns:1fr}.stats{gap:12px}.stat{padding:18px}.stat strong{font-size:30px}.section-heading{flex-wrap:wrap}.list-row{flex-wrap:wrap}.steps{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px}.steps a{white-space:nowrap;flex-shrink:0}.auth-layout{display:block}.intro{padding:28px 7%}.intro .brand{margin-bottom:24px}.intro h1{font-size:34px}.auth-photo,.intro-footer{display:none}.auth-card{padding:32px 24px}}
@media(max-width:470px){.topbar{gap:0}.header-actions{flex:1;flex-wrap:wrap;justify-content:flex-end;gap:4px}.public-link{order:-1;flex-basis:100%;justify-content:flex-end;padding:0 4px!important;min-height:30px!important}.topbar>[data-sidebar]{align-self:flex-start;margin-top:28px}.theme-menu form{right:-92px}.stats{grid-template-columns:1fr 1fr}.page-content>:is(a,form){max-width:100%}.actions>*,.page-actions>*{max-width:100%}}
@media(max-height:600px) and (min-width:761px){.sidebar{padding-top:14px}.sidebar-caption{margin-top:14px;margin-bottom:6px}.sidebar-bottom{padding-top:8px}.identity{padding:6px 0}.sidebar time{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Shared motion tokens: no scroll library, no transition:all. */
:root{--motion-fast:160ms;--motion-normal:240ms;--motion-sidebar:280ms;--motion-feedback:320ms;--ease-out:cubic-bezier(.2,.7,.2,1);--ease-press:cubic-bezier(.2,0,.4,1)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
html{scroll-behavior:smooth;scroll-padding-top:24px}
html,body,.sidebar,.topbar,.panel,.stat,.badge,.steps a,input,select,textarea,.feedback-island{transition-property:background-color,color,border-color;transition-duration:var(--motion-normal);transition-timing-function:var(--ease-out)}
.button,.primary,.secondary,.outline,.ghost,.danger,.password-toggle{transition:background-color var(--motion-fast) var(--ease-out),color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast),transform 110ms var(--ease-press)}
.button>.icon,.sidebar nav .icon{transition:transform var(--motion-fast) var(--ease-out);transform-origin:center}
@media(hover:hover) and (pointer:fine){
 .button:not(:disabled):hover,.primary:not(:disabled):hover,.secondary:not(:disabled):hover,.outline:not(:disabled):hover,.danger:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 3px 8px #132f5014;filter:none}
 .ghost:not(:disabled):hover{transform:none;box-shadow:none}
 .public-link:hover .icon{transform:translate(1px,-1px)}
 .logout-button:hover .icon{transform:translateX(2px)}
 .sidebar nav a:hover .icon{transform:scale(1.05)}
 a.list-row:hover{background:color-mix(in srgb,var(--primary) 4%,var(--surface));border-color:var(--primary)}
 .cards>a:hover,.cards>article:has(a):hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:0 6px 18px #132f5012}
}
.button:not(:disabled):active,.primary:not(:disabled):active,.secondary:not(:disabled):active,.outline:not(:disabled):active,.ghost:not(:disabled):active,.danger:not(:disabled):active{transform:translateY(1px) scale(.985);box-shadow:none}
a{transition:color var(--motion-fast),background-color var(--motion-fast),border-color var(--motion-fast)}
.cards>a,.cards>article:has(a){transition:transform var(--motion-normal) var(--ease-out),border-color var(--motion-normal),box-shadow var(--motion-normal),background-color var(--motion-normal)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 14%,transparent)}
input,select,textarea{transition:background-color var(--motion-normal),color var(--motion-normal),border-color var(--motion-fast),box-shadow var(--motion-fast)}
input[type=checkbox],input[type=radio]{transition:box-shadow var(--motion-fast);cursor:pointer}input[type=checkbox]:active,input[type=radio]:active{box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 12%,transparent)}
/* Desktop rails stay fixed. Only the surrounding track changes width. */
@media(min-width:761px){
 .sidebar,.collapsed .sidebar{padding-left:16px;padding-right:16px;overflow:hidden;transition:width var(--motion-sidebar) var(--ease-out),background-color var(--motion-normal),border-color var(--motion-normal)}
 .portal-main,.collapsed .portal-main{transition:margin-left var(--motion-sidebar) var(--ease-out)}
 .sidebar .brand,.collapsed .sidebar .brand{justify-content:flex-start;gap:10px;min-height:44px;width:203px}
 .sidebar .brand>span,.collapsed .sidebar .brand>span{display:block;width:149px;white-space:nowrap;transition:opacity var(--motion-fast),transform var(--motion-normal) var(--ease-out);transform:translateX(0);opacity:1}
 .sidebar nav,.collapsed .sidebar nav{margin-top:0;overflow-x:hidden}
 .sidebar-caption,.collapsed .sidebar-caption{display:block;height:15px;white-space:nowrap;margin-top:28px;transition:opacity var(--motion-fast)}
 .sidebar nav a,.collapsed .sidebar nav a{justify-content:flex-start;padding:11px 12px;gap:12px;min-width:56px;overflow:hidden;transition:background-color var(--motion-fast),color var(--motion-fast)}
 .sidebar nav span,.collapsed .sidebar nav span{display:block;min-width:147px;white-space:nowrap;transition:opacity var(--motion-fast),transform var(--motion-normal) var(--ease-out);opacity:1;transform:translateX(0)}
 .sidebar-bottom,.collapsed .sidebar-bottom{height:148px;min-height:148px;padding:12px 8px 0;overflow:hidden}
 .sidebar time,.collapsed .sidebar time{display:block;height:37px;min-width:180px;transition:opacity var(--motion-fast)}
 .identity,.collapsed .identity{justify-content:flex-start;width:187px;height:66px;padding:12px 0 8px}
 .identity>span,.collapsed .identity>span{display:block;white-space:nowrap;width:143px;overflow:hidden;text-overflow:ellipsis;transition:opacity var(--motion-fast),transform var(--motion-normal) var(--ease-out)}
 .version,.collapsed .version{font-size:10px;white-space:nowrap;text-align:left;margin-left:-2px}
 .collapsed .sidebar .brand>span,.collapsed .sidebar nav span,.collapsed .identity>span{opacity:0;transform:translateX(-6px);pointer-events:none}
 .collapsed .sidebar-caption,.collapsed .sidebar time{opacity:0;pointer-events:none}
}
@media(min-width:761px) and (max-height:600px){.sidebar-caption,.collapsed .sidebar-caption{margin-top:14px}.sidebar-bottom,.collapsed .sidebar-bottom{height:134px;min-height:134px;padding-top:8px}.identity,.collapsed .identity{height:56px;padding-top:6px}}
@media(max-width:760px){
 .sidebar,.collapsed .sidebar{transition:transform var(--motion-sidebar) var(--ease-out),background-color var(--motion-normal)}
 .sidebar-backdrop:not([hidden]){display:block;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--motion-sidebar) var(--ease-out),visibility var(--motion-sidebar)}
 .mobile-nav-open .sidebar-backdrop{opacity:1;visibility:visible;pointer-events:auto}
}
/* Content enters after real document navigation; no interception or fake SPA. */

@keyframes content-enter{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

@keyframes content-exit{to{opacity:0;transform:translateY(-3px)}}
.reveal-ready{opacity:0;transform:translateY(6px)}.reveal-enter{animation:section-reveal 280ms var(--ease-out) both}@keyframes section-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.steps a{transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast)}.steps a:hover,.steps a.anchor-current{border-color:var(--primary);box-shadow:inset 0 -2px var(--primary)}
.theme-menu[open]>form,details[open]:not(.theme-menu)>:not(summary){animation:dropdown-enter 180ms var(--ease-out) both}@keyframes dropdown-enter{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
@supports(interpolate-size:allow-keywords){details:not(.theme-menu){interpolate-size:allow-keywords}details:not(.theme-menu)::details-content{height:0;opacity:0;overflow:clip;transition:height var(--motion-normal) var(--ease-out),opacity var(--motion-fast),content-visibility var(--motion-normal) allow-discrete}details[open]:not(.theme-menu)::details-content{height:auto;opacity:1}}
.repeat-row{animation:section-reveal 180ms var(--ease-out) both}.notice,.error{animation:content-enter 180ms var(--ease-out) both}.notification-count{animation:status-enter 180ms var(--ease-out) both}@keyframes status-enter{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
/* One contextual activity pill, below content controls rather than over navigation. */
.feedback-island{position:fixed;z-index:80;left:50%;bottom:max(20px,env(safe-area-inset-bottom));width:max-content;max-width:min(440px,calc(100vw - 32px));min-width:230px;display:flex;align-items:center;gap:12px;padding:11px 12px 11px 16px;border:1px solid var(--border);border-radius:24px;background:var(--surface);color:var(--text);box-shadow:0 8px 30px #132f5026;opacity:0;visibility:hidden;transform:translate(-50%,12px) scale(.96);transform-origin:bottom center;transition:opacity var(--motion-fast),transform var(--motion-feedback) var(--ease-out),visibility var(--motion-feedback),border-color var(--motion-normal),background-color var(--motion-normal),color var(--motion-normal)}
.feedback-island:not([data-state=idle]){opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}.feedback-island[data-state=error]{border-color:var(--danger)}.feedback-island[data-state=warning]{border-color:#b4770a}.feedback-symbol{width:22px;height:22px;display:grid;place-items:center;flex:none;color:var(--primary)}.feedback-symbol>*{grid-area:1/1;opacity:0;transform:scale(.8);transition:opacity var(--motion-fast),transform var(--motion-normal) var(--ease-out)}.feedback-island[data-state=busy] .feedback-spinner,.feedback-island[data-state=success] .feedback-check,.feedback-island:is([data-state=warning],[data-state=error]) .feedback-warning{opacity:1;transform:scale(1)}.feedback-island[data-state=error] .feedback-symbol{color:var(--danger)}.feedback-content{min-width:0;flex:1}.feedback-content p{font-size:13px;line-height:1.5;margin:0;color:inherit;overflow-wrap:anywhere}.feedback-content progress{height:4px;margin:7px 0 0;display:block}.feedback-content progress[hidden]{display:none}.feedback-close{width:32px;min-width:32px;min-height:32px;padding:6px;border-radius:50%;flex:none}.feedback-close .icon{width:16px;height:16px}.feedback-spinner,.is-processing:before{width:17px;height:17px;border:2px solid color-mix(in srgb,currentColor 25%,transparent);border-top-color:currentColor;border-radius:50%}.feedback-island[data-state=busy] .feedback-spinner,.is-processing:before{animation:feedback-spin 850ms linear infinite}.is-processing:before{content:'';display:inline-block;flex:none}@keyframes feedback-spin{to{rotate:360deg}}
.page{padding-bottom:100px}
@media(min-width:761px){.feedback-island{left:calc(50% + 117px)}.collapsed .feedback-island{left:calc(50% + 44px)}}
@media(max-width:760px){.mobile-nav-open .feedback-island{opacity:0;visibility:hidden;pointer-events:none}.feedback-island{max-width:calc(100vw - 32px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal-ready{opacity:1;transform:none}.feedback-island:not([data-state=idle]){transform:translate(-50%,0)}.button:hover,.primary:hover,.secondary:hover,.cards>a:hover,.cards>article:has(a):hover{transform:none}}

.feedback-content p{max-height:140px;overflow-y:auto}





@media(max-width:760px){.sidebar{pointer-events:none}.mobile-nav-open .sidebar{pointer-events:auto}}
@media(max-width:760px){.sidebar-backdrop:not([hidden]){left:235px;width:calc(100% - 235px)}}

/* v1.2.0 targeted refinement: preserve existing geometry, improve responsiveness and feedback. */
:focus-visible{outline-color:var(--primary)}
input:focus,select:focus,textarea:focus{border-color:var(--primary);outline-color:var(--primary)}
.logout-button{background:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}.logout-button:hover{background:color-mix(in srgb,var(--danger) 90%,#000)!important}
.language-switch{margin:0}.language-switch .button{padding:10px 8px;gap:5px}
.sidebar nav{scrollbar-color:color-mix(in srgb,var(--primary) 45%,transparent) transparent}.sidebar nav::-webkit-scrollbar{width:6px}.sidebar nav::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--primary) 42%,transparent);border-radius:99px}.sidebar nav::-webkit-scrollbar-track{background:transparent}
.sidebar-bottom{text-align:center;padding-bottom:2px}.sidebar time{font-size:12px;font-weight:600}.identity{justify-content:center;text-align:center;font-size:14px}.identity>span{flex:1}.identity small{font-size:12px}.version{font-size:11px;margin-top:3px;text-align:center}
.steps a.active,.steps a.anchor-current{background:color-mix(in srgb,var(--primary) 10%,var(--surface));border-color:var(--primary);color:var(--primary);box-shadow:inset 0 -2px var(--primary)}
.detail-link,.list-row span{display:inline-flex;align-items:center;gap:6px}.detail-link .icon,.list-row .icon{width:16px;height:16px}
.repeat-row>.danger{margin-top:16px}.row-enter{animation:section-reveal 180ms var(--ease-out) both}.row-exit{opacity:0;transform:translateY(-4px);transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out)}
.save-status{font-size:12px;color:var(--muted);min-width:0}.visually-detached{display:none!important}.admin-create[hidden]{display:none}.admin-create{padding:18px;margin:18px 0;border:1px solid var(--border);border-radius:10px;background:color-mix(in srgb,var(--primary) 3%,var(--surface))}
.auth-layout{height:100vh;height:100dvh;overflow:hidden}.intro{height:100vh;height:100dvh}.auth-card{max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}
.growth i{background:linear-gradient(to top,color-mix(in srgb,var(--primary) 100%,#000),color-mix(in srgb,var(--primary) 48%,#fff));transition:height var(--motion-normal) var(--ease-out),filter var(--motion-fast)}.growth>div:hover i{filter:brightness(1.05)}
@media(max-width:760px){.auth-layout{height:auto;min-height:100vh;overflow:visible}.intro{height:auto;min-height:0}.auth-card{max-height:none;overflow:visible}.sidebar-bottom{text-align:center}.collapsed .version{text-align:center}.language-switch .button{padding:9px 5px}}
.public-home{background:var(--bg);color:var(--text);scroll-behavior:smooth}.public-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:28px;padding:14px clamp(20px,5vw,72px);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}.public-header nav{display:flex;gap:22px;margin-left:auto}.public-header nav a{font-size:13px;font-weight:600;color:var(--text)}.public-actions{display:flex;gap:8px}.public-hero,.public-section{max-width:1320px;margin:auto;padding:clamp(64px,8vw,112px) clamp(20px,5vw,72px)}.public-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);align-items:center;gap:clamp(36px,7vw,96px);min-height:calc(100vh - 74px)}.public-hero h1{font-size:clamp(46px,6vw,78px);letter-spacing:-3px}.public-hero p{font-size:17px;max-width:620px}.public-hero>img{width:100%;height:min(68vh,620px);border-radius:20px;box-shadow:var(--shadow)}.public-section{border-top:1px solid var(--border)}.public-section>p{max-width:820px}.public-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}.public-grid article{padding:28px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);transition:transform var(--motion-fast) var(--ease-out),box-shadow var(--motion-fast) var(--ease-out),border-color var(--motion-fast)}.public-grid article:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 45%,var(--border));box-shadow:var(--shadow)}.public-grid article strong{font-size:28px;color:var(--primary)}.public-gallery{display:grid;grid-template-columns:1.25fr .75fr;gap:32px;align-items:center}.public-gallery img{width:100%;height:420px;border-radius:16px}.public-contact{display:flex;align-items:center;justify-content:space-between;gap:30px}.public-footer{display:flex;justify-content:space-between;gap:20px;padding:28px clamp(20px,5vw,72px);border-top:1px solid var(--border);font-size:12px;color:var(--muted);background:var(--surface)}
@media(max-width:980px){.public-header nav{display:none}.public-header .public-actions{margin-left:auto}.public-hero{grid-template-columns:1fr;min-height:auto}.public-hero>img{height:420px}.public-grid{grid-template-columns:1fr 1fr}.public-gallery{grid-template-columns:1fr}}
@media(max-width:620px){.public-header .brand span{display:none}.public-hero h1{letter-spacing:-2px}.public-grid{grid-template-columns:1fr}.public-contact{align-items:flex-start;flex-direction:column}.public-footer{flex-direction:column}.public-hero>img{height:300px}}

/* Review refinements — scoped so approved layouts stay intact. */
/* Sidebar footer: clock centered; profile compact/symmetrical; version anchored left. */
.sidebar-bottom{position:relative;text-align:center;padding:12px 8px 24px}
.sidebar time{font-size:12px;font-weight:600;text-align:center}
.identity{justify-content:center;gap:9px;padding:10px 0 8px;text-align:left;font-size:15px;font-weight:600}
.identity>b{width:36px;height:36px}
.identity>span{flex:0 1 auto;max-width:150px;text-align:center}
.identity small{font-size:12px;font-weight:400;text-align:center}
.version{position:absolute;left:8px;bottom:2px;margin:0;font-size:11px;text-align:left}
.collapsed .sidebar-bottom{padding:12px 0 24px}.collapsed .sidebar time,.collapsed .identity>span{opacity:0;visibility:hidden;width:0;overflow:hidden}.collapsed .identity{justify-content:center;gap:0}.collapsed .version{left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9px}

/* Premium summary cards: subtle depth and motion, no bouncy movement. */
.stat{position:relative;overflow:hidden;isolation:isolate;transition:transform 180ms var(--ease-out),border-color 180ms,box-shadow 180ms,background-color 180ms}
.stat::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--primary);opacity:.78;transition:width 180ms var(--ease-out),opacity 180ms}
.stat::after{content:"";position:absolute;width:120px;height:120px;right:-72px;top:-72px;border-radius:50%;background:color-mix(in srgb,var(--primary) 12%,transparent);opacity:.45;transform:scale(.82);transition:transform 220ms var(--ease-out),opacity 180ms;z-index:-1}
.stat:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 38%,var(--border));box-shadow:0 12px 30px color-mix(in srgb,var(--primary) 9%,transparent)}
.stat:hover::before{width:4px;opacity:1}.stat:hover::after{transform:scale(1);opacity:.8}.stat strong{transition:color 180ms,transform 180ms var(--ease-out)}.stat:hover strong{color:var(--primary);transform:translateX(2px)}

/* Selected/list rows: rounded, theme-aware, never a rigid rectangular strip. */
.list-row{position:relative;border-radius:9px;padding:16px 12px;margin:2px 0;transition:background-color 180ms,border-color 180ms,color 180ms,transform 150ms var(--ease-out),box-shadow 180ms}
.list-row:hover,.list-row.anchor-current{background:color-mix(in srgb,var(--primary) 9%,var(--surface));color:var(--primary);transform:translateX(2px);box-shadow:inset 3px 0 color-mix(in srgb,var(--primary) 72%,transparent)}
.list-row:active{transform:translateX(1px) scale(.997)}

/* Compact table actions reuse the portal badge/pill language. */
.detail-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border:1px solid var(--border);border-radius:20px;background:color-mix(in srgb,var(--primary) 6%,var(--surface));color:var(--primary);font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color 160ms,border-color 160ms,transform 140ms var(--ease-out),box-shadow 160ms}
.detail-pill .icon{width:14px;height:14px;transition:transform 160ms var(--ease-out)}.detail-pill:hover{background:color-mix(in srgb,var(--primary) 12%,var(--surface));border-color:color-mix(in srgb,var(--primary) 42%,var(--border));text-decoration:none;transform:translateY(-1px);box-shadow:0 4px 12px color-mix(in srgb,var(--primary) 9%,transparent)}.detail-pill:hover .icon{transform:translateX(2px)}.detail-pill:active{transform:translateY(0) scale(.985)}

/* Text-only actions: premium interaction without adding a box/pill. */
.text-action,.missing-data a,.page-content>a:not(.primary):not(.secondary):not(.button):not(.detail-pill):not(.list-row){position:relative;display:inline-flex;align-items:center;gap:5px;color:var(--primary);text-decoration:none;transition:color 160ms,transform 160ms var(--ease-out),text-shadow 160ms}
.text-action::after,.missing-data a::after,.page-content>a:not(.primary):not(.secondary):not(.button):not(.detail-pill):not(.list-row)::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform 180ms var(--ease-out)}
.text-action:hover,.missing-data a:hover,.page-content>a:not(.primary):not(.secondary):not(.button):not(.detail-pill):not(.list-row):hover{transform:translateX(2px);text-decoration:none;text-shadow:0 0 18px color-mix(in srgb,var(--primary) 20%,transparent)}
.text-action:hover::after,.missing-data a:hover::after,.page-content>a:not(.primary):not(.secondary):not(.button):not(.detail-pill):not(.list-row):hover::after{transform:scaleX(1);transform-origin:left}
.text-action .icon{width:17px;height:17px;transition:transform 160ms var(--ease-out)}.text-action:hover .icon{transform:translateX(-2px)}
.missing-data ul{display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0 0;padding-left:20px}.missing-data li{padding:2px 0}.missing-data a{font-weight:600}

/* Focus is deliberately thin; theme color remains visible without a double heavy ring. */
:where(button,a,input,select,textarea,summary):focus-visible{outline:1px solid color-mix(in srgb,var(--primary) 72%,transparent);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:color-mix(in srgb,var(--primary) 72%,var(--field-border));box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 12%,transparent)}

@media(max-width:760px){.sidebar-bottom{padding:12px 8px 24px}.identity{font-size:14px}.version{left:8px}.stat:hover{transform:none}.list-row:hover{transform:none}}
@media(min-width:761px){.collapsed .version{left:4px;transform:none;text-align:left;font-size:9px}}

/* Review 03 — student CV polish + locked interaction language. */
/* Sidebar identity is one centered visual unit; version remains anchored to the lower-left. */
.identity{display:block;padding:10px 0 8px;text-align:center}
.identity-inner{display:grid;grid-template-columns:38px minmax(0,auto);align-items:center;justify-content:center;column-gap:10px;width:max-content;max-width:100%;margin:0 auto;text-align:center}
.identity-inner>b{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--primary) 9%,var(--surface));color:var(--primary);font-size:14px}
.identity-inner>span{min-width:0;max-width:150px;font-size:15px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.identity-inner small{font-size:12px;font-weight:400;text-align:center;margin-top:5px}
.collapsed .identity-inner{grid-template-columns:38px;column-gap:0}.collapsed .identity-inner>span{display:none}.collapsed .identity{padding-inline:0}
.sidebar-bottom .version{left:8px;bottom:2px;transform:none;text-align:left}

/* CV cards keep badge/title hierarchy breathable and premium. */
.cv-card>.badge{margin-bottom:10px}.cv-card>h2{margin-top:0;margin-bottom:18px}
.cv-card{position:relative;overflow:hidden;transition:transform 180ms var(--ease-out),border-color 180ms,box-shadow 180ms,background-color 180ms}
.cv-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 38%,var(--border));box-shadow:0 12px 28px color-mix(in srgb,var(--primary) 8%,transparent)}
.cv-card progress{transition:accent-color 180ms}

/* Student review actions stay one coherent row on desktop; only wrap when space is genuinely tight. */
.review-actions{align-items:center}.review-actions>form{display:flex}.review-actions button,.review-actions>a{min-height:44px}

/* CV version history: rounded interactive rows instead of rigid full-width strips. */
.cv-version-list{display:flex;flex-direction:column;gap:6px;padding:2px 0}
.cv-version-row{border:1px solid transparent!important;border-radius:10px!important;padding:14px 12px!important;margin:0!important}
.cv-version-row:hover{border-color:color-mix(in srgb,var(--primary) 24%,var(--border))!important;background:color-mix(in srgb,var(--primary) 8%,var(--surface));box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 7%,transparent)}
.cv-version-row>span:last-child{color:var(--text);font-variant-numeric:tabular-nums}

/* Text-only clickable elements share the Pink Beach/Randusanga-inspired feel without becoming pills. */
.text-action,.missing-data a,.page-content>a:not(.primary):not(.secondary):not(.button):not(.detail-pill):not(.list-row){isolation:isolate;padding-inline:2px}
.text-action::before,.missing-data a::before,.page-content>a:not(.primary):not(.secondary):not(.button):not(.detail-pill):not(.list-row)::before{content:"";position:absolute;inset:-4px -6px;border-radius:7px;background:color-mix(in srgb,var(--primary) 8%,transparent);opacity:0;transform:scale(.96);transition:opacity 160ms var(--ease-out),transform 180ms var(--ease-out);z-index:-1}
.text-action:hover::before,.missing-data a:hover::before,.page-content>a:not(.primary):not(.secondary):not(.button):not(.detail-pill):not(.list-row):hover::before{opacity:1;transform:scale(1)}
.text-action:active,.missing-data a:active,.page-content>a:not(.primary):not(.secondary):not(.button):not(.detail-pill):not(.list-row):active{transform:translateX(1px) scale(.985)}

@media(max-width:760px){.review-actions{gap:10px}.cv-version-row{align-items:flex-start}.identity-inner>span{font-size:14px}}
@media(prefers-reduced-motion:reduce){.cv-card:hover,.text-action:hover,.missing-data a:hover{transform:none}}

/* Review 04 — requested-only refinements. */
/* Authentication: pure centered form, no split artwork/copy panel. */
.guest{min-height:100vh;min-height:100dvh;background:var(--surface)}
.auth-layout.auth-centered{display:grid;grid-template-columns:1fr;place-items:center;min-height:100vh;min-height:100dvh;height:auto;overflow:visible;padding:32px 20px;background:var(--surface)}
.auth-centered .auth-card{width:min(100%,560px);max-width:560px;max-height:none;overflow:visible;margin:auto;padding:48px}
.auth-card>p:last-of-type a,.auth-card>a,.auth-card .form-link{position:relative;display:inline-flex;text-decoration:none}
.auth-card>p:last-of-type a::after,.auth-card>a::after,.auth-card .form-link::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:1px;background:currentColor;transition:left 180ms var(--ease-out),right 180ms var(--ease-out)}
.auth-card>p:last-of-type a:hover::after,.auth-card>a:hover::after,.auth-card .form-link:hover::after{left:0;right:0}
.auth-card .form-link{display:flex;width:max-content;margin-left:auto}

/* Text-only links: preserve the approved background/color feel; underline grows from center. */
.text-action::after,.missing-data a::after,.page-content>a:not(.primary):not(.secondary):not(.button):not(.detail-pill):not(.list-row)::after{left:50%;right:50%;transform:none;transform-origin:center;transition:left 180ms var(--ease-out),right 180ms var(--ease-out)}
.text-action:hover::after,.missing-data a:hover::after,.page-content>a:not(.primary):not(.secondary):not(.button):not(.detail-pill):not(.list-row):hover::after{left:0;right:0;transform:none}

/* Search: clear control plus automatic reset when the query becomes empty. */
.search-input-wrap{position:relative;min-width:0;flex:1}.search-input-wrap input{padding-right:42px}.search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:20px;line-height:1;display:grid;place-items:center}.search-clear:hover{background:color-mix(in srgb,var(--primary) 8%,var(--surface));color:var(--primary)}.search-clear[hidden]{display:none}.table-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.table-actions form{margin:0}.table-actions button.detail-pill{font:inherit;cursor:pointer}

/* CV index / review action placement. */
.cv-index-heading,.cv-top-actions{display:flex;align-items:center;justify-content:space-between;gap:18px}.cv-index-heading>p{margin:0}.cv-index-heading form,.cv-top-actions form{margin:0}.cv-picker{display:flex;align-items:end;gap:12px;margin:18px 0}.cv-picker label{margin:0;min-width:70px}.cv-picker select{max-width:430px}.cv-create{padding:14px 18px;margin:18px 0}.cv-create summary{cursor:pointer;list-style:none;width:max-content}.cv-create summary::-webkit-details-marker{display:none}.cv-create form{max-width:520px;padding-top:8px}.cv-create form>.primary{width:auto}
.steps a[href$="/tinjau"]{border-color:color-mix(in srgb,var(--secondary) 55%,var(--border));background:color-mix(in srgb,var(--secondary) 9%,var(--surface));color:color-mix(in srgb,var(--secondary) 72%,var(--text));font-weight:700}.steps a[href$="/tinjau"]:hover{background:color-mix(in srgb,var(--secondary) 16%,var(--surface))}.steps a[href$="/tinjau"].active{background:var(--secondary);border-color:var(--secondary);color:#fff}
.cv-version-row>span:first-child{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.cv-version-row>span:first-child small{width:100%;margin:0}.cv-version-row .badge{margin:0}

/* Sidebar footer: no initial avatar; name and clock match navigation text scale. */
.sidebar time{font-size:14px;line-height:1.5}.identity-inner{display:block;width:100%;max-width:100%;text-align:center}.identity-inner>span{display:block;max-width:none;font-size:14px;line-height:1.4}.identity-inner small{font-size:12px}.collapsed .identity-inner{display:block}.collapsed .identity-inner>span{display:none}

/* Scroll-to-top only appears when script detects a genuinely long page. */
.scroll-top{position:fixed;right:24px;bottom:24px;z-index:35;width:44px;height:44px;border:1px solid color-mix(in srgb,var(--primary) 32%,var(--border));border-radius:50%;background:color-mix(in srgb,var(--primary) 92%,var(--surface));color:var(--on-primary);display:grid;place-items:center;box-shadow:0 10px 24px color-mix(in srgb,var(--primary) 18%,transparent);opacity:0;visibility:hidden;transform:translateY(10px) scale(.94);transition:opacity 180ms var(--ease-out),visibility 180ms,transform 180ms var(--ease-out),box-shadow 180ms}.scroll-top.is-visible{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.scroll-top:hover{box-shadow:0 13px 28px color-mix(in srgb,var(--primary) 24%,transparent);transform:translateY(-2px)}.scroll-top .icon{width:18px;height:18px;transform:rotate(-90deg)}
@media(max-width:760px){.auth-centered .auth-card{padding:32px 24px}.cv-index-heading,.cv-top-actions{align-items:flex-start;flex-wrap:wrap}.cv-index-heading form,.cv-top-actions form{margin-left:auto}.cv-picker{align-items:stretch;flex-direction:column}.scroll-top{right:16px;bottom:16px}.table-actions{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scroll-top{transition:none}.auth-card>p:last-of-type a::after,.auth-card>a::after,.auth-card .form-link::after{transition:none}}


/* Final review polish: only the explicitly requested alignment/spacing fixes. */
/* Activity pill stays visually unchanged and is centered to the viewport, independent of sidebar state. */
@media(min-width:761px){.feedback-island,.collapsed .feedback-island{left:50%}}

/* Sidebar footer: symmetric clock block and divider; admin identity gets a static theme-aware name plate. */
.sidebar-bottom>time{width:100%;margin:0 auto;padding:0 0 10px;border-bottom:1px solid var(--border);text-align:center}
.sidebar-bottom .identity{width:100%;margin:0 auto;text-align:center}
.sidebar-bottom .identity-inner{width:100%;margin:0 auto;text-align:center}
.sidebar-bottom .identity-inner>span{width:100%;text-align:center}
.sidebar-bottom .identity-inner strong{display:block;font-size:14px;line-height:1.4;font-weight:700}
.sidebar-bottom .identity-inner small{display:block}
.admin-identity .identity-inner strong{width:100%;padding:9px 10px;border-radius:7px;background:color-mix(in srgb,var(--primary) 9%,var(--surface));color:var(--primary);transition:none}
.admin-identity .identity-inner strong:hover{background:color-mix(in srgb,var(--primary) 9%,var(--surface));color:var(--primary)}

/* Admin student detail: one grid line from the back action/tabs to the far-right CV export. */
.student-detail-actions{width:100%;justify-content:space-between;margin-top:0}
.student-detail-actions>.text-action{margin-left:4px}
.student-detail-actions>form{margin-left:auto}
#cv>.text-action{margin-top:10px}

@media(max-width:760px){
 .student-detail-actions{align-items:center}
 .student-detail-actions>.text-action{margin-left:0}
}

/* v1.2.1 — synchronized actions + sidebar collapse control. */
/* Top-level actions share one vertical rhythm while each action keeps its contextual visual language. */
.page-content>.page-actions{margin-top:0;margin-bottom:12px}
.page-content>.steps:not([aria-label="Langkah CV"]){margin-top:0}
.page-content>.primary.inline,.page-content>.secondary{margin-top:0;margin-bottom:12px}
.page-content>.primary.inline+.panel,.page-content>.secondary+.panel{margin-top:0}
.page-content>.steps:not([aria-label="Langkah CV"]) a{min-height:38px;padding:8px 12px}

/* Collapse lives inside the sidebar. Navigation only gets a little breathing room below the caption/control area. */
.sidebar-panel-toggle{flex:none;align-self:flex-start;width:40px;height:40px;margin:0 0 12px 4px;padding:8px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background-color 180ms var(--ease-out),color 180ms var(--ease-out),transform 140ms var(--ease-out)}
.sidebar-panel-toggle:hover{background:color-mix(in srgb,var(--primary) 9%,var(--surface));color:var(--primary)}
.sidebar-panel-toggle:active{transform:scale(.96)}
.sidebar-panel-icon{width:22px;height:22px;overflow:visible}
.sidebar-panel-chevron{transform-box:fill-box;transform-origin:center;transition:transform 260ms var(--ease-out)}
.collapsed .sidebar-panel-chevron{transform:rotate(180deg)}
.sidebar nav{padding-top:8px}
.mobile-sidebar-toggle{display:none}
.collapsed .sidebar-panel-toggle{align-self:center;margin-left:0;margin-right:0}

@media(max-width:760px){
 .sidebar-panel-toggle{display:none}
 .mobile-sidebar-toggle{display:grid}
 .sidebar nav{padding-top:8px}
}
@media(prefers-reduced-motion:reduce){.sidebar-panel-chevron{transition:none}}

/* v1.2.2 — final sidebar polish, standalone export hierarchy, and explicit named-CV creation. */
/* Caption belongs visually to the brand block, not to the left edge of navigation. */
.sidebar-caption,.collapsed .sidebar-caption{width:100%;margin-left:0;margin-right:0;text-align:center}

/* Keep scrolling available without showing a vertical scrollbar/track. */
.sidebar nav,.collapsed .sidebar nav{scrollbar-width:none;-ms-overflow-style:none}
.sidebar nav::-webkit-scrollbar,.collapsed .sidebar nav::-webkit-scrollbar{display:none;width:0;height:0}

/* Compact navigation rhythm: breathable below the header, but no long downward spread. */
.sidebar nav,.collapsed .sidebar nav{gap:3px;padding-top:7px}
.sidebar nav a,.collapsed .sidebar nav a{min-height:40px;padding-top:8px;padding-bottom:8px}

/* Simple animated chevron: < when open, > when collapsed. */
.sidebar-panel-toggle{align-self:flex-start}
.sidebar-panel-icon{width:21px;height:21px}
.sidebar-panel-chevron{transform-box:view-box;transform-origin:12px 12px;transition:transform var(--motion-sidebar) var(--ease-out)}
.collapsed .sidebar-panel-chevron{transform:rotate(180deg)}

/* Gold is reserved for standalone export utilities outside forms/action pairs. */
.standalone-export{background:#F8D978;border-color:#D8AD35;color:#27364A;font-weight:700;box-shadow:0 2px 7px #8b6b1714}
.standalone-export:hover{background:#F4CC58;border-color:#C99B24;color:#1F2D3D}
.standalone-export:active{background:#EEC247;transform:translateY(1px)}
html[data-mode="dark"] .standalone-export{background:#D4A72C;border-color:#E2BC51;color:#111827}
html[data-mode="dark"] .standalone-export:hover{background:#E0B63C;border-color:#F0CC66;color:#0B1220}

/* The create-CV control is the explicit entry point: click it, then name the CV before Step 1. */
.cv-create>summary{cursor:pointer}
.cv-create[open]>summary{margin-bottom:14px}

/* v1.2.3 — sidebar-layout-only refinement. Keep page/content layouts untouched. */
@media(min-width:761px){
  /* Open: center the complete Keigo brand group. Collapsed: center the logo alone. */
  .sidebar .brand,.collapsed .sidebar .brand{
    width:100%;
    min-height:44px;
    justify-content:center;
    gap:10px;
    overflow:hidden;
  }
  .sidebar .brand>span,.collapsed .sidebar .brand>span{
    flex:0 0 auto;
    width:149px;
    max-width:149px;
    overflow:hidden;
    opacity:1;
    transform:translateX(0);
    transition:max-width var(--motion-sidebar) var(--ease-out),width var(--motion-sidebar) var(--ease-out),opacity var(--motion-fast),transform var(--motion-sidebar) var(--ease-out);
  }
  .collapsed .sidebar .brand{gap:0}
  .collapsed .sidebar .brand>span{
    display:block;
    width:0;
    max-width:0;
    opacity:0;
    transform:translateX(-5px);
    pointer-events:none;
  }

  /* Toggle icon shares the same X rail as navigation icons. */
  .sidebar-panel-toggle{
    align-self:flex-start;
    margin-left:2px;
    margin-right:0;
  }
  .collapsed .sidebar-panel-toggle{
    align-self:flex-start;
    margin-left:2px;
    margin-right:0;
  }

  /* Footer dividers get their own breathing room and never collide with clock/name. */
  .sidebar-bottom,.collapsed .sidebar-bottom{
    height:auto;
    min-height:164px;
    padding:12px 8px 4px;
    overflow:hidden;
  }
  .sidebar-bottom>time{
    height:auto;
    min-height:0;
    padding:0 0 9px;
    margin:0 0 10px;
    border-bottom:1px solid var(--border);
    line-height:1.55;
  }
  .sidebar-bottom .identity,.collapsed .sidebar-bottom .identity{
    height:auto;
    min-height:54px;
    padding:0 0 7px;
    margin:0;
  }
  .sidebar-bottom .version,.collapsed .sidebar-bottom .version{
    display:block;
    margin-top:2px;
  }
}

/* v1.2.4 — final sidebar alignment only. Page/content layouts remain untouched. */
@media(min-width:761px){
  /* Expanded branding: center the VISIBLE KIB + KEIGO group, not a fixed invisible text box. */
  body:not(.collapsed) .sidebar .brand{
    width:100%;
    justify-content:center;
  }
  body:not(.collapsed) .sidebar .brand>span{
    width:auto;
    max-width:none;
    flex:0 0 auto;
  }

  /* Collapse/expand control follows the exact sidebar-menu row geometry. */
  .sidebar-panel-toggle,
  .collapsed .sidebar-panel-toggle{
    align-self:stretch;
    width:100%;
    min-height:40px;
    height:40px;
    margin:0;
    padding:8px 12px;
    border:0;
    border-radius:7px;
    background:transparent;
    justify-content:flex-start;
    place-items:center start;
  }
  .sidebar-panel-toggle:hover,
  .collapsed .sidebar-panel-toggle:hover{
    background:color-mix(in srgb,var(--primary) 9%,var(--surface));
    color:var(--primary);
  }
  .collapsed .sidebar-panel-toggle{
    justify-content:center;
    place-items:center;
    padding-left:11px;
    padding-right:11px;
  }

  /* Keep version as the fixed anchor; only lift clock/name/role together. */
  .sidebar-bottom>time,
  .sidebar-bottom .identity{
    transform:translateY(-8px);
  }
}

/* v1.2.5 — sidebar scale, shared top-body exports, CV selection flow, and text-only underline scope. */
@media(min-width:761px){
  /* Keep approved menu spacing; move the toggle + following nav group down as one block. */
  .sidebar-panel-toggle,.collapsed .sidebar-panel-toggle{margin-top:10px}

  /* Branding regains the stronger scale of the earlier portal while staying centered. */
  .sidebar .brand img,.collapsed .sidebar .brand img{width:52px;height:52px}
  .sidebar .brand,.collapsed .sidebar .brand{min-height:52px}
  body:not(.collapsed) .sidebar .brand{gap:11px}
  .sidebar .brand{font-size:26px}
  .sidebar .brand small{font-size:8.5px}

  /* Slightly stronger visual scale only; approved vertical spacing remains unchanged. */
  .sidebar nav a,.collapsed .sidebar nav a{font-size:15px}
  .sidebar nav a>.icon,.collapsed .sidebar nav a>.icon{width:21px;height:21px}

  /* In collapsed mode move only the visible chevron glyph, never its row/background. */
  .collapsed .sidebar-panel-icon{transform:translateX(-2px)}
}

/* One shared geometry for every primary export utility at the top of page body. */
.top-body-actions,.student-detail-actions{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px 18px;margin-top:0;margin-bottom:12px}
.top-body-export{margin-left:auto}
.page-content>.top-body-export{margin-left:auto}
@media(max-width:760px){.top-body-actions,.student-detail-actions{align-items:center}.top-body-export{margin-left:auto}}

/* Underline belongs to the words only. Icons/chevrons sit outside the animated line. */
.text-action::after{display:none}
.text-action .text-action-label{position:relative;display:inline-block}
.text-action .text-action-label::after{content:"";position:absolute;left:50%;right:50%;bottom:-1px;height:1px;background:currentColor;transition:left 180ms var(--ease-out),right 180ms var(--ease-out)}
.text-action:hover .text-action-label::after{left:0;right:0}
/* Apply the same word-only underline boundary to every shared text-link treatment. */
.missing-data a::after,.page-content>a:not(.primary):not(.secondary):not(.button):not(.detail-pill):not(.list-row)::after{display:none}
.word-underline-label{position:relative;display:inline-block}
.word-underline-label::after{content:"";position:absolute;left:50%;right:50%;bottom:-1px;height:1px;background:currentColor;transition:left 180ms var(--ease-out),right 180ms var(--ease-out)}
a:hover>.word-underline-label::after{left:0;right:0}
.cv-rename{margin:4px 0 16px}.cv-rename summary{width:max-content;cursor:pointer;color:var(--primary);font-size:13px;font-weight:600}.cv-rename form{margin-top:10px}.cv-rename form label{margin-top:0}.cv-rename form>.secondary{margin-top:10px}

/* v1.2.7 — reviewed sidebar hierarchy, CV entry flow, status badge, and export consistency. */
@media(min-width:761px){
  /* Branding is the sidebar header. OPERASIONAL LPK belongs to navigation and aligns visually with PORTAL ADMIN. */
  .sidebar .brand img,.collapsed .sidebar .brand img{width:58px;height:58px}
  .sidebar .brand,.collapsed .sidebar .brand{min-height:58px}
  body:not(.collapsed) .sidebar .brand{gap:12px}
  .sidebar .brand{font-size:27px}
  .sidebar .brand small{font-size:9px}

  .sidebar-caption,.collapsed .sidebar-caption{
    margin-top:31px;
    margin-bottom:12px;
    font-size:16px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.9px;
    color:var(--navy);
  }

  /* Move only the navigation group lower; approved spacing between menu rows stays untouched. */
  .sidebar-panel-toggle,.collapsed .sidebar-panel-toggle{margin-top:15px}
  .sidebar nav,.collapsed .sidebar nav{padding-top:3px}

  /* Collapsed correction applies to the glyph only, never the menu-row background. */
  .collapsed .sidebar-panel-icon{transform:translateX(-3px)}
}

/* CV name and state use the same badge language already approved in Data Siswa tables. */
.cv-list-title{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap}
.cv-list-title>strong{font-weight:600;color:inherit}
.cv-list-title>.badge{margin:0;flex:none}

/* One geometry for every page-level export row. */
.export-action-row{margin-top:0}
.top-body-actions,.student-detail-actions{margin-top:0;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px 18px}
.top-body-actions>.top-body-export,.top-body-actions>form:has(.top-body-export),.student-detail-actions>form:has(.top-body-export){margin-left:auto}

/* Tinjauan / Ajukan remains a special accent but keeps the same motion feedback as the other step buttons. */
.steps a[href$="/tinjau"]{transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast),transform 140ms var(--ease-out)}
.steps a[href$="/tinjau"]:hover{transform:translateY(-1px);box-shadow:0 4px 12px color-mix(in srgb,var(--secondary) 18%,transparent),inset 0 -2px var(--secondary)}
.steps a[href$="/tinjau"]:active{transform:translateY(0) scale(.98)}
@media(prefers-reduced-motion:reduce){.steps a[href$="/tinjau"]{transition:none}.steps a[href$="/tinjau"]:hover,.steps a[href$="/tinjau"]:active{transform:none}}


/* v1.2.8 — Portal Siswa body-only layout pass. Sidebar/navbar/admin remain untouched. */
.student-next-step{padding:27px}
.student-next-step-row{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.student-next-step-row>div{min-width:0}
.student-next-step-row .eyebrow{margin-bottom:10px}
.student-next-step-row h2{margin:0}
.student-next-step-row>.primary{flex:none;margin:0}

.student-cv-heading{width:100%;margin-bottom:22px;align-items:center}
.student-cv-heading>p{margin:0}
.student-cv-heading>form{margin-left:auto}
.student-cv-picker{width:100%;display:grid;grid-template-columns:92px minmax(240px,430px);align-items:center;gap:14px;margin:0 0 24px}
.student-cv-picker label{margin:0}
.student-cv-picker select{width:100%;max-width:none}
.student-cv-create{width:100%;padding:24px 27px;margin:0 0 24px}
.student-cv-create>summary.primary{display:inline-flex;width:auto;min-height:44px;padding:10px 18px;border-radius:6px;list-style:none;color:var(--on-primary)}
.student-cv-create>summary.primary::-webkit-details-marker{display:none}
.student-cv-create[open]>summary{margin-bottom:22px}
.student-cv-create form{width:min(100%,620px);max-width:none;padding:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 14px}
.student-cv-create form label{grid-column:1/-1;margin:0}
.student-cv-create form input{grid-column:1;margin:0}
.student-cv-create form>.primary{grid-column:2;margin:0;min-width:112px;border-radius:6px}
.student-cv-card{padding:27px}
.student-cv-card-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:4px}
.student-cv-card-head h2{margin:0;min-width:0}
.student-cv-card-head .badge{margin-left:auto;flex:none}
.student-cv-card progress{margin-top:18px}
.student-cv-card>p{margin:8px 0 16px}
.student-cv-card>.primary{border-radius:6px}

.student-document-form,.student-document-list{padding:27px}
.student-document-form form{width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.student-document-form form>label{margin:0 0 8px}
.student-document-form form>:is(input,select){margin:0 0 22px}
.student-document-form form>button.primary{width:max-content;margin:2px 0 0;border-radius:6px}
.student-document-list h2{margin:0 0 12px}
.student-document-list>.list-row{padding:16px 0}
.student-document-list>p{margin:8px 0 0}

.review-actions form[action^="/cv-export/"] button{background:#F8D978;border-color:#D8AD35;color:#27364A;font-weight:700;box-shadow:0 2px 7px #8b6b1714}
.review-actions form[action^="/cv-export/"] button:hover{background:#F4CC58;border-color:#C99B24;color:#1F2D3D}
html[data-mode="dark"] .review-actions form[action^="/cv-export/"] button{background:#D4A72C;border-color:#E2BC51;color:#111827}

@media(min-width:761px){
 .review-actions{display:flex;align-items:center;flex-wrap:nowrap}
 .review-actions>form{display:flex;margin:0}
 .review-actions .primary,.review-actions .secondary{margin:0}
}
@media(max-width:760px){
 .student-next-step-row{flex-wrap:wrap}
 .student-next-step-row>.primary{width:auto}
 .student-cv-heading{align-items:flex-start}
 .student-cv-heading>form{margin-left:0;width:100%}
 .student-cv-heading>form .primary{width:100%}
 .student-cv-picker{grid-template-columns:1fr;gap:8px}
 .student-cv-create{padding:20px}
 .student-cv-create form{grid-template-columns:1fr}
 .student-cv-create form label,.student-cv-create form input,.student-cv-create form>.primary{grid-column:1}
 .student-cv-create form>.primary{width:100%}
 .student-cv-card,.student-document-form,.student-document-list{padding:20px}
 .review-actions{align-items:stretch}
 .review-actions>form{width:100%}
 .review-actions>form>button,.review-actions>a{width:100%}
}

/* v1.3.0 — Portal Siswa only: final heading actions + unified CV manager. */
.student-heading-action{width:100%;display:flex;justify-content:flex-end;align-items:center;margin-top:-64px;margin-bottom:28px;min-height:36px;pointer-events:none}
.student-heading-action>*{pointer-events:auto;margin:0}
.student-heading-action .primary{margin:0}

.student-cv-manager{width:100%;padding:27px;margin:0}
.student-cv-primary-section{padding:0 0 26px}
.student-cv-card-head{display:flex;align-items:center;justify-content:space-between;gap:18px}
.student-cv-card-head h2{margin:0;min-width:0}
.student-cv-card-actions{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:none}
.student-cv-card-actions .badge{margin:0}
.student-cv-open{margin:0;border-radius:999px;padding-inline:18px;min-height:40px}
.student-cv-primary-section progress{margin-top:22px}
.student-cv-primary-section>p{margin:8px 0 0}
.student-cv-form-section{border-top:1px solid var(--line);padding:26px 0 0;margin-top:0}
.student-cv-form-section+.student-cv-form-section{margin-top:26px}
.student-cv-form-section h3{margin:0 0 18px;font-size:16px}
.student-cv-inline-form{width:100%;margin:0}
.student-cv-inline-form>label{display:block;margin:0 0 8px}
.student-cv-field-row{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px}
.student-cv-field-row input{width:100%;margin:0}
.student-cv-field-row :is(.primary,.secondary){margin:0;min-width:122px;justify-self:end;border-radius:6px}

@media(max-width:760px){
 .student-heading-action{margin-top:0;margin-bottom:20px;justify-content:flex-start;min-height:0}
 .student-heading-action .primary{width:100%}
 .student-cv-manager{padding:20px}
 .student-cv-card-head{align-items:flex-start;flex-wrap:wrap}
 .student-cv-card-actions{width:100%;margin-left:0;justify-content:flex-end}
 .student-cv-field-row{grid-template-columns:1fr}
 .student-cv-field-row :is(.primary,.secondary){width:100%;justify-self:stretch}
}


/* v1.3.1 final surgical fixes — only explicitly reopened targets. */
.student-identity .identity-inner strong{width:100%;padding:9px 10px;border-radius:7px;background:color-mix(in srgb,var(--primary) 9%,var(--surface));color:var(--primary);transition:none}
.student-identity .identity-inner strong:hover{background:color-mix(in srgb,var(--primary) 9%,var(--surface));color:var(--primary)}
.cv-list-meta{margin-left:auto;display:inline-flex;align-items:center;justify-content:flex-end;gap:12px;flex:none}
.cv-list-meta .badge{margin:0}
@media(max-width:760px){.cv-list-meta{gap:8px}}