/* shared look of the site pages (home / my videos); the upload page has its own */
:root {
  --ink:#fff; --muted:rgba(255,255,255,.88); --line:rgba(255,255,255,.3);
  --panel:rgba(16,122,136,.84); --panel-line:rgba(255,255,255,.45); --card:rgba(255,255,255,.15); --card-line:rgba(255,255,255,.38);
  --btn:linear-gradient(135deg,#ffb08a,#ff6a5f); --btn-ink:#2b0a08; --a1:#ffe27a;
  --good:#9dffc4; --bad:#ffb3a7; --gbtn:rgba(255,255,255,.14); --gbtn-line:rgba(255,255,255,.4);
  --pw:max(229vh,127vw); --px:calc(50vw - 0.60 * var(--pw));
}
@media (min-width:1000px){ :root { --pw:max(229vh,145vw); --px:calc(42vw - 0.60 * var(--pw)); } }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:#08222b url('/bg-arena.jpg?v=7') var(--px) 45% / var(--pw) auto no-repeat fixed;
  font:16px/1.6 "Segoe UI",system-ui,Arial,sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(3,40,50,.55) 0%,rgba(3,40,50,.1) 45%,rgba(3,40,50,.22) 100%); }
body > * { position:relative; }
.hidden { display:none !important; }
button, .btn { font:inherit; color:var(--ink); background:var(--gbtn); border:1px solid var(--gbtn-line); border-radius:12px; padding:8px 16px; cursor:pointer; text-decoration:none; display:inline-block; }
button:hover, .btn:hover { border-color:var(--a1); background:rgba(255,255,255,.24); }
button.main { color:var(--btn-ink); font-weight:800; border:0; background:var(--btn); padding:11px 26px; box-shadow:0 6px 22px rgba(255,94,98,.45); }
button.main:hover { background:var(--btn); filter:brightness(1.06); }
button:disabled { opacity:.55; cursor:default; }

/* top bar */
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 20px; background:rgba(10,80,92,.7); }
.brand { font-size:19px; font-weight:800; color:var(--ink); text-decoration:none; }
.brand small { display:block; font-size:12.5px; font-weight:600; color:var(--a1); line-height:1.2; }
.nav { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:14px; }
.nav .who { color:var(--muted); direction:ltr; }

/* the dark glass panel, on the right of the photo (the players stay visible on the left) */
.box { max-width:440px; margin:1.5vh 16px 0 auto; padding:18px 22px 16px; background:var(--panel); border:1px solid var(--panel-line); border-radius:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.45); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
@media (min-width:1000px){ .box { margin-right:3vw; } }
@media (max-width:999px){ .box { margin-inline:auto; } }
.box h1 { margin:0 0 2px; font-size:26px; }
.box p.sub { margin:0 0 12px; color:var(--muted); }
label { display:block; font-size:14px; margin:8px 0 3px; color:var(--muted); }
input[type=email], input[type=password], input[type=text] { width:100%; padding:11px 14px; border-radius:12px; font:inherit; color:var(--ink);
  background:rgba(255,255,255,.17); border:1px solid var(--card-line); }
