/* Shared visual language for the administration and both sign-in screens. */
.admin-view, .login-view { --workspace-ink:#25223d; --workspace-muted:#716d83; --workspace-line:#e9e6f0; --workspace-accent:#6540d8; background:#f7f8fc; color:var(--workspace-ink); }
.skip-link { position:fixed; top:-80px; left:20px; z-index:2000; background:#fff; padding:12px 20px; border-radius:10px; }
.skip-link:focus { top:12px; }
.admin-view .app-navbar,.login-view .app-navbar { animation:none; box-shadow:none; background:#fff; }
.admin-view .app-navbar > .container { max-width:none; padding:0 32px; }
.admin-view .app-main { max-width:none; min-width:0; padding:30px 36px !important; }
.admin-layout { display:grid; grid-template-columns:248px minmax(0,1fr); max-width:1800px; margin:auto; }
.admin-sidebar { position:sticky; top:73px; height:calc(100dvh - 73px); overflow-y:auto; padding:30px 18px 22px; background:#fff; border-right:1px solid var(--workspace-line); display:flex; flex-direction:column; }
.admin-brand { display:flex; gap:12px; align-items:center; padding:0 10px 24px; font-size:1.16rem; font-weight:800; }
.admin-brand div > span { display:block; font-size:.59rem; letter-spacing:.13em; color:var(--workspace-muted); margin-top:4px; }
.workspace-icon { width:43px; height:43px; display:inline-grid; place-items:center; border-radius:13px; color:var(--workspace-accent); background:#f0ebff; flex-shrink:0; font-size:1.2rem; }
.admin-menu > summary { display:none; }
.admin-nav-label { font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:#827c93; margin:23px 12px 9px; }
.admin-nav-label:first-child { margin-top:0; }
.admin-nav-item { display:flex; align-items:center; gap:12px; padding:12px; margin:3px 0; color:#635d77; border-radius:10px; text-decoration:none; font-size:.81rem; font-weight:600; }
.admin-nav-item i { font-size:1rem; }
.admin-nav-item:hover { background:#f7f5fc; color:var(--workspace-accent); }
.admin-nav-item.active { background:#eee8ff; color:#5932c5; font-weight:800; }
.admin-sidebar-footer { margin-top:auto; padding:28px 12px 0; font-size:.76rem; }
.admin-sidebar-footer span { display:block; color:var(--workspace-muted); margin-bottom:16px; }
.admin-sidebar-footer a { text-decoration:none; color:#625874; }
.admin-sidebar-footer i { margin-right:9px; }
.admin-view .course-context { background:#fff !important; border:1px solid var(--workspace-line); font-size:.8rem; margin-bottom:30px !important; }
.admin-view .course-context .btn { font-size:.74rem; }
.workspace-heading { display:flex; gap:24px; align-items:center; justify-content:space-between; margin:12px 0 28px; }
.workspace-eyebrow { font-size:.64rem; font-weight:800; letter-spacing:.12em; color:var(--workspace-accent); margin-bottom:10px; }
.workspace-heading h1 { font-size:clamp(1.8rem,3vw,2.6rem); font-weight:800; letter-spacing:-.055em; }
.workspace-heading > div > p:last-child { color:var(--workspace-muted); font-size:.87rem; line-height:1.7; margin:10px 0 0; }
.workspace-heading > .btn { flex-shrink:0; }
.admin-view .btn,.login-view .btn { border-radius:10px !important; box-shadow:none; }
.admin-view .btn-primary,.login-view .btn-primary { background:var(--workspace-accent); border-color:var(--workspace-accent); color:#fff; }
.admin-view .btn-primary:hover,.login-view .btn-primary:hover { background:#5130b6; border-color:#5130b6; }
.admin-view .btn-outline-primary { border-color:#d8cdf5; color:#5c39be; }
.admin-view .btn-outline-primary:hover { background:#f0ebff; }
.workspace-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:26px; }
.workspace-stat { border:1px solid var(--workspace-line); padding:23px; border-radius:16px; background:white; }
.workspace-stat > div { display:flex; align-items:center; justify-content:space-between; color:#686078; font-size:.77rem; font-weight:600; gap:12px; }
.workspace-stat i { background:#f2effb; padding:8px 11px; border-radius:10px; color:#7454bd; }
.workspace-stat strong { display:block; font-size:2.35rem; font-weight:800; letter-spacing:-.055em; margin:8px 0 3px; }
.workspace-stat small { color:var(--workspace-muted); font-size:.7rem; }
.workspace-dashboard { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:24px; }
.workspace-panel { padding:25px; border:1px solid var(--workspace-line); border-radius:18px; background:#fff; min-width:0; }
.workspace-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:22px; }
.workspace-panel-heading h2 { font-size:1.02rem; font-weight:800; margin:0; }
.workspace-panel-heading p { font-size:.73rem; color:var(--workspace-muted); margin:8px 0 0; }
.workspace-panel-heading > i { color:#9a7b38; }
.workspace-actions { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.workspace-action { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:12px; border:1px solid var(--workspace-line); border-radius:13px; padding:18px; text-decoration:none; color:var(--workspace-ink); transition:border-color .15s,background .15s; }
.workspace-action:hover { background:#faf8ff; border-color:#c5b3ef; color:#5637ad; }
.workspace-action strong { font-size:.82rem; }
.workspace-action > span:not(.workspace-icon) { font-size:.72rem; color:var(--workspace-muted); line-height:1.65; }
.action-arrow { position:absolute; top:19px; right:17px; color:#9c94ab; font-size:.83rem; }
.workspace-ranking { list-style:none; padding:0; margin:0; }
.workspace-ranking li { display:flex; gap:12px; align-items:center; padding:18px 0; border-bottom:1px solid #f1eef5; font-size:.78rem; }
.rank-number { display:grid; place-items:center; width:30px; height:30px; background:#f4f1fb; color:#76698f; border-radius:10px; flex-shrink:0; }
.workspace-ranking li:first-child .rank-number { background:#fff2d3; color:#8c682b; }
.rank-name { flex:1; overflow-wrap:anywhere; min-width:0; }
.workspace-ranking strong { white-space:nowrap; }
.workspace-ranking small { color:var(--workspace-muted); font-weight:500; }
.workspace-text-link { display:block; margin-top:22px; font-size:.75rem; color:var(--workspace-accent); text-decoration:none; }
.workspace-ranking .workspace-empty { flex-direction:column; text-align:center; padding:34px 4px; border:0; line-height:1.8; }
.workspace-empty > i { font-size:2rem; color:#a398b9; }
.workspace-empty p { color:var(--workspace-muted); margin:0; }
.workspace-course-link { display:flex; align-items:center; gap:16px; margin-top:24px; padding:22px; background:#eeedf8; border:1px solid #e1ddef; border-radius:15px; text-decoration:none; color:var(--workspace-ink); }
.workspace-course-link strong { display:block; font-size:.84rem; }
.workspace-course-link span > span { display:block; font-size:.74rem; color:var(--workspace-muted); margin-top:5px; }
.admin-view .card { border:1px solid var(--workspace-line) !important; overflow-wrap:anywhere; }
.admin-view .card.shadow-sm { box-shadow:0 4px 18px #25223d04 !important; }
.admin-view .table { font-size:.81rem; --bs-table-bg:transparent; }
.admin-view .table th { background:#f8f9fc; color:#777085; font-size:.68rem; letter-spacing:.04em; white-space:nowrap; padding:16px; border-bottom-color:var(--workspace-line); }
.admin-view .table td { padding:16px; border-bottom-color:#efedf4; }
.admin-view .table tbody tr:hover { background:#faf9fe; }
.admin-view .form-control,.admin-view .form-select { border-color:#dedbe8; padding:11px 13px; font-size:.88rem; }
.admin-view .form-control-sm { padding:6px 8px; }
.admin-view .form-label { font-size:.8rem; font-weight:700; }
.admin-view .app-main > .d-flex:first-of-type { flex-wrap:wrap; gap:15px; }
.admin-view h1.h4 { font-size:1.7rem; letter-spacing:-.04em; margin-top:4px; }
.admin-view .app-main > .card:has(form):not(:has(table)) { margin-top:20px; }
.admin-view a:focus-visible,.admin-view button:focus-visible,.login-view a:focus-visible,.login-view button:focus-visible { outline:3px solid #9773ed; outline-offset:3px; }
.login-view .app-main { padding-top:45px !important; max-width:1120px; }
.login-shell { display:grid; grid-template-columns:1fr 1fr; background:#fff; border:1px solid #e5e0ee; border-radius:26px; overflow:hidden; box-shadow:0 24px 65px #3421580a; }
.login-story { display:flex; flex-direction:column; justify-content:space-between; gap:46px; padding:48px 42px 32px; position:relative; background:radial-gradient(ellipse at 0 95%,#7455c8,transparent 70%),#30234f; color:#fff; }
.login-kicker { display:flex; align-items:center; gap:10px; font-size:.66rem; letter-spacing:.13em; font-weight:700; color:#e5d9ff; }
.login-story h1 { font-size:clamp(2.2rem,4vw,3.35rem); line-height:1.13; font-weight:800; letter-spacing:-.06em; margin:0 0 24px; }
.login-story > div > p { color:#e0d5f4; font-size:.91rem; line-height:1.9; max-width:350px; margin:0; }
.login-benefits { display:grid; gap:26px; }
.login-benefits > div { display:flex; align-items:flex-start; gap:16px; }
.login-benefits i { background:#ffffff12; border:1px solid #ffffff24; padding:10px 13px; border-radius:12px; color:#e6dbff; }
.login-benefits span { font-size:.74rem; color:#ddd0ee; line-height:1.8; }
.login-benefits strong { display:block; color:#fff; font-size:.83rem; margin-bottom:4px; }
.login-story-footer { font-size:.66rem; color:#d7c8ec; }
.login-form-panel { padding:42px; align-self:center; }
.login-form-icon { display:inline-grid; place-items:center; width:45px; height:45px; border:1px solid #e9e2f9; border-radius:13px; color:#7653c5; background:#faf8ff; font-size:1.35rem; margin-bottom:25px; }
.login-form-panel h2 { font-size:1.9rem; font-weight:800; letter-spacing:-.045em; margin-bottom:10px; }
.login-description { font-size:.84rem; color:var(--workspace-muted); line-height:1.7; margin-bottom:28px; }
.login-field { margin-bottom:20px; }
.login-field .form-label { font-size:.79rem; font-weight:700; margin-bottom:9px; }
.login-field .form-control,.login-field .form-select { min-height:49px; border:1px solid #ded9e9; border-radius:10px; font-size:.86rem; padding:12px 14px; background-color:#fdfcfe; }
.login-field .is-invalid { border-color:#b32e42; background-image:none; }
.login-field .form-text { font-size:.68rem; line-height:1.65; color:#777083; margin:7px 0 0; }
.login-input-wrap { position:relative; }
.login-input-wrap:has(.password-toggle) input { padding-right:50px; }
.password-toggle { position:absolute; right:5px; top:4px; width:41px; height:41px; border:0; background:transparent; color:#7a708a; border-radius:8px; }
.password-toggle:hover { background:#eee8f7; }
.login-submit { width:100%; display:flex; align-items:center; justify-content:space-between; padding:14px 18px; font-size:.85rem; margin-top:25px; }
.login-support { font-size:.71rem; color:var(--workspace-muted); line-height:1.8; margin:20px 0 24px; }
.login-support i { margin-right:4px; }
.login-switch { border-top:1px solid var(--workspace-line); padding-top:23px; font-size:.72rem; color:var(--workspace-muted); display:flex; gap:8px; flex-wrap:wrap; }
.login-switch a { color:#6640c3; text-decoration:none; font-weight:700; }
.login-story-card { display:flex; gap:15px; align-items:center; border:1px solid #ffffff28; background:#ffffff0b; padding:20px; border-radius:15px; }
.login-story-card .workspace-icon { background:#ffffff18; color:#e7d9ff; }
.login-story-card strong { display:block; font-size:.81rem; line-height:1.6; }
.login-story-card div > span { display:block; font-size:.72rem; color:#ddcfee; line-height:1.8; margin-top:6px; }
@media(min-width:992px) { .admin-menu:not([open]) > nav { display:block; } }
@media(max-width:1199px) { .admin-layout { grid-template-columns:218px minmax(0,1fr); } .admin-view .app-main { padding:24px !important; } .workspace-dashboard { grid-template-columns:1fr; } .workspace-heading { align-items:flex-start; flex-direction:column; } }
@media(max-width:991px) { .admin-layout { display:block; } .admin-sidebar { position:static; height:auto; padding:12px 24px; border-bottom:1px solid var(--workspace-line); border-right:0; } .admin-brand { display:none; } .admin-sidebar-footer { padding:14px 12px; border-top:1px solid var(--workspace-line); } .admin-menu > summary { display:flex; align-items:center; justify-content:space-between; cursor:pointer; padding:9px 0; font-weight:700; font-size:.86rem; } .admin-menu nav { padding:12px 0; } .admin-menu > summary::marker { content:''; } .login-story { padding:36px 28px; gap:35px; } .login-form-panel { padding:32px 28px; } .login-view .app-main { padding-top:24px !important; } }
@media(max-width:767px) { .login-shell { grid-template-columns:1fr; border-radius:20px; } .login-story { padding:28px; gap:25px; } .login-story h1 { font-size:2.2rem; margin-bottom:16px; } .login-story > div > p { max-width:none; font-size:.81rem; } .login-benefits,.login-story-card,.login-story-footer { display:none; } .login-form-panel { padding:30px 25px; } .login-form-icon { display:none; } .login-form-panel h2 { font-size:1.65rem; } .workspace-stats { gap:10px; } .workspace-stat { padding:16px; } .workspace-stat i { display:none; } .workspace-stat strong { font-size:1.8rem; } .workspace-stat small { font-size:.63rem; } .admin-view .app-main { padding:20px 16px !important; } .workspace-panel { padding:20px; } }
@media(max-width:420px) { .workspace-stats { grid-template-columns:1fr; } .workspace-stat { display:grid; grid-template-columns:1fr auto; gap:4px 12px; } .workspace-stat strong { grid-column:2; grid-row:1/3; margin:0; align-self:center; } .workspace-actions { grid-template-columns:1fr; } .workspace-heading h1 { font-size:1.8rem; } .admin-view .app-navbar > .container { padding:0 16px; } }
@media(prefers-reduced-motion:reduce) { .admin-view *, .login-view * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
.voting-chart { padding:18px; border:1px solid var(--workspace-line); background:#faf9fd; border-radius:14px; }
.voting-chart-row { display:grid; grid-template-columns:65px minmax(30px,1fr) 105px; gap:14px; align-items:center; font-size:.8rem; margin:12px 0; }
.voting-chart-row > span:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.voting-chart-row small { color:#716d83; }
.voting-chart-track { height:16px; background:#eae6f0; border-radius:5px; overflow:hidden; }
.voting-chart-bar { height:100%; border-radius:5px; transition:width .55s ease; }
.voting-chart-good { background:#218568; }
.voting-chart-neutral { background:#86799e; }
.voting-chart-bad { background:#c45368; }
@media(max-width:480px) { .voting-chart { padding:12px; } .voting-chart-row { grid-template-columns:53px minmax(20px,1fr) 86px; gap:8px; font-size:.7rem; } }