/* axclip web: shared tokens and base styles for the website, clip viewer, account portal and admin panel.
   Served at /assets/base.css. Tokens match the axclip app. Dark is the default, light follows the browser. */
:root {
  color-scheme: dark;
  --Bg: #121110; --Surface: #1A1816; --Raised: #221F1C; --Hover: #2A2622; --Field: #141211; --Well: #2A2622;
  --Border: #2E2A26; --BorderStrong: #3D3833; --Text: #ECE8E1; --Muted: #A09A90; --Faint: #6E685F;
  --Accent: #F5A524; --AccentHover: #FFB648; --AccentText: #F5A524; --OnAccent: #1F1503;
  --AccentSoft: rgb(245 165 36 / .12); --AccentLine: rgb(245 165 36 / .45);
  --Danger: #F2686C; --DangerFill: #C2262B; --DangerSoft: rgb(229 72 77 / .13);
  --Success: #5FC07F; --SuccessSoft: rgb(76 175 109 / .14);
  --Skel: #24211E; --SkelHi: #302C28; --Focus: #F5A524;
  --TipBg: #2E2A26; --TipText: #ECE8E1; --KeyBg: #2A2622; --Track: #141211; --Stripe: #201D1A; --BannerBg: #2B2318;
  --Scrim: rgb(10 9 8 / .7); --Shadow: 0 18px 44px rgb(0 0 0 / .5), 0 2px 8px rgb(0 0 0 / .35);
  --Heart: #F0643C; --Video: #0C0B0A;
  --Sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --Mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --Gutter: 16px; --Ease: cubic-bezier(.2, .8, .2, 1); --Fast: 140ms; --Mid: 220ms;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --Bg: #F6F4F0; --Surface: #FFFFFF; --Raised: #FFFFFF; --Hover: #F1EDE7; --Field: #FFFFFF; --Well: #E9E4DC;
    --Border: #E3DED6; --BorderStrong: #D3CCC1; --Text: #1C1A17; --Muted: #6B655C; --Faint: #A39C91;
    --AccentHover: #EE9A17; --AccentText: #B45309; --OnAccent: #1C1A17;
    --AccentSoft: rgb(245 165 36 / .15); --AccentLine: rgb(180 83 9 / .4);
    --Danger: #C2262B; --DangerSoft: rgb(194 38 43 / .08); --Success: #2E7D4F; --SuccessSoft: rgb(46 125 79 / .1);
    --Skel: #ECE8E1; --SkelHi: #F7F4EF; --Focus: #B45309;
    --TipBg: #2B2824; --TipText: #F6F4F0; --KeyBg: #FFFFFF; --Track: #F1EDE7; --Stripe: #F1EDE7; --BannerBg: #FCEFD9;
    --Scrim: rgb(28 26 23 / .45); --Shadow: 0 18px 44px rgb(60 45 20 / .18), 0 2px 8px rgb(60 45 20 / .1);
    --Heart: #E0492B;
  }
}
@media (min-width: 640px) { :root { --Gutter: 24px; } }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--Bg); color: var(--Text); font: 15px/1.55 var(--Sans); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
a { color: var(--AccentText); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: rgb(245 165 36 / .3); }
:focus-visible { outline: 2px solid var(--Focus); outline-offset: 2px; }
.Sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.VisuallyHidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.Mono { font-family: var(--Mono); }
.Num { font-variant-numeric: tabular-nums; }
.Muted { color: var(--Muted); }
.Icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.IsSpinning { animation: Spin .9s linear infinite; }
.SkipLink { position: fixed; left: 12px; top: -56px; z-index: 80; padding: 8px 12px; border-radius: 8px; background: var(--Accent); color: var(--OnAccent); font-weight: 600; text-decoration: none; }
.SkipLink:focus { top: 12px; }

