/* Final layout layer of the brand.
   Loaded after every other stylesheet. One grid for the whole shell: the header, the page and the footer share
   the same left/right gutters, the content uses the full width of the window, every block uses the same radii
   and spacing scale. Colours come from the theme tokens (theme.css) so the dark theme keeps working. */
:root{
  --sb:264px;--hd:72px;--gutter:40px;
  --r-tile:16px;--r-card:16px;--r-ctl:12px;
  --gap:20px;--gap-lg:32px;
  --canvas:#f7f7fa;   /* clean light canvas: near-neutral, the colour stays in accents */
}
@media (max-width:1150px){:root{--sb:232px;--gutter:28px}}
@media (max-width:900px){:root{--gutter:16px;--hd:64px}}

/* ---------- shell ---------- */
body.workspace{background:var(--canvas)}
.workspace .header{height:var(--hd);min-height:var(--hd);padding:0 var(--gutter) 0 0;gap:0}
.workspace .brand{flex:0 0 var(--sb);width:var(--sb);padding-left:24px;display:flex;align-items:center;gap:10px;font-size:22px;letter-spacing:-.6px;color:var(--ink)}
.brand-mark{width:38px;height:35px;flex:0 0 auto;color:#5300d6}   /* colour of the brand logo */
:root[data-theme="dark"] .brand-mark{color:var(--accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand-mark{color:var(--accent)}}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text b{font-weight:800;color:var(--ink)}
.brand-text b span{color:var(--accent);font-weight:500;margin-left:3px}
.workspace .brand small,.brand small{display:block;margin-top:5px;font-size:9.5px;letter-spacing:1.2px;font-weight:600;color:var(--muted);text-transform:uppercase}
.workspace .header-search{margin:0 24px 0 var(--gutter);max-width:620px}
.workspace .header-search input{height:46px;border-radius:var(--r-ctl);background:var(--surface-2);border:1px solid var(--line);padding:0 16px 0 46px}
.workspace .header-tools{gap:8px}
.btn-create{border-radius:var(--r-ctl)}
.icon-btn{border-radius:var(--r-ctl)}
.icon-btn:hover,.row-menu>summary:hover{background:var(--surface-2)}

.workspace .sidebar{width:var(--sb);padding:20px 16px 20px;gap:16px;scrollbar-width:thin;scrollbar-color:transparent transparent}
.workspace .sidebar:hover{scrollbar-color:var(--line) transparent}
.workspace .sidebar::-webkit-scrollbar{width:6px}
.workspace .sidebar::-webkit-scrollbar-thumb{background:transparent;border-radius:6px}
.workspace .sidebar:hover::-webkit-scrollbar-thumb{background:var(--line)}
.side-nav .nav-label,.workspace .side-nav .nav-label{margin:20px 12px 6px;font-size:11px;font-weight:700;letter-spacing:1.2px;color:var(--muted)}
.side-nav .nav-label:first-child{margin-top:0}
.workspace .side-nav a{min-height:40px;padding:8px 12px;gap:12px;border-radius:var(--r-ctl);font-size:14.5px}
.workspace .side-nav a .count-badge{margin-left:auto}
.workspace .side-nav a[aria-current=page] .count-badge{background:#fff;color:var(--uu-primary)}
.storage-card{flex:0 0 auto;border-radius:var(--r-card);background:var(--surface-2);border:1px solid var(--line)}

.workspace main{margin-left:var(--sb);padding:32px var(--gutter) 56px;max-width:none;min-height:calc(100dvh - var(--hd) - 61px)}
.workspace main>*{max-width:none}
.workspace footer{margin-left:var(--sb);padding:18px var(--gutter);display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:13px}
.workspace footer .version{margin-left:auto}
footer .quiet,.workspace footer .quiet{min-height:0;padding:0;margin-left:14px;border:0;background:none;font-size:13px;font-weight:500;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
footer .quiet:hover{color:var(--accent)}

@media (max-width:900px){
  .workspace .header{padding:0 var(--gutter);gap:8px}
  .workspace .brand{flex:0 0 auto;width:auto;padding-left:0}
  .workspace .brand small{display:none}
  .workspace .header-search{margin:0 8px}
  .workspace main,.workspace footer{margin-left:0}
}

/* ---------- typography and headings ---------- */
.workspace h1{font-size:clamp(28px,2.4vw,36px);line-height:1.15;letter-spacing:-.8px;margin:0 0 8px}
.workspace .page-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin:0 0 28px}
.workspace .page-heading>div{min-width:0}
.workspace .page-heading p{margin:0;max-width:760px}
.workspace .page-heading>div>p.muted,.uu-notice{font-size:15px;color:var(--muted)}
.workspace .eyebrow{display:block;margin:0 0 10px;font-size:11px;letter-spacing:1.4px}
.workspace .back{display:inline-flex;align-items:center;gap:6px;margin:0 0 18px;font-size:14px;font-weight:500;color:var(--accent)}
.workspace .back:hover{text-decoration:underline;text-underline-offset:3px}
.section-heading{margin:0 0 16px}
.section-heading h2,.compact h2{font-size:22px;letter-spacing:-.4px}
.section-heading p{font-size:14px;margin:4px 0 0}
.section-block{margin-top:var(--gap-lg)}
.text-link{font-size:14px;font-weight:500}

/* ---------- controls ---------- */
button,.primary,.secondary,.danger{border-radius:var(--r-ctl)}
.workspace .primary,.workspace .secondary,.workspace .danger,.primary,.secondary{min-height:46px;padding:0 20px;font-size:14px;font-weight:600;gap:10px;line-height:1.2}
.secondary,.workspace .secondary{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.secondary:hover,.workspace .secondary:hover{background:var(--surface-2);border-color:var(--uu-lavender)}
.secondary .icon,.primary .icon{width:18px;height:18px}
/* the brand «diagonal stripes» accent stays only on the one call-to-action button in a page heading */
.page-heading>.secondary,.page-heading .heading-actions>.secondary:last-child{padding-right:52px;background:var(--surface) linear-gradient(115deg,transparent 0 30%,var(--tint) 30% 44%,transparent 44% 56%,var(--tint) 56% 70%,transparent 70%) right 10px center/34px 70% no-repeat}
.page-heading>.secondary .icon,.page-heading .heading-actions>.secondary:last-child .icon{margin-right:-36px;color:var(--accent);position:relative}
.heading-actions{gap:10px}
.workspace select,.file-toolbar select,select{min-height:46px;border-radius:var(--r-ctl);border-color:var(--line);font-size:14px;color:var(--ink);background-color:var(--surface)}
.search-input,.workspace .search-input{border-radius:var(--r-ctl);background:var(--surface);border-color:var(--line)}
.search-input input:not([type=checkbox]){min-height:44px;font-size:14px}
.search-input:focus-within{border-color:var(--uu-lavender);box-shadow:0 0 0 4px #9b76ef26}
.file-toolbar{margin:0 0 24px;gap:10px}
input:not([type=checkbox]):not([type=radio]),textarea{border-radius:var(--r-ctl)}
.layout-switch{border-radius:var(--r-ctl);border-color:var(--line);background:var(--surface)}
.layout-switch a{padding:9px 16px;font-weight:500}
.count-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:11px;font-weight:700;font-size:12px}

/* ---------- surfaces: one card style everywhere ---------- */
.panel,.workspace .panel,.folder-card,.video-card,.recent-card,.stat,.empty-state,.table-scroll,.file-tile{border-radius:var(--r-card);border:1px solid var(--line);background:var(--card);box-shadow:none}
.workspace .panel{padding:28px}
.table-scroll .file-table{border-radius:var(--r-card)}
.file-table th{font-size:12px;letter-spacing:.2px;text-transform:none}
.file-table th,.file-table td{padding:14px 18px}
.file-table tbody tr+tr td{border-top:1px solid var(--line)}
.empty-state{padding:48px 24px}
.dropzone{border-radius:var(--r-card);border-width:2px;margin:0 0 28px}
.recent-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.recent-card{padding:20px;background:var(--surface-2)}
.recent-card:hover{background:var(--tint);border-color:var(--uu-lavender)}
.recent-card h3{font-size:15px;margin:14px 0 6px}
.file-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.file-tile{background:var(--surface-2)}
.file-thumb{border-radius:12px}
.space-grid{gap:var(--gap)}
.notice{border-radius:var(--r-ctl)}
.player-stage,.player-stage video{border-radius:var(--r-card)}
.menu-panel{border-radius:var(--r-card)}

/* ---------- dashboard tiles (as on the university site) ---------- */
.uu-tiles{gap:var(--gap);margin:0 0 var(--gap-lg)}
.uu-tile{border-radius:var(--r-tile);padding:36px 44px;min-height:250px;border:0;box-shadow:none;justify-content:space-between}
.uu-tile:hover{transform:none;filter:brightness(1.04)}
.uu-tile h2{font-size:clamp(24px,2vw,30px);letter-spacing:-.6px;margin:0 0 22px;line-height:1.15}
.uu-tile .uu-stats{gap:clamp(28px,5vw,96px)}
.uu-stat strong{font-size:clamp(32px,2.8vw,40px);letter-spacing:-1px}
.uu-stat span{font-size:15px;margin-top:2px}
.uu-tile .uu-more{font-size:15px;border-bottom-width:1.5px;margin-top:24px}
.uu-tile::after{width:300px;height:300px;right:-90px;bottom:-110px}
.uu-gray{background:var(--uu-gray);border:0;box-shadow:none}
.uu-gray::after{background:linear-gradient(115deg,transparent 0 40%,#ffffffb0 40% 100%);border-radius:0;width:45%;height:100%;right:0;bottom:0;transform:skewX(-20deg);transform-origin:bottom}
.uu-purple,.uu-deep{background:var(--uu-primary)}
.uu-deep::before,.uu-lav::before{content:"";position:absolute;right:28px;bottom:22px;width:110px;height:56px;background:repeating-linear-gradient(115deg,#ffffff26 0 14px,transparent 14px 26px);pointer-events:none}
.uu-cta{font-size:clamp(24px,2.2vw,30px);text-underline-offset:5px;text-decoration-thickness:2px}
.uu-sub{font-size:15px;max-width:320px}
.uu-stickers{right:40px;top:36px;gap:14px}
.uu-sticker{font-size:18px;padding:8px 18px;border-radius:8px;box-shadow:none}
.uu-sticker.orange{background:#ff9a3c;color:#111}
.uu-tile.uu-f,.uu-tile.uu-g{padding:32px}
.uu-tile.uu-f h2,.uu-tile.uu-g h2{font-size:22px;margin-bottom:12px}
.uu-tile meter{height:10px;border-radius:6px;margin-top:24px}
:root[data-theme="dark"] .uu-gray{background:var(--surface-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .uu-gray{background:var(--surface-2)}}
:root[data-theme="dark"] .uu-gray::after{background:#ffffff08}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .uu-gray::after{background:#ffffff08}}
@media (max-width:720px){.uu-tile,.uu-tile.uu-f,.uu-tile.uu-g{padding:26px 24px}.uu-deep::before,.uu-lav::before{display:none}}

/* ---------- lecture page ---------- */
.workspace .watch-layout{grid-template-columns:minmax(0,1fr) 320px;gap:28px}
.workspace .watch-layout h1{font-size:clamp(24px,2vw,30px)}
@media (max-width:1100px){.workspace .watch-layout{grid-template-columns:1fr}}

/* ---------- public pages and sign-in ---------- */
.public-surface .header,body:not(.workspace) .header{padding-left:var(--gutter);padding-right:var(--gutter)}
body:not(.workspace) .brand{display:flex;align-items:center;gap:10px}
body:not(.workspace) footer{display:flex;gap:10px;align-items:center;padding:18px var(--gutter)}
body:not(.workspace) footer .version{margin-left:auto}

/* ---------- phones ---------- */
@media (max-width:620px){
  .workspace .page-heading{flex-direction:column;margin-bottom:20px}
  .workspace .panel{padding:20px}
  .workspace footer .version{margin-left:0}
}

/* ---------- second pass: details found on the 1920 px and phone screenshots ---------- */
.search-input input:not([type=checkbox]):not([type=radio]){background:transparent;border:0;box-shadow:none}
.file-toolbar label{margin:0;font-size:14px;font-weight:600}
.file-toolbar input[type=date],.file-toolbar input[type=number]{width:auto;flex:0 0 190px;min-height:46px;margin:0}
.dropzone{padding:28px 24px}
.workspace .side-nav a{min-height:38px;padding:7px 12px}
.storage-card{padding:14px}
.storage-card meter{margin:10px 0 6px}
.workspace .watch-layout{grid-template-columns:minmax(0,1fr) 360px}
.player-stage video{max-height:calc(100dvh - var(--hd) - 200px);width:100%;object-fit:contain}
.header{min-height:var(--hd);padding-top:0;padding-bottom:0}
body:not(.workspace) main{max-width:none;padding:40px var(--gutter) 56px}
body:not(.workspace) .brand-mark{width:38px;height:35px}
@media (max-width:900px){footer [data-shortcuts-open]{display:none}}

/* row «⋯» menus: the table must not clip them (shell.css had overflow:hidden on it for the rounded corners);
   the corners are rounded on the edge cells instead */
.table-scroll .file-table{overflow:visible;border-collapse:separate;border-spacing:0}
.table-scroll:has(.row-menu){overflow:visible}
.file-table thead th:first-child{border-top-left-radius:var(--r-card)}
.file-table thead th:last-child{border-top-right-radius:var(--r-card)}
.file-table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--r-card)}
.file-table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--r-card)}
.row-menu[open]{z-index:20}
.row-menu .menu-panel{z-index:60}
.row-menu .menu-panel.up{top:auto;bottom:calc(100% + 10px)}

/* ---------- colour pass: lilac canvas, white cards, colour-coded files, purple storage card ----------
   --canvas is redefined only for the light theme here; the dark values from theme.css win by specificity. */
.workspace main,.workspace footer{background:var(--canvas)}
.workspace footer{border-top-color:var(--line)}
.workspace .header{background:var(--surface)}
.panel,.workspace .panel,.folder-card,.video-card,.stat,.empty-state,.table-scroll,.recent-card,.space-tile{background:var(--card);border-color:var(--line);box-shadow:none}
.recent-card:hover,.folder-card:hover{border-color:var(--uu-lavender)}
.file-tile{background:var(--card);border-color:var(--line);box-shadow:none}
.file-thumb{background:var(--surface-2)}
.file-table tbody tr:hover{background:var(--surface-2)}
.search-input,.workspace .search-input,.workspace select,.file-toolbar select,.layout-switch,.secondary,.workspace .secondary{border-color:#dcd5ee}
.dropzone{background:color-mix(in srgb,var(--uu-lavender) 9%,var(--card));border-color:var(--uu-violet)}
.count-badge{background:var(--uu-lime);color:#111}
.workspace .side-nav a[aria-current=page] .count-badge{background:var(--uu-lime);color:#111}
.workspace .side-nav a:hover{background:var(--tint)}
.workspace .side-nav a:hover .icon{color:var(--accent)}

/* storage card in the sidebar: a small purple tile like on the university site */
.storage-card{background:var(--uu-primary);border:0;color:#fff;position:relative;overflow:hidden}
.storage-card::after{content:"";position:absolute;right:-30px;bottom:-40px;width:110px;height:110px;border-radius:50%;background:#ffffff1a;pointer-events:none}
.storage-card .storage-label,.storage-card .storage-label strong,.storage-card p{color:#fff}
.storage-card .storage-label .icon{color:var(--uu-lime)}
.storage-card small{color:#e3dbff}
.storage-card meter,.storage-card meter::-webkit-meter-bar{background:#ffffff40}
.storage-card meter::-webkit-meter-optimum-value{background:var(--uu-lime)}
.storage-card meter::-moz-meter-bar{background:var(--uu-lime)}

/* file types: each kind has its own brand colour (icons are non-text, 3:1 is enough) */
.type-icon,.file-illustration,.file-thumb{--k:var(--uu-violet)}
.type-icon.pdf,.file-illustration.pdf,.file-thumb.pdf{--k:#d4460f}
.type-icon.presentation,.file-illustration.presentation,.file-thumb.presentation{--k:#4f8a0b}
.type-icon.image,.file-illustration.image,.file-thumb.image{--k:#b0367c}
.type-icon.document,.file-illustration.document,.file-thumb.document{--k:#3b4fd8}
.type-icon:not(.video),.file-illustration:not(.video){background:color-mix(in srgb,var(--k) 14%,var(--card));color:var(--k)}
.file-thumb:not(.video){color:var(--k);background:color-mix(in srgb,var(--k) 9%,var(--card))}
.type-icon.video,.file-illustration.video,.file-thumb.video{background:var(--uu-primary);color:#fff}
:root[data-theme="dark"] :is(.type-icon,.file-illustration,.file-thumb):not(.video){color:color-mix(in srgb,var(--k) 55%,#fff)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.type-icon,.file-illustration,.file-thumb):not(.video){color:color-mix(in srgb,var(--k) 55%,#fff)}}

/* dashboard: the grey tile becomes white on the lilac canvas */
.uu-gray{background:var(--card)}
.uu-gray::after{background:linear-gradient(115deg,transparent 0 40%,var(--tint) 40% 100%);opacity:.7}
@media (max-width:420px){.workspace .header{gap:4px}.workspace .brand{gap:6px;font-size:19px}.workspace .brand-mark{width:30px;height:28px}}

/* ---------- lecture page: one vertical rhythm under the player, sticky side panel ---------- */
.workspace .watch-layout{align-items:start}
.workspace .watch-layout>section>*{margin-top:0}
.workspace .watch-layout>section>*+*{margin-top:20px}
.workspace .watch-layout>section>h1{margin:28px 0 0}
.workspace .watch-layout>section>.manage-bar{margin-top:16px;gap:8px}
.manage-bar .secondary{min-height:40px;padding:0 16px;font-size:14px;background:var(--card);border-color:var(--line);box-shadow:none}
.manage-bar .secondary:hover{background:var(--tint);border-color:var(--uu-lavender)}
.workspace .watch-layout>section>.muted.small{margin-top:12px}
.workspace .watch-layout>section>.description:empty{display:none}
.video-placeholder{width:100%;min-height:0;max-height:calc(100dvh - var(--hd) - 200px);aspect-ratio:16/9;border:0;border-radius:var(--r-card);
  background:linear-gradient(125deg,var(--tint),color-mix(in srgb,var(--uu-lavender) 22%,var(--card)));box-shadow:0 1px 2px #1d0f4f0f}
.video-placeholder .stat-icon{width:64px;height:64px;border-radius:16px;background:var(--card);color:var(--accent);margin-bottom:18px}
.video-placeholder .stat-icon .icon{width:28px;height:28px}
.video-placeholder h2{font-size:22px;color:var(--ink);margin:0 0 6px}
.video-placeholder p{font-size:15px;margin:0}
.processing-panel{padding:24px 28px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:none}
.processing-header{gap:16px}
.processing-header .stat-icon{width:44px;height:44px;border-radius:12px;background:var(--tint);color:var(--accent)}
.processing-header strong{font-size:16px;color:var(--ink)}
.processing-header p{font-size:13px;margin:4px 0 0}
.processing-percent{font-size:16px;font-weight:700}
.processing-panel progress{display:block;width:100%;height:8px;margin:18px 0 10px;border:0;border-radius:6px;background:var(--tint);overflow:hidden;accent-color:var(--uu-violet)}
.processing-panel progress::-webkit-progress-bar{background:var(--tint);border-radius:6px}
.processing-panel progress::-webkit-progress-value{background:var(--uu-violet);border-radius:6px}
.processing-message{font-size:14px;color:var(--muted);margin:0}
.workspace .watch-layout>aside{position:sticky;top:calc(var(--hd) + 24px);padding:28px}
.watch-layout aside h2{font-size:22px;margin:0 0 8px}
.watch-layout aside .muted.small{font-size:14px;line-height:1.5;margin:0}
.watch-layout aside form>.primary{width:100%;margin-top:20px}
.links{margin-top:20px}
.link-row{padding:14px 0;font-size:13px;line-height:1.5}
.link-row small{font-size:13px;color:var(--ink)}
.link-row .quiet{min-height:36px;padding:0 12px;border-radius:10px;color:var(--danger-text);font-size:13px;font-weight:600}
.link-row .quiet:hover{background:color-mix(in srgb,var(--danger-text) 10%,transparent)}
@media (max-width:1100px){.workspace .watch-layout>aside{position:static}}

/* ---------- link addresses with a copy button ---------- */
.copy-field{display:flex;gap:8px;align-items:stretch;margin-top:10px;min-width:0}
.copy-field input{flex:1 1 auto;min-width:0;min-height:42px;padding:0 12px;font:13px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--surface-2);border:1px solid var(--line);color:var(--ink)}
.copy-field .copy-btn{flex:0 0 auto;min-height:42px;padding:0 14px;font-size:13px}
.copy-field .copy-btn .icon{width:16px;height:16px;color:var(--accent)}
.copy-field .copy-btn.is-copied{background:var(--uu-lime);border-color:var(--uu-lime);color:#111}
.copy-field .copy-btn.is-copied .icon{color:#111}
.created-link{margin-bottom:24px}
.created-link .copy-field input{min-height:46px;font-size:14px}
.share-row{align-items:flex-start}
.share-row>div:first-child{flex:1 1 auto;min-width:0}
.share-row.is-new{background:color-mix(in srgb,var(--uu-lime) 14%,transparent);border-radius:12px;padding-left:12px;padding-right:12px}
.embed-code{margin-top:8px;font-size:13px}.embed-code summary{cursor:pointer;color:var(--accent);font-weight:600}
.embed-code textarea{width:100%;margin-top:8px;font:12px/1.4 ui-monospace,Consolas,monospace}
.file-table .copy-field{max-width:520px}
.link-row{display:block}
.link-row-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.link-row.is-new{background:color-mix(in srgb,var(--uu-lime) 14%,transparent);border-radius:12px;padding-left:12px;padding-right:12px}
.link-row .copy-field .copy-btn span{display:none}
.link-row .copy-field .copy-btn{padding:0 12px}

/* ---------- Video player (video-controls.js): one look on the lecture page, public links and file previews ---------- */
.vc{position:relative;overflow:hidden;border-radius:var(--r-card);background:#000;color:#fff;line-height:1.2;outline:none;user-select:none;-webkit-user-select:none;
  font-family:"Golos Text",system-ui,sans-serif;isolation:isolate}
.vc video{display:block;width:100%;max-height:calc(100dvh - var(--hd) - 180px);background:#000;border-radius:0;cursor:pointer;object-fit:contain}
.vc.is-full,.vc:fullscreen{border-radius:0}
.vc.is-full video,.vc:fullscreen video{max-height:none;height:100%}
.vc-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* centre: big play / replay, spinner, action feedback, double-tap ripples, error */
/* centred with inset+margin, not transform: the global :active nudge (design-system.css) must not move it away from the cursor */
.vc-big{position:absolute;inset:0;margin:auto;z-index:3;width:88px;height:88px;min-height:0;padding:0;border:0;border-radius:50%;
  background:var(--uu-primary);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 10px #4b17cc40,0 16px 40px #0008;cursor:pointer;transition:scale .15s,background .15s,box-shadow .15s}
.vc-big:hover{background:var(--uu-violet);scale:1.03;box-shadow:0 0 0 10px #7138ff33,0 16px 40px #0008}
.vc button:not(:disabled):active{transform:none}
.vc-big:active{scale:.97}
.vc-big .vc-icon{width:40px;height:40px}
.vc-big .vc-icon path[fill]{transform:translateX(1.5px)}
.vc:not(.is-fresh):not(.is-ended) .vc-big{width:68px;height:68px;box-shadow:0 0 0 8px #4b17cc33,0 12px 32px #0007}
.vc:not(.is-fresh):not(.is-ended) .vc-big .vc-icon{width:32px;height:32px}
.vc.is-fresh::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,transparent 30%,#0d062699 100%);pointer-events:none}
.vc-spinner{position:absolute;left:50%;top:50%;z-index:3;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;border:4px solid #ffffff33;border-top-color:var(--uu-lime);animation:vc-spin .8s linear infinite;pointer-events:none}
@keyframes vc-spin{to{transform:rotate(360deg)}}
.vc-flash{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%) scale(.8);display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:16px 18px;min-width:76px;border-radius:18px;background:#0d0626b3;opacity:0;pointer-events:none;backdrop-filter:blur(6px)}
.vc-flash .vc-icon{width:34px;height:34px}
.vc-flash span{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.vc-flash.is-on{animation:vc-flash .65s ease-out}
@keyframes vc-flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)}}
.vc-tap{position:absolute;top:0;bottom:0;width:38%;z-index:2;display:grid;place-items:center;opacity:0;pointer-events:none;background:#ffffff14}
.vc-tap .vc-icon{width:40px;height:40px}
.vc-tap-left{left:0;border-radius:0 50% 50% 0}.vc-tap-right{right:0;border-radius:50% 0 0 50%}
.vc-tap.is-on{animation:vc-tap .6s ease-out}
@keyframes vc-tap{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.vc-error{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);max-width:min(420px,86%);padding:16px 20px;border-radius:14px;background:#0d0626e6;text-align:center;font-size:15px}

/* control bar */
.vc-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:40px 18px 12px;background:linear-gradient(180deg,transparent,#0d062666 35%,#0d0626e6);transition:opacity .25s,transform .25s}
.vc.is-idle .vc-bar{opacity:0;transform:translateY(10px);pointer-events:none}
.vc.is-idle{cursor:none}
.vc.is-idle.is-menu{cursor:auto}

.vc-seek{position:relative;height:20px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.vc-track{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:#ffffff38;transition:height .15s,margin .15s}
.vc-buffer,.vc-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px}
.vc-buffer{background:#ffffff5c}
.vc-fill{background:linear-gradient(90deg,var(--uu-violet),var(--uu-lime))}
.vc-marks i{position:absolute;top:-1px;bottom:-1px;width:3px;margin-left:-1.5px;background:#0d0626;border-radius:1px}
.vc-knob{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #b8f54a66;transform:scale(0);transition:transform .15s;pointer-events:none}
.vc-seek:hover .vc-track,.vc.is-seeking .vc-track{height:7px;margin-top:-3.5px}
.vc-seek:hover .vc-knob,.vc.is-seeking .vc-knob,.vc-seek:focus-within .vc-knob{transform:scale(1)}
.vc-seek input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;min-height:0}
.vc-seek:focus-within .vc-track{outline:2px solid var(--uu-lime);outline-offset:2px}
.vc-hover{position:absolute;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;max-width:260px;
  padding:6px 10px;border-radius:10px;background:#fff;color:#111;box-shadow:0 8px 24px #0006;pointer-events:none;white-space:nowrap}
.vc-hover[hidden]{display:none}
.vc-hover b{font-size:13px;font-variant-numeric:tabular-nums}
.vc-hover span{font-size:12px;color:#4b17cc;font-weight:600;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.vc-hover span[hidden]{display:none}

.vc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.vc-left,.vc-right{display:flex;align-items:center;gap:2px;min-width:0}
.vc-left{flex:1 1 auto}
.vc-btn{position:relative;width:42px;height:42px;min-height:0;padding:0;border:0;border-radius:12px;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;transition:background .15s,color .15s}
.vc-btn:hover{background:#ffffff24}
.vc-btn.is-on{color:var(--uu-lime)}
.vc-btn[hidden]{display:none}
.vc-play .vc-icon{width:26px;height:26px}
.vc-gear .vc-icon{transition:transform .3s}
.vc.is-menu .vc-gear{background:#ffffff24}.vc.is-menu .vc-gear .vc-icon{transform:rotate(45deg)}
/* tooltips above the buttons (pointer devices only) */
@media (hover:hover){
  .vc-btn[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:5px 9px;border-radius:8px;
    background:#fff;color:#111;font-size:12px;font-weight:600;white-space:nowrap;pointer-events:none;box-shadow:0 6px 18px #0005}
  .vc-right .vc-btn:last-child:hover::after{left:auto;right:0;transform:none}
  .vc-left .vc-btn:first-child:hover::after{left:0;transform:none}
  .vc.is-menu .vc-btn:hover::after{display:none}
}
.vc-btn:focus-visible,.vc-time:focus-visible,.vc-volume:focus-visible,.vc-big:focus-visible,.vc-item:focus-visible{outline:2px solid var(--uu-lime);outline-offset:1px}

.vc-volume-wrap{display:flex;align-items:center}
.vc-volume{width:0;height:4px;margin:0;padding:0;min-height:0;opacity:0;appearance:none;-webkit-appearance:none;border:0;border-radius:4px;cursor:pointer;
  background:linear-gradient(90deg,#fff var(--v,100%),#ffffff4d var(--v,100%));transition:width .2s,opacity .2s,margin .2s}
.vc-volume-wrap:hover .vc-volume,.vc-volume:focus-visible,.vc-volume:active{width:84px;opacity:1;margin:0 10px 0 4px}
.vc-volume::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:0}
.vc-volume::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:0}
.vc .vc-time{min-height:0;height:32px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:#fff;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer}
.vc .vc-time:hover{background:#ffffff1f}
.vc-chapter{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:#ffffffd9;padding-left:10px;border-left:1px solid #ffffff40;margin-left:4px}
.vc-chapter[hidden]{display:none}

/* settings menu */
.vc-menu{position:absolute;right:14px;bottom:76px;z-index:5;width:280px;max-height:calc(100% - 96px);overflow:auto;padding:8px;border-radius:16px;
  background:#170d3ef2;backdrop-filter:blur(10px);box-shadow:0 20px 50px #000a;color:#fff;animation:vc-menu .16s ease-out}
@keyframes vc-menu{from{opacity:0;transform:translateY(6px)}}
.vc-menu[hidden]{display:none}
.vc .vc-item{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:#fff;font-size:14px;font-weight:500;text-align:left;cursor:pointer;justify-content:flex-start}
.vc .vc-item:hover{background:#ffffff1a}
.vc-item-label{flex:1 1 auto}
.vc-item-value{color:#ffffffb3;font-size:13px}
.vc-item>.vc-icon{width:18px;height:18px;color:#ffffff99}
.vc-choice>.vc-icon{visibility:hidden;color:var(--uu-lime)}
.vc-choice.is-selected>.vc-icon{visibility:visible}
.vc-choice.is-selected{font-weight:700}
.vc .vc-menu-back{font-weight:700;border-bottom:1px solid #ffffff26;border-radius:10px 10px 0 0;margin-bottom:4px}
.vc-switch-ui{position:relative;width:38px;height:22px;border-radius:11px;background:#ffffff40;transition:background .15s;flex:0 0 auto}
.vc-switch-ui::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.vc-switch[aria-checked=true] .vc-switch-ui{background:var(--uu-lime)}
.vc-switch[aria-checked=true] .vc-switch-ui::after{transform:translateX(16px);background:#111}

/* subtitles sit above the bar while it is shown */
.vc video::cue{background:#0d0626d9;color:#fff;font-size:1.05em;line-height:1.35}
.vc video::-webkit-media-text-track-container{transform:translateY(-84px);transition:transform .25s}
.vc.is-idle video::-webkit-media-text-track-container{transform:translateY(-12px)}

/* the lecture stage: watermark, notices and questions stay above the picture */
.player-stage.vc .watermark{z-index:2}
.player-stage.vc .player-notice{z-index:4}
.player-stage.vc .question-overlay{z-index:6}
.player-stage.vc.is-expanded{border-radius:0}
.player-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 0;color:var(--muted);font-size:13px}
.player-meta .player-progress{margin-left:0;font-weight:600;color:var(--ink)}
.player-meta .player-keys{margin-left:auto}

@media (max-width:620px){
  .vc-bar{padding:28px 8px 6px}
  .vc-btn{width:38px;height:38px}
  .vc-skip,.vc-volume-wrap .vc-volume,.vc-chapter,.vc-pip{display:none}
  .vc .vc-time{font-size:12px;padding:0 4px}
  .vc-big{width:64px;height:64px}.vc-big .vc-icon{width:30px;height:30px}
  .vc-menu{left:8px;right:8px;bottom:58px;width:auto}
  .vc video::-webkit-media-text-track-container{transform:translateY(-62px)}
  .player-meta .player-keys{display:none}
}

/* public link page: the player is the page */
.public-player{max-width:1200px;margin:0 auto}
.public-player .vc{margin-top:20px;box-shadow:0 24px 64px -28px #3a1d9a80}
/* the site-wide input styles (width:100%, background, border) must not reach the player's own sliders */
.vc .vc-volume-wrap input.vc-volume{width:0;min-width:0;height:4px;min-height:0;margin:0;padding:0;border:0;border-radius:4px;box-shadow:none;
  background:linear-gradient(90deg,#fff var(--v,100%),#ffffff4d var(--v,100%))}
.vc .vc-volume-wrap:hover input.vc-volume,.vc .vc-volume-wrap input.vc-volume:focus-visible,.vc .vc-volume-wrap input.vc-volume:active{width:84px;margin:0 10px 0 4px}
.vc .vc-seek input[type=range]{width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;background:transparent;box-shadow:none}
@media (max-width:620px){.vc .vc-volume-wrap input.vc-volume{display:none}}

/* ---------- search fields: one highlight on the container, none on the inner input ---------- */
.search-input input:not([type=checkbox]):not([type=radio]),
.search-input input:not([type=checkbox]):not([type=radio]):focus,
.search-input input:not([type=checkbox]):not([type=radio]):focus-visible{background:transparent;border:0;outline:none;box-shadow:none}
.search-input:focus-within{border-color:var(--uu-violet);box-shadow:0 0 0 3px #7138ff40}
.search-input-lg{min-height:52px;padding:0 16px;gap:12px;flex:1 1 auto}
.search-input-lg .icon{width:20px;height:20px;color:var(--accent)}
.search-input-lg input:not([type=checkbox]):not([type=radio]){min-height:50px;font-size:16px}
.file-toolbar:has(.search-input-lg) button{min-height:52px;padding:0 24px}
.search-input input[type=search]::-webkit-search-cancel-button{cursor:pointer}

/* ---------- dashboard tiles: official brand colours ----------
   White on lavender (#9b76ef) and orange (#ea591f) is ~3.4:1, enough for large text only (WCAG 1.4.3),
   so the small captions on these tiles are bold 19 px. */
.uu-tile.uu-lav,.uu-tile.uu-lav h2,.uu-tile.uu-lav .uu-stat strong,.uu-tile.uu-lav .uu-stat span,.uu-tile.uu-lav .uu-more{color:#fff;opacity:1}
.uu-tile.uu-orange{background:#ea591f;color:#fff}
.uu-tile.uu-orange::after{background:#ffffff1f}
.uu-tile.uu-lav .uu-stat span,.uu-tile.uu-lav .uu-more,.uu-tile.uu-orange .uu-small{font-size:19px;font-weight:700;opacity:1}
.uu-tile.uu-lav meter{accent-color:#fff}
.uu-tile.uu-lav meter::-webkit-meter-bar{background:#ffffff4d;border:0}
.uu-tile.uu-lav meter::-webkit-meter-optimum-value{background:#fff}
/* stripes: soft diagonal bands running off the bottom-right corner and fading towards the text */
.uu-deep::before,.uu-lav::before{right:0;bottom:0;width:min(46%,320px);height:100%;background:repeating-linear-gradient(120deg,transparent 0 26px,#ffffff21 26px 52px);
  -webkit-mask-image:linear-gradient(150deg,transparent 45%,#000 92%);mask-image:linear-gradient(150deg,transparent 45%,#000 92%);border-radius:0 0 var(--r-tile) 0}
.uu-tile.uu-lav::after,.uu-tile.uu-deep::after{background:#ffffff14}
.uu-tile.uu-orange::after{display:none}
@media (prefers-reduced-motion:reduce){.vc-big{transition:none}.vc-big:hover,.vc-big:active{scale:none}}
/* play button, variant «soft pulse»: until the first start a wave spreads from the button; hover and later pauses are calm */
.vc.is-fresh .vc-big{animation:vc-pulse 2.4s ease-out infinite}
.vc.is-fresh .vc-big:hover,.vc.is-fresh .vc-big:focus-visible{animation:none}
@keyframes vc-pulse{0%{box-shadow:0 0 0 0 #7138ff8c,0 16px 40px #0008}70%{box-shadow:0 0 0 18px #7138ff00,0 16px 40px #0008}100%{box-shadow:0 0 0 0 #7138ff00,0 16px 40px #0008}}
@media (prefers-reduced-motion:reduce){.vc.is-fresh .vc-big{animation:none}}

/* overdue items (acquaintance): the badge turns red, also on the current menu item */
.count-badge.is-late,.workspace .side-nav a .count-badge.is-late,.workspace .side-nav a[aria-current=page] .count-badge.is-late{background:var(--bad);color:#fff}

/* ---------- player parts shared by the staff and learner pages (learning/player.html) ---------- */
.player-keys-help{position:relative;margin-left:auto}
.player-keys-help summary{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;list-style:none}
.player-keys-help summary::-webkit-details-marker{display:none}
.player-keys-help[open] summary{color:var(--accent);border-color:var(--accent)}
.player-keys-list{position:absolute;right:0;top:calc(100% + 8px);z-index:20;display:grid;gap:6px;min-width:240px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:0 16px 40px -14px #2a1a6a55}
.player-keys-list div{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}
.player-keys-list dt,.player-keys-list dd{margin:0}
.player-keys-list dd{color:var(--muted)}
.player-keys-list kbd{display:inline-block;min-width:24px;padding:2px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:var(--surface-2);font-size:12px;text-align:center}

.slide-strip{margin:14px 0}
.slide-strip summary{font-weight:600;cursor:pointer}
.slide-list{display:flex;gap:10px;overflow-x:auto;padding:10px 2px 6px;scroll-snap-type:x proximity}
.slide-list .slide-thumb{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex:0 0 168px;width:168px;min-height:0;gap:0;padding:0;border:2px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden;scroll-snap-align:start;box-shadow:none}
.slide-list .slide-thumb:hover{border-color:var(--uu-lavender,#9b76ef);filter:none}
.slide-list .slide-thumb img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:0;background:#000}
.slide-list .slide-thumb span{display:block;padding:5px 8px;font-size:12px;font-weight:600;color:var(--muted);text-align:left;font-variant-numeric:tabular-nums}
.slide-list .slide-thumb.current{border-color:var(--accent)}
.slide-list .slide-thumb.current span{color:var(--accent)}

.player-extras .px-card{margin:10px 0;padding:0;border:1px solid var(--line);border-radius:var(--r-card,16px);background:var(--card)}
.player-extras .px-card>summary{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;list-style:none}
.player-extras .px-card>summary::-webkit-details-marker{display:none}
.player-extras .px-card>summary::after{content:"";width:8px;height:8px;margin-left:auto;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.player-extras .px-card[open]>summary::after{transform:rotate(-135deg)}
.player-extras .px-card>summary>.icon{flex:none;width:34px;height:34px;padding:8px;border-radius:10px;background:var(--tint);color:var(--accent)}
.player-extras .px-card>summary>span{display:flex;flex-direction:column;gap:1px}
.player-extras .px-card>summary b{font-size:15px}
.player-extras .px-card>summary small{font-size:12.5px;font-weight:400;color:var(--muted)}
.player-extras .px-card>:not(summary){margin-left:16px;margin-right:16px}
.player-extras .px-card>:last-child{margin-bottom:14px}
.px-note-form{display:flex;flex-wrap:wrap;gap:8px}
.px-note-form input{flex:1 1 240px;margin:0}
.px-note-form .icon{width:16px;height:16px}
.px-feedback{display:grid;gap:12px}
.px-kind{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;border:0}
.px-kind label{position:relative;margin:0;cursor:pointer}
.px-kind input{position:absolute;width:1px;height:1px;min-height:0;padding:0;opacity:0;pointer-events:none}
.px-kind span{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:600;color:var(--ink)}
.px-kind input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff}
.px-kind input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.px-stars{margin:0;padding:0;border:0}
.px-stars legend{margin:0 0 4px;padding:0;font-size:13px;font-weight:600}
.px-stars-row{display:inline-flex;flex-direction:row-reverse;gap:2px}
.px-stars-row input{position:absolute;opacity:0;pointer-events:none}
.px-stars[hidden]{display:none}
.px-stars{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px}
.px-stars legend{width:100%}
.px-rating{color:var(--muted);font-size:13px;font-weight:600}
.player-extras .px-card>summary{border-radius:var(--r-card,16px)}
.player-extras .px-card>summary:focus-visible{outline-offset:-2px}
.player-extras .px-card>p.small a{color:var(--accent);font-weight:600;text-decoration:none}
.player-extras .px-card>p.small a:hover{text-decoration:underline}
.px-stars-row label{margin:0;padding:2px 3px;font-size:30px;line-height:1;color:color-mix(in srgb,var(--muted) 32%,var(--surface));cursor:pointer;transition:color .1s}
.px-stars-row label:hover,.px-stars-row label:hover~label,.px-stars-row input:checked~label{color:#f5b301}
.px-stars-row input:focus-visible+label{outline:2px solid var(--accent);border-radius:4px}
.px-label{font-size:13px;font-weight:600}
.px-label small{font-weight:400;color:var(--muted)}
.px-feedback textarea{margin:0}
.px-send{display:flex;align-items:center;gap:12px}

/* ---------- public viewing page (cloud/public.html): the player in a dark frame, details below ---------- */
.public-player h1{margin:4px 0 8px;overflow-wrap:anywhere}
.pv-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:14px;color:var(--muted)}
.pv-meta span+span:not([hidden])::before{content:"·";margin-right:10px;color:var(--line)}
.pv-stage{margin-top:20px;padding:0;border-radius:var(--r-card,16px);background:#0d0b1a;overflow:hidden;box-shadow:0 24px 64px -28px #3a1d9a80}
.public-player .pv-stage .vc{margin-top:0;border-radius:0;box-shadow:none}
.public-player .pv-stage video{display:block;width:100%;background:#0d0b1a}
.pv-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:20px 0 0}
.pv-card{padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-card,16px);background:var(--card)}
.pv-card h2{margin:0 0 10px;font-size:17px}
.pv-card p{margin:0;line-height:1.6;white-space:pre-line}
.pv-chapters{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.pv-chapters button{display:flex;align-items:center;gap:12px;width:100%;min-height:40px;padding:6px 10px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.pv-chapters button:hover{background:var(--tint);filter:none}
.pv-time{flex:none;min-width:48px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.pv-foot{margin:24px 0 0;font-size:12.5px;color:var(--muted);text-align:center}