/* Director Whiz Drive - v2
   Black / red / bone. Cinematic, gritty, angular. Mobile-first throughout:
   every rule is the phone rule and media queries only widen it. */

:root {
  /* surfaces */
  --bg:        #08080A;
  --bg-2:      #0C0C0E;
  --panel:     #121214;
  --panel-2:   #17171A;
  --raise:     #1D1D21;
  --line:      #262629;
  --line-2:    #323236;
  --line-hot:  #E11B2255;

  /* brand */
  --red:       #E11B22;
  --red-hi:    #FF3B41;
  --red-lo:    #A80F17;
  --gold:      #F5C518;

  /* ink */
  --text:      #F4F4F6;
  --muted:     #9A9AA2;
  --dim:       #6A6A72;

  --ok:        #3FBF5F;
  --warn:      #E8A317;

  --tap: 50px;
  --bar: calc(72px + env(safe-area-inset-bottom));
  --cut: 12px;

  --display: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  --ui: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shadow: 0 18px 44px #00000090;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--ui); font-size: 16px; line-height: 1.45;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
}

/* Film grain + vignette. Cheap, static, and does most of the "cinematic" work. */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(120vw 55vh at 50% -12%, #E11B221F, transparent 68%),
    radial-gradient(90vw 50vh at 50% 112%, #00000090, transparent 60%);
}

.app { position: relative; z-index: 2; min-height: 100dvh; padding-bottom: var(--bar); }

/* ------------------------------------------------------------- primitives -- */

.cut { clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.cut-sm { clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }

button, input, select, textarea { font: inherit; color: inherit; }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; min-height: var(--tap); padding: 0 1.25rem;
  border: 0; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  letter-spacing: .09em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  background: linear-gradient(180deg, var(--red-hi), var(--red) 42%, var(--red-lo));
  box-shadow: inset 0 1px 0 #ffffff40, 0 8px 22px #E11B2233;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: filter .16s, transform .07s;
}
.btn:active { transform: translateY(1px); filter: brightness(1.12); }
.btn[disabled] { opacity: .42; pointer-events: none; }

.btn.ghost {
  background: linear-gradient(180deg, #232327, #16161A);
  box-shadow: inset 0 1px 0 #ffffff14;
  border: 1px solid var(--line-2); color: var(--text);
}
.btn.quiet { background: none; box-shadow: none; border: 1px solid var(--line-2); color: var(--muted); }
.btn.sm { min-height: 40px; font-size: .86rem; padding: 0 .9rem; width: auto; }

.field {
  width: 100%; min-height: var(--tap); padding: .8rem .95rem;
  background: #0E0E10; border: 1px solid var(--line-2); color: var(--text);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.field:focus { border-color: var(--red); box-shadow: 0 0 0 3px #E11B2226; }
.field::placeholder { color: var(--dim); }
select.field { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }

.label {
  display: block; margin: 0 0 .4rem; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}

.card { background: linear-gradient(165deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); }

.muted { color: var(--muted); } .dim { color: var(--dim); }
.small { font-size: .82rem; } .tiny { font-size: .72rem; }
.mono { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.stack > * + * { margin-top: .8rem; }
.pad { padding: 1rem; }
.hd { font-family: var(--display); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

/* ------------------------------------------------------------------ brand -- */

.wordmark { display: inline-flex; flex-direction: column; line-height: .88; }
.wordmark .l1 {
  font-family: var(--display); font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: #EFEFF2;
  text-shadow: 0 2px 0 #00000080;
}
.wordmark .l2 {
  font-family: var(--display); font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--red-hi), var(--red-lo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tagline { font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); margin-top: .5rem; }

.brandrow { display: flex; align-items: center; gap: .65rem; }
.brandrow .em { width: 34px; height: 36px; flex: none; }
.brandrow .wordmark .l1 { font-size: 1.02rem; }
.brandrow .wordmark .l2 { font-size: 1.02rem; }

/* ------------------------------------------------------------------ login -- */

.auth { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; position: relative; }
.auth::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60vw 40vh at 50% 18%, #E11B2218, transparent 70%),
    repeating-linear-gradient(115deg, #ffffff04 0 1px, transparent 1px 46px);
}
.auth .card { width: 100%; max-width: 25rem; padding: 2rem 1.5rem; box-shadow: var(--shadow); }
.auth .em { width: 74px; height: 78px; display: block; margin: 0 auto .9rem; }
.auth .wordmark { align-items: center; width: 100%; }
.auth .wordmark .l1 { font-size: 2.05rem; }
.auth .wordmark .l2 { font-size: 2.05rem; }
.auth h1 { font-family: var(--display); font-size: .84rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 600; text-align: center; margin: 1.6rem 0 1.1rem; }

.pw-wrap { position: relative; }
.pw-wrap .field { padding-right: 3.2rem; }
.pw-eye { position: absolute; right: 0; top: 0; height: 100%; width: 3.2rem; background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 1.05rem; }

.err { border-left: 3px solid var(--red); background: #E11B2216; padding: .75rem .85rem; font-size: .88rem; color: #FF9A9E; }

.watermark {
  font-family: var(--display); font-weight: 800; font-size: 2.1rem; letter-spacing: .06em;
  text-transform: uppercase; color: #ffffff08; text-align: center; margin-top: 1.5rem;
  transform: rotate(-4deg);
}

/* ----------------------------------------------------------------- topbar -- */

.top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .8rem;
  padding: max(.85rem, env(safe-area-inset-top)) 1rem .85rem;
  background: #08080AF2; backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.top h2 { font-family: var(--display); font-weight: 800; font-size: 1.12rem; letter-spacing: .05em; text-transform: uppercase; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .sub { font-size: .74rem; color: var(--muted); letter-spacing: .05em; }

.iconbtn {
  min-width: var(--tap); min-height: var(--tap); flex: none;
  display: grid; place-items: center; background: none; border: 0;
  color: var(--text); font-size: 1.3rem; cursor: pointer;
}
.iconbtn.on { color: var(--red-hi); }
.avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(150deg, var(--red), var(--red-lo)); font-family: var(--display); font-weight: 800; font-size: .9rem; color: #fff; border: 1px solid #ffffff22; }

.crumbs { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; padding: .65rem 1rem; font-size: .76rem; color: var(--dim); border-bottom: 1px solid var(--line); letter-spacing: .04em; }
.crumbs button { background: none; border: 0; color: var(--red-hi); padding: 0; cursor: pointer; font: inherit; }

/* ------------------------------------------------------------------ stats -- */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; padding: 1rem; }
.stat { background: linear-gradient(165deg, var(--panel-2), #0F0F11); border: 1px solid var(--line); padding: .85rem .6rem; text-align: center; position: relative; overflow: hidden; }
.stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--red), transparent); opacity: .65; }
.stat .n { font-family: var(--display); font-weight: 800; font-size: 1.55rem; line-height: 1; letter-spacing: .02em; }
.stat .k { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-top: .35rem; }

.welcome { padding: 1.25rem 1rem .25rem; }
.welcome .hi { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.welcome .who { font-family: var(--display); font-weight: 800; font-size: 1.9rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.05; }

.actions2 { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; padding: 0 1rem 1rem; }

.sectionhd { display: flex; align-items: baseline; justify-content: space-between; padding: .5rem 1rem; }
.sectionhd .t { font-family: var(--display); font-weight: 700; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.sectionhd .a { font-size: .74rem; color: var(--red-hi); background: none; border: 0; cursor: pointer; letter-spacing: .06em; text-transform: uppercase; }

/* --------------------------------------------------------------- projects -- */

.projects { padding: 0 1rem 1rem; display: grid; gap: .55rem; }
.project {
  display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left;
  padding: .7rem; cursor: pointer;
  background: linear-gradient(120deg, var(--panel-2), #0E0E10);
  border: 1px solid var(--line); transition: border-color .15s, transform .07s;
}
.project:active { transform: translateY(1px); border-color: var(--line-hot); }
.project .glyph {
  width: 58px; height: 44px; flex: none; display: grid; place-items: center;
  background: linear-gradient(140deg, #2A1113, #141416);
  border: 1px solid #E11B2233; color: var(--red-hi);
  font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: .04em;
}
.project .name { font-family: var(--display); font-weight: 700; font-size: .98rem; letter-spacing: .05em; text-transform: uppercase; line-height: 1.2; }
.project .meta { font-size: .74rem; color: var(--dim); margin-top: .2rem; letter-spacing: .04em; }
.project .chev { margin-left: auto; color: var(--line-2); font-size: 1.35rem; }

.folderrow {
  display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left;
  min-height: var(--tap); padding: .8rem 1rem;
  background: #0E0E1099; border: 0; border-bottom: 1px solid var(--line);
  color: var(--text); cursor: pointer; font-family: var(--display); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; font-size: .92rem;
}
.folderrow .ico { color: var(--red); }
.folderrow .chev { margin-left: auto; color: var(--line-2); }

/* ------------------------------------------------------------------- grid -- */

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; padding: .75rem 1rem 1rem; }
@media (min-width: 620px)  { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 920px)  { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1240px) { .grid { grid-template-columns: repeat(5, 1fr); } }

.tile { position: relative; background: var(--panel); border: 1px solid var(--line); cursor: pointer; overflow: hidden; transition: border-color .15s, transform .07s; }
.tile:active { transform: translateY(1px); }
.tile.sel { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 0 26px #E11B2240; }

.tile .shot {
  position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center;
  background:
    radial-gradient(70% 60% at 50% 38%, #24242A, #0D0D0F 78%),
    repeating-linear-gradient(52deg, #ffffff05 0 1px, transparent 1px 11px);
}
.tile .shot .ext { font-family: var(--display); font-weight: 800; font-size: 1.02rem; letter-spacing: .16em; text-transform: uppercase; color: #43434B; }
.tile .shot .thumb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0; transition: opacity .32s ease;
}
.tile .shot .thumb.in { opacity: 1; }
.tile.sel .shot .thumb { opacity: .55; }
.tile.sel .shot .ext { color: #6A2B2F; }
.tile .noplay { position: absolute; left: 0; bottom: 0; padding: .12rem .4rem; font-size: .58rem; letter-spacing: .09em; text-transform: uppercase; color: var(--warn); background: #000000B0; }
.tile .badge-proxy { position: absolute; top: .38rem; right: .38rem; padding: .1rem .38rem; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: #E11B22CC; }
.tile .info { padding: .5rem .55rem .6rem; border-top: 1px solid var(--line); }
.tile .fn { font-size: .73rem; line-height: 1.3; word-break: break-all; color: #D8D8DC; }
.tile .sz { font-size: .66rem; color: var(--dim); margin-top: .18rem; letter-spacing: .04em; }

.tick {
  position: absolute; top: .38rem; left: .38rem; width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; font-size: .82rem; color: transparent;
  background: #000000B0; border: 2px solid #ffffff5C;
}
.tile.sel .tick { background: var(--red); border-color: #fff; color: #fff; }

/* -------------------------------------------------------------- actionbar -- */

.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom));
  background: #0C0C0EF7; backdrop-filter: blur(18px);
  border-top: 1px solid var(--line-hot);
  transform: translateY(106%); transition: transform .24s cubic-bezier(.2,.85,.25,1);
}
.actionbar.up { transform: none; }
.actionbar .lead { font-family: var(--display); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.actionbar .row { display: flex; gap: .55rem; margin-top: .75rem; }
.actionbar .row .btn { flex: 1; }

/* ------------------------------------------------------------------- tabs -- */

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: #0A0A0CF7; backdrop-filter: blur(18px); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs button {
  min-height: 72px; background: none; border: 0; cursor: pointer; color: var(--dim);
  display: grid; place-items: center; gap: .25rem;
  font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600;
  position: relative;
}
.tabs button .ico { font-size: 1.2rem; line-height: 1; }
.tabs button.on { color: var(--red-hi); }
.tabs button.on::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 2px; background: var(--red); box-shadow: 0 0 12px var(--red); }

/* ------------------------------------------------------------------ sheet -- */

.scrim { position: fixed; inset: 0; z-index: 60; background: #000000D4; backdrop-filter: blur(4px); }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 90dvh; overflow: auto;
  background: linear-gradient(180deg, #17171A, #0A0A0C);
  border-top: 1px solid var(--line-hot); box-shadow: var(--shadow);
  padding: 1.1rem 1rem calc(1.35rem + env(safe-area-inset-bottom));
  animation: rise .26s cubic-bezier(.2,.85,.25,1);
}
@keyframes rise { from { transform: translateY(22px); opacity: 0 } }
@media (min-width: 720px) {
  .sheet { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%,-50%); width: 30rem; border: 1px solid var(--line-hot); }
}
.sheet h3 { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 1rem; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line-2); }
.seg button { min-height: var(--tap); background: none; border: 0; cursor: pointer; color: var(--muted); font-family: var(--display); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .84rem; }
.seg button.on { background: linear-gradient(180deg, var(--red-hi), var(--red-lo)); color: #fff; }

.switch { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--tap); }
.switch input { appearance: none; width: 54px; height: 30px; flex: none; cursor: pointer; background: #0E0E10; border: 1px solid var(--line-2); position: relative; transition: background .15s, border-color .15s; }
.switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: var(--dim); transition: .18s; }
.switch input:checked { background: #E11B2226; border-color: var(--red); }
.switch input:checked::after { left: 27px; background: var(--red-hi); }

.linkbox { padding: .85rem; background: #0E0E10; border: 1px dashed var(--line-hot); font-size: .86rem; word-break: break-all; font-variant-numeric: tabular-nums; }
.ring {
  width: 74px; height: 74px; margin: 0 auto 1rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 2rem; color: var(--red-hi);
  background: #E11B2214; border: 2px solid #E11B2266;
}

/* ----------------------------------------------------------------- upload -- */

.drop {
  border: 2px dashed var(--line-2); background: #0D0D0F;
  padding: 2.4rem 1.25rem; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.drop.hot { border-color: var(--red); background: #E11B220E; }
.drop .ico { font-size: 2.4rem; color: var(--red); line-height: 1; }
.drop .t { font-family: var(--display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: .7rem; }
.drop .s { font-size: .8rem; color: var(--dim); margin-top: .25rem; }

.uprow { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.uprow .nm { font-size: .8rem; word-break: break-all; }
.uprow .pc { font-family: var(--display); font-weight: 700; font-size: .82rem; color: var(--red-hi); flex: none; min-width: 3ch; text-align: right; }
.bar { height: 4px; background: #232327; margin-top: .35rem; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--red-hi), var(--red)); transition: width .2s; }
.uprow.done .pc { color: var(--ok); }
.uprow.fail .pc { color: var(--warn); }

.feature { display: flex; align-items: flex-start; gap: .7rem; padding: .55rem 0; }
.feature .b { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 1px solid #E11B2244; color: var(--red-hi); font-size: .68rem; margin-top: .1rem; }
.feature .t { font-size: .86rem; }
.feature .s { font-size: .74rem; color: var(--dim); }

/* ----------------------------------------------------------------- player -- */

/* Three fixed bands: header, stage, controls. The stage takes whatever is left
   and the video is contained inside it, so a 4096x2160 clip can never push the
   buttons off the screen. min-height:0 is what allows the stage to shrink. */
.player { position: fixed; inset: 0; z-index: 70; background: #000; display: flex; flex-direction: column; }
.player .top { position: static; flex: none; background: #000000E8; }
.player .stage {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: grid; place-items: center; background: #000;
}
.player .stage video {
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  object-fit: contain; display: block; background: #000;
}
.player .bar2 {
  flex: none; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
  background: #0A0A0C; border-top: 1px solid var(--line);
}
.player .bar2 .fn { flex: 1 1 100%; font-size: .78rem; word-break: break-all; color: var(--muted); }
.player .bar2 .btn { width: auto; flex: 1 1 0; min-width: 0; }
.player .note { flex: 1 1 100%; font-size: .68rem; color: var(--dim); }
.cantplay { flex: 1; display: grid; place-items: center; padding: 2rem 1.5rem; text-align: center; }
.cantplay .big { font-size: 2.6rem; margin-bottom: .8rem; }

/* ------------------------------------------------------------------- misc -- */

.empty { padding: 3.5rem 1.5rem; text-align: center; color: var(--dim); }
.empty .big { font-size: 2.6rem; opacity: .4; margin-bottom: .8rem; }
.empty .t { font-family: var(--display); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.spin { width: 32px; height: 32px; margin: 3.5rem auto; border: 3px solid var(--line-2); border-top-color: var(--red); border-radius: 50%; animation: sp .8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg) } }

.row { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.chip { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; padding: .16rem .45rem; border: 1px solid var(--line-2); color: var(--muted); }
.chip.ok { color: var(--ok); border-color: #3FBF5F55; }
.chip.warn { color: var(--warn); border-color: #E8A31755; }
.chip.red { color: var(--red-hi); border-color: var(--line-hot); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--bar) + 1rem); transform: translateX(-50%);
  z-index: 90; background: #17171A; border: 1px solid var(--line-hot);
  padding: .75rem 1.15rem; font-size: .86rem; box-shadow: var(--shadow); animation: rise .2s;
  max-width: calc(100vw - 2rem); text-align: center;
}