/* Layout */
.Page { display: flex; flex-direction: column; min-height: 100vh; }
.PageMain { flex: 1 0 auto; outline: none; }
.Wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: var(--Gutter); padding-right: var(--Gutter); }
.Wrap.IsNarrow { max-width: 760px; }
.TopBar { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.Brand { display: inline-flex; align-items: center; gap: 10px; color: var(--Text); font-size: 16px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
.Brand:hover { text-decoration: none; }
.BrandMark { width: 28px; height: 28px; flex: none; }
.BrandMark.IsLarge { width: 56px; height: 56px; }
.TopNav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 2px; margin-left: auto; }
.NavLink { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 8px; color: var(--Muted); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color var(--Fast), color var(--Fast); }
.NavLink:hover { background: var(--Hover); color: var(--Text); text-decoration: none; }
.NavLink[aria-current="page"] { color: var(--Text); }

/* Footer, on every page */
.Footer { flex: none; margin-top: 56px; padding: 22px 0 28px; border-top: 1px solid var(--Border); color: var(--Muted); font-size: 13px; }
.FooterRow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.MadeWith { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.Heart { width: 15px; height: 15px; flex: none; color: var(--Heart); fill: currentColor; }
.FooterLinks { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.FooterLinks a { color: var(--Muted); text-decoration: none; }
.FooterLinks a:hover { color: var(--Text); text-decoration: underline; text-decoration-thickness: 1px; }

/* Skeletons */
.Skel { display: block; height: 12px; border-radius: 4px; color: transparent; background: linear-gradient(100deg, var(--Skel) 35%, var(--SkelHi) 50%, var(--Skel) 65%) var(--Skel); background-size: 250% 100%; animation: Shimmer 1.5s linear infinite; }
.Skel.IsInline { display: inline-block; vertical-align: middle; }
.Skel.IsTall { height: 20px; }
.Skel.IsBlock { height: 36px; border-radius: 8px; }
.IsW40 { width: 40%; } .IsW60 { width: 60%; } .IsW80 { width: 80%; } .IsW96 { width: 96px; } .IsW160 { width: 160px; } .IsW220 { width: 220px; }

/* Buttons */
.Button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 13px; border: 1px solid var(--BorderStrong); border-radius: 8px; background: var(--Raised); color: var(--Text); font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; transition: background-color var(--Fast), border-color var(--Fast), color var(--Fast), transform 90ms; }
.Button:hover { background: var(--Hover); text-decoration: none; }
.Button:active { transform: translateY(1px) scale(.985); }
.Button.IsLarge { height: 42px; padding: 0 18px; border-radius: 9px; font-size: 14px; }
.Button.IsSmall { height: 30px; padding: 0 10px; font-size: 12.5px; gap: 6px; }
.Button.IsBlock { display: flex; width: 100%; }
.Button.IsPrimary { background: var(--Accent); border-color: transparent; color: var(--OnAccent); }
.Button.IsPrimary:hover { background: var(--AccentHover); }
.Button.IsQuiet { background: transparent; border-color: transparent; color: var(--Muted); }
.Button.IsQuiet:hover { background: var(--Hover); color: var(--Text); }
.Button.IsDanger { color: var(--Danger); }
.Button.IsDanger:hover { background: var(--DangerSoft); }
.Button.IsDangerFill { background: var(--DangerFill); border-color: transparent; color: #FFFFFF; }
.Button.IsDangerFill:hover { background: #AD1F24; }
.Button.IsDone .Icon { color: var(--Success); }
.Button.IsPrimary.IsDone .Icon { color: inherit; }
.Button[aria-disabled="true"], .Button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.Button[aria-disabled="true"]:hover, .Button:disabled:hover { background: var(--Raised); }
.Button.IsPrimary[aria-disabled="true"]:hover, .Button.IsPrimary:disabled:hover { background: var(--Accent); }
.Button.IsDangerFill:disabled:hover { background: var(--DangerFill); }
.IconButton { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--Muted); text-decoration: none; cursor: pointer; transition: background-color var(--Fast), color var(--Fast), transform 90ms; }
.IconButton:hover { background: var(--Hover); color: var(--Text); text-decoration: none; }
.IconButton:active { transform: scale(.92); }
.IconButton.IsDanger:hover { background: var(--DangerSoft); color: var(--Danger); }
.IconButton[aria-disabled="true"], .IconButton:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.IconButton.IsDone { color: var(--Success); }

/* Form controls */
.Field { display: grid; gap: 6px; min-width: 0; }
.FieldLabel { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; }
.FieldNote { color: var(--Muted); font-size: 12px; font-weight: 400; }
.FieldHint { min-height: 18px; color: var(--Muted); font-size: 12.5px; line-height: 18px; }
.Field.HasError .FieldHint, .FieldHint.HasError { color: var(--Danger); }
.Field.HasError .Input, .Field.HasError .Textarea { border-color: var(--Danger); }
.Input, .Select, .Textarea { width: 100%; min-width: 0; height: 38px; padding: 0 11px; border: 1px solid var(--BorderStrong); border-radius: 8px; background: var(--Field); color: var(--Text); font-size: 14px; transition: border-color var(--Fast), box-shadow var(--Fast); }
.Textarea { height: auto; min-height: 92px; padding: 9px 11px; line-height: 1.45; resize: vertical; }
.Input:hover, .Select:hover, .Textarea:hover { border-color: var(--Faint); }
.Input:focus, .Select:focus, .Textarea:focus { outline: none; border-color: var(--Accent); box-shadow: 0 0 0 3px var(--AccentSoft); }
.Input::placeholder, .Textarea::placeholder { color: var(--Faint); }
.Input.IsNumber { font-variant-numeric: tabular-nums; }
.Select { appearance: none; padding-right: 32px; cursor: pointer; background-color: var(--Field); background-image: linear-gradient(45deg, transparent 50%, var(--Muted) 50%), linear-gradient(135deg, var(--Muted) 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.Select option { background: var(--Surface); color: var(--Text); }
.CheckRow { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 20px; cursor: pointer; }
.Check { accent-color: var(--Accent); width: 17px; height: 17px; margin: 2px 0 0; flex: none; cursor: pointer; }
.Progress { appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--Well); overflow: hidden; }
.Progress::-webkit-progress-bar { background: var(--Well); border-radius: 4px; }
.Progress::-webkit-progress-value { background: var(--Accent); border-radius: 4px; transition: width .5s var(--Ease); }
.Progress::-moz-progress-bar { background: var(--Accent); border-radius: 4px; }
.Progress.IsWarm::-webkit-progress-value { background: var(--Danger); }
.Progress.IsWarm::-moz-progress-bar { background: var(--Danger); }

/* Chips and cards */
.Chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border: 1px solid var(--Border); border-radius: 11px; background: var(--Track); color: var(--Muted); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.Chip.IsGood { border-color: transparent; background: var(--SuccessSoft); color: var(--Success); }
.Chip.IsWarn { border-color: var(--AccentLine); background: var(--AccentSoft); color: var(--AccentText); }
.Chip.IsBad { border-color: transparent; background: var(--DangerSoft); color: var(--Danger); }
.Card { border: 1px solid var(--Border); border-radius: 12px; background: var(--Surface); }
.Banner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; border: 1px solid var(--AccentLine); border-radius: 10px; background: var(--BannerBg); font-size: 13.5px; }
.Banner .Icon { color: var(--AccentText); }
.BannerText { flex: 1 1 240px; min-width: 0; }

/* Dialogs, menus, tips and toasts */
.Dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; padding: 0; overflow: auto; border: 1px solid var(--BorderStrong); border-radius: 14px; background: var(--Surface); color: var(--Text); box-shadow: var(--Shadow); }
.Dialog.IsWide { width: min(960px, calc(100vw - 32px)); }
.Dialog[open] { animation: DialogIn 220ms var(--Ease); }
.Dialog::backdrop { background: var(--Scrim); }
.DialogBody { display: grid; gap: 14px; padding: 20px 20px 16px; }
.DialogTitle { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
.DialogText { color: var(--Muted); font-size: 13.5px; line-height: 1.55; }
.DialogActions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 0 20px 20px; }
.Menu { position: fixed; inset: auto; left: var(--MenuX, 8px); top: var(--MenuY, 8px); min-width: 200px; max-width: min(320px, calc(100vw - 16px)); margin: 0; padding: 6px; overflow: auto; max-height: calc(100vh - 16px); border: 1px solid var(--BorderStrong); border-radius: 10px; background: var(--Raised); color: var(--Text); box-shadow: var(--Shadow); }
.Menu:popover-open { animation: PopIn 160ms var(--Ease); }
.MenuTitle { padding: 6px 10px 4px; color: var(--Muted); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.MenuItem { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--Text); font-size: 13.5px; text-align: left; cursor: pointer; }
.MenuItem:hover, .MenuItem:focus-visible { background: var(--Hover); outline: none; }
.MenuItem:focus-visible { box-shadow: inset 0 0 0 2px var(--Focus); }
.MenuItem .Icon { width: 18px; height: 18px; color: var(--Muted); }
.MenuSpacer { width: 18px; height: 18px; flex: none; }
.MenuItem.IsDanger, .MenuItem.IsDanger .Icon { color: var(--Danger); }
.MenuItem.IsOn { font-weight: 600; }
.MenuItem.IsOn .Icon { color: var(--AccentText); }
.MenuItem:disabled, .MenuItem[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.MenuItem:disabled:hover, .MenuItem[aria-disabled="true"]:hover { background: transparent; }
.MenuSep { height: 1px; margin: 5px 4px; background: var(--Border); }
.Tip { position: fixed; inset: auto; left: 0; top: 0; margin: 0; max-width: 280px; padding: 5px 8px; overflow: visible; border: 0; border-radius: 6px; background: var(--TipBg); color: var(--TipText); font-size: 12px; line-height: 16px; box-shadow: 0 6px 18px rgb(0 0 0 / .28); pointer-events: none; transform: translate(var(--TipX, 0px), var(--TipY, 0px)); }
.Tip:popover-open { animation: TipIn 120ms ease-out; }
.Toasts { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.Toast { position: relative; display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: min(440px, calc(100vw - 32px)); min-height: 46px; padding: 7px 7px 7px 14px; overflow: hidden; border: 1px solid var(--BorderStrong); border-radius: 10px; background: var(--Raised); box-shadow: var(--Shadow); font-size: 13.5px; pointer-events: auto; animation: ToastIn 220ms var(--Ease); }
.Toast.IsLeaving { opacity: 0; transform: translateY(6px); transition: opacity var(--Fast), transform var(--Fast); }
.ToastIcon { color: var(--Muted); }
.Toast.IsGood .ToastIcon { color: var(--Success); }
.Toast.IsBad .ToastIcon { color: var(--Danger); }
.ToastText { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ToastTimer { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--Accent); transform-origin: left; animation: Drain var(--Life, 6s) linear forwards; }
.Toast.IsPaused .ToastTimer { animation-play-state: paused; }
@media (max-width: 519px) {
  .Toasts { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
  .Toast { min-width: 0; max-width: none; }
}

/* Motion */
@keyframes Shimmer { from { background-position: 125% 0; } to { background-position: -25% 0; } }
@keyframes Spin { to { transform: rotate(360deg); } }
@keyframes Drain { to { transform: scaleX(0); } }
@keyframes CardIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes ToastIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes DialogIn { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes PopIn { from { opacity: 0; transform: translateY(-4px); } }
@keyframes TipIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}