input[type=email], input[type=password] { direction:ltr; text-align:left; }
input::placeholder { color:rgba(255,255,255,.95); opacity:1; }
.full { width:100%; margin-top:14px; }
.big { width:100%; font-size:22px; padding:18px; margin:0 0 14px; border-radius:16px; }
.google { width:100%; display:flex; gap:10px; align-items:center; justify-content:center; background:#fff; color:#222; border:0; font-weight:700; padding:11px; }
.google:hover { background:#fff; }
.or { display:flex; align-items:center; gap:10px; margin:14px 0 2px; color:var(--muted); font-size:13px; }
.or::before, .or::after { content:""; flex:1; border-top:1px solid var(--line); }
.links { display:flex; justify-content:space-between; margin-top:14px; font-size:14px; }
.links a, .linkbtn { color:var(--a1); cursor:pointer; text-decoration:underline; background:none; border:0; padding:0; }
.check { display:flex; gap:8px; align-items:flex-start; margin-top:14px; font-size:13px; color:var(--muted); }
.msg { margin-top:10px; font-size:14px; color:var(--bad); min-height:1px; }
.note { padding:10px 14px; border-radius:14px; background:rgba(255,216,77,.14); border:1px solid rgba(255,216,77,.6); font-size:14px; margin-bottom:14px; }

/* dialogs: on the right, like the panels, without dimming the picture */
.modal { position:fixed; inset:0; z-index:10; display:flex; align-items:flex-start; justify-content:flex-start; padding:calc(var(--bar,56px) + 1.5vh) 16px 16px; pointer-events:none; }
@media (min-width:1000px){ .modal { padding-right:3vw; } }
@media (max-width:999px){ .modal { justify-content:center; } }
.dlg { pointer-events:auto; width:100%; max-width:440px; padding:24px; border-radius:22px; background:rgba(11,90,103,.97); border:1px solid var(--panel-line); box-shadow:0 30px 80px rgba(0,0,0,.6); }
.dlg h2 { margin:0 0 10px; color:var(--a1); font-size:22px; }
.mbtns { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }

/* hours counter and subscriptions */
.stats { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.stat { flex:1 1 150px; background:var(--card); border:1px solid var(--card-line); border-radius:14px; padding:8px 14px; }
.stat b { display:block; font-size:22px; line-height:1.3; }
.stat span { font-size:13px; color:var(--muted); }
.pill { display:inline-block; padding:1px 10px; border-radius:99px; font-size:12.5px; font-weight:700; background:rgba(255,255,255,.18); }
.p-ok { background:rgba(157,255,196,.2); color:var(--good); }
.p-no { background:rgba(255,179,167,.2); color:var(--bad); }
.p-mid { background:rgba(255,226,122,.2); color:var(--a1); }
.opt { background:var(--card); border:1px solid var(--card-line); border-radius:14px; padding:8px 14px; margin:8px 0; }
.opt .row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0 2px; }
.opt input, .opt select, .dlg input[type=number], .dlg input[type=date] { font:inherit; color:var(--ink); background:rgba(255,255,255,.17); border:1px solid var(--card-line); border-radius:10px; padding:6px 10px; }
.dlg .hist { font-size:13.5px; color:var(--muted); border-top:1px solid var(--card-line); margin-top:10px; padding-top:8px; max-height:160px; overflow:auto; }
button.red { border-color:var(--bad); color:var(--bad); }
.dlg.wide { max-width:560px; }

/* my videos */
.wrap { max-width:1250px; margin:0 auto; padding:10px 8px 40px; }      /* wide: the table should not need sideways scrolling */
.panel { background:var(--panel); border:1px solid var(--panel-line); border-radius:24px; padding:14px; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.head h1 { margin:0; font-size:26px; }
.tablewrap { overflow-x:auto; border:1px solid var(--card-line); border-radius:16px; }
table { width:100%; border-collapse:collapse; background:var(--card); font-size:14.5px; }
th { text-align:right; font-size:13px; font-weight:700; color:var(--a1); padding:11px 10px; background:rgba(255,255,255,.18); white-space:nowrap; }
td { padding:10px 10px; border-top:1px solid var(--card-line); vertical-align:middle; }
td.name { font-weight:700; }
td small { display:block; color:var(--muted); font-size:12.5px; overflow-wrap:anywhere; }
th.sortable { cursor:pointer; user-select:none; }
th.sortable:hover { color:#fff; }
th .arr { display:inline-block; width:1em; font-size:11px; opacity:.9; }
.ctxmenu { position:fixed; z-index:40; background:#0b5a67; border:1px solid var(--card-line); border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.5); padding:4px; }
.ctxmenu button { display:block; width:100%; text-align:right; background:none; border:0; padding:8px 18px; border-radius:8px; }
.ctxmenu button:hover { background:rgba(255,255,255,.14); }
td.cat select.cat { min-width:0; padding:5px 8px; font-size:13.5px; }
td.name input { width:100%; min-width:140px; padding:6px 10px; border-radius:8px; font:inherit; color:var(--ink); background:rgba(255,255,255,.22); border:1px solid var(--a1); }
.sortsel { display:none; }
@media (max-width:920px){ .sortsel:not(.hidden) { display:inline-block; } }
.pill { display:inline-block; padding:2px 12px; border-radius:99px; font-size:13px; font-weight:700; }
.p-done { background:rgba(157,255,196,.18); color:var(--good); }
.p-run { background:rgba(255,216,77,.18); color:var(--a1); }
.p-err { background:rgba(255,179,167,.2); color:var(--bad); }
.act { display:flex; gap:6px; flex-wrap:nowrap; }
.act a.btn { padding:4px 9px; font-size:13px; white-space:nowrap; }
.gone { color:var(--muted); }
.soon { opacity:.55; font-size:13px; white-space:nowrap; }
select { font:inherit; color:var(--ink); background:rgba(255,255,255,.22); border:1px solid var(--card-line); border-radius:12px; padding:8px 12px; max-width:100%; }
select option { background:#0b5a67; color:#fff; }
.empty { text-align:center; padding:30px 10px; color:var(--muted); }

/* phone: each video becomes a card instead of a table row */
@media (max-width:920px){
  .tablewrap { border:0; overflow:visible; background:none; }
  table, tbody, tr, td { display:block; min-width:0; width:100%; }
  table { background:none; }
  thead { display:none; }
  tr { background:var(--card); border:1px solid var(--card-line); border-radius:16px; margin-bottom:12px; padding:6px 14px; }
  td { border-top:0; padding:7px 0; display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:left; }
  td::before { content:attr(data-l); color:var(--a1); font-size:13px; font-weight:700; text-align:right; flex:none; }
  td.name { font-size:17px; border-bottom:1px solid var(--card-line); padding-bottom:9px; }
  td.name::before { display:none; }
  .panel { padding:14px; }
  .head h1 { font-size:22px; }
  .head .main { width:100%; }
  .box { margin-inline:auto; }
}

.check input[type=checkbox] { accent-color:#ff8a5b; flex:none; margin-top:4px; }
.check input[type=checkbox]:disabled { opacity:1; cursor:not-allowed; }

/* the line at the bottom of every page */
/* the top bar: the logo VolleyZip in the middle (a visitor also gets the two buttons under it) */
.topbar.logobar { flex-direction:column; justify-content:center; gap:12px; padding:14px 22px 12px; background:rgba(5,35,44,.85); border-bottom:1px solid rgba(255,255,255,.12); }
.logo { font-family:Georgia,"Times New Roman",serif; font-weight:900; color:#fff; font-size:52px; letter-spacing:-.5px; line-height:1; direction:ltr; display:inline-block; text-align:center; text-decoration:none; white-space:nowrap; }
.logo .i { position:relative; display:inline-block; }
.logo .i::after { content:""; position:absolute; width:.2em; height:.2em; border-radius:50%; background:#4fc3ff; top:-.05em; left:50%; transform:translateX(-45%); }
.logo small { display:block; margin-top:5px; font-family:"Segoe UI",Arial,sans-serif; font-weight:700; font-size:14px; letter-spacing:.02em; color:var(--a1); direction:rtl; }
.topbar.logobar .btns { display:flex; gap:12px; }
.topbar.logobar .btn { padding:8px 26px; border-radius:99px; font-weight:600; font-size:15px; }
.topbar.logobar .btn.main { color:var(--btn-ink); font-weight:800; border:0; background:var(--btn); box-shadow:0 6px 22px rgba(255,94,98,.4); }
@media (max-width:760px){ .logo { font-size:40px; } }

/* the bottom line: the copyright at the right, the links in the middle, the log out link at the left */
.sitefoot { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; padding:12px 22px 14px; color:var(--muted); font-size:13px; border-top:1px solid rgba(255,255,255,.12); background:rgba(5,35,44,.7); }
.sitefoot .mid { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.sitefoot a { color:var(--a1); font-weight:700; font-size:15px; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.sitefoot a:hover, .sitefoot a.on { color:#fff; }
.sitefoot .end { justify-self:end; }
.sitefoot .end a { font-size:13px; font-weight:600; }
@media (max-width:760px){ .sitefoot { grid-template-columns:1fr; text-align:center; justify-items:center; } .sitefoot .end { justify-self:center; } .sitefoot .copy { order:3; } .sitefoot .end:empty { display:none; } }

/* the site name: one line with a dash; in a narrow window two lines without the dash */
.brand i { font-style:normal; }
@media (max-width:700px){ .brand span, .brand i { display:block; } .brand .dash { display:none; } }