/* Login, link and admin pages: same tokens and type as the main site */
:root{ --bg:#07101E; --bg1:#0C1828; --bg2:#122238; --cyan:#00D4FF;
       --grad:linear-gradient(90deg,#00D4FF 0%,#6366F1 100%);
       --text:#E8EDF5; --muted:#8A9BB0; --on-grad:#F4F8FF; --err:#F87171; --ok:#4ADE80; --warn:#FBBF24;
       --border:rgba(255,255,255,0.08); --bc:rgba(0,212,255,0.22); --film:#000;
       --fd:'Bebas Neue',sans-serif; --fb:'Inter',sans-serif;
       --pad:clamp(20px,4vw,56px); --ease:cubic-bezier(0.16,1,0.3,1); --r:clamp(12px,2vw,24px); }
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html,body{overflow-x:clip;}
html{-webkit-font-smoothing:antialiased;}
body{display:flex; flex-direction:column; min-height:100vh; min-height:100svh; background:var(--bg); color:var(--text); font-family:var(--fb); font-size:16px; line-height:1.5;}
img,canvas{display:block; max-width:100%;}
#glow{position:fixed; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none;}
a{color:var(--cyan);}

.top{display:flex; align-items:center; justify-content:space-between; gap:21px; width:100%; max-width:1500px; margin:0 auto; padding:18px var(--pad);}
.logo{display:flex; align-items:center; gap:11px; text-decoration:none;}
.logo-mark{display:flex; align-items:center; justify-content:center; flex-shrink:0; width:36px; height:36px; overflow:hidden; background:var(--grad); border-radius:9px;}
.logo-mark img{width:62%; height:62%; object-fit:contain; filter:brightness(0) invert(1);}
.logo-word{width:auto; height:46px; filter:brightness(0) invert(1);}
.back{color:var(--muted); font-size:14px; text-decoration:none; transition:color .2s;}
.back:hover{color:var(--cyan);}

.page{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:34px var(--pad) 89px;}
.col{display:flex; flex-direction:column; align-items:center; width:100%; max-width:460px;}
.col>*{width:100%;}
.page--wide{justify-content:flex-start;}
.page--wide .col{display:block; max-width:1180px;}
.col>.head{width:max-content; max-width:calc(100vw - 2*var(--pad)); text-align:center;}
.page--wide .col>.head,.adm-top .head{width:auto; max-width:none; text-align:left;}
h1{font-family:var(--fd); font-size:clamp(52px,6.2vw,80px); font-weight:400; line-height:.94;}
h1 span{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
h2{font-family:var(--fd); font-size:clamp(28px,3vw,40px); font-weight:400; line-height:1;}
.sub{margin-top:12px; color:var(--muted);}
.panel{margin-top:34px; padding:clamp(21px,3vw,34px); background:var(--bg1); border:1px solid var(--border); border-radius:var(--r);}
.note{margin-top:21px; color:var(--muted); font-size:13px; text-align:center;}
.note a,.link{color:var(--muted); font-size:14px; transition:color .2s;}
.note a:hover,.link:hover{color:var(--cyan);}

.field{display:grid; gap:6px; padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid var(--border); transition:border-color .2s;}
.field label{color:var(--muted); font-size:14px; transition:color .2s;}
.field input{width:100%; padding:2px 0; background:transparent; border:0; outline:0; color:var(--text); font-family:var(--fb); font-size:16px;}
.field input[readonly]{color:var(--muted);}
.field:focus-within{border-bottom-color:var(--cyan);}
.field:focus-within label{color:var(--cyan);}
.hint{margin:-8px 0 16px; color:var(--muted); font-size:13px;}
.msg{min-height:21px; margin-bottom:12px; font-size:14px;}
.msg.err{color:var(--err);}
.msg.ok{color:var(--ok);}
.btn{display:block; width:100%; padding:16px 32px; background:var(--grad); border:0; border-radius:100px; color:var(--on-grad); font-family:var(--fb); font-size:14px; font-weight:600; text-align:center; text-decoration:none; cursor:pointer; transition:transform .35s var(--ease);}
.btn:hover{transform:translateY(-3px);}
.btn:active{transform:translateY(0);}
.btn--auto{display:inline-block; width:auto; padding:14px 28px;}
.btn--line{padding:8px 16px; background:none; border:1px solid var(--border); color:var(--text); font-size:13px; transition:border-color .3s, color .3s;}
.btn--line:hover{border-color:var(--bc); color:var(--cyan); transform:none;}

.co{display:flex; align-items:center; justify-content:space-between; gap:21px; padding:16px 0; border-bottom:1px solid var(--border); color:var(--text); text-decoration:none;}
.co:first-child{padding-top:0;}
.co b{display:block; font-family:var(--fd); font-size:26px; font-weight:400; line-height:1.1; transition:color .2s;}
.co small{display:block; margin-top:2px; color:var(--muted); font-size:14px;}
.co .go{flex:none; color:var(--cyan); font-size:14px;}
.co:hover b{color:var(--cyan);}
.bar{display:flex; flex-wrap:wrap; gap:14px 21px; align-items:center; margin-top:21px;}

/* admin */
.adm-top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:21px;}
.grid-add{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 34px;}
.checks{display:flex; flex-wrap:wrap; gap:8px 21px; margin-bottom:21px;}
.checks label{display:flex; align-items:center; gap:8px; color:var(--text); font-size:14px; cursor:pointer;}
.checks input{width:16px; height:16px; accent-color:var(--cyan);}
.legend{margin-bottom:8px; color:var(--muted); font-size:14px;}
.table{width:100%; overflow-x:auto;}
table{width:100%; min-width:760px; border-collapse:collapse; font-size:14px;}
th{padding:8px 12px 8px 0; border-bottom:1px solid var(--border); color:var(--muted); font-weight:500; text-align:left;}
td{padding:14px 12px 14px 0; border-bottom:1px solid var(--border); vertical-align:top;}
td small{display:block; color:var(--muted); font-size:13px;}
td .checks{flex-direction:column; gap:4px; margin:0 0 8px;}
.chip{display:inline-block; padding:3px 12px; border:1px solid var(--border); border-radius:100px; color:var(--muted); font-size:13px; white-space:nowrap;}
.chip.active{color:var(--ok);}
.chip.invited{color:var(--warn);}
.chip.removed{color:var(--err);}
.acts{display:flex; flex-wrap:wrap; gap:8px;}
.acts form{display:inline;}
.mail{margin-top:21px; padding:21px; background:var(--bg2); border:1px solid var(--border); border-radius:14px;}
.mail b{display:block;}
.mail small{display:block; color:var(--muted); font-size:13px;}
.mail pre{margin-top:12px; font-family:var(--fb); font-size:14px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere;}

a:focus-visible,button:focus-visible,input[type=checkbox]:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px;}
@media (max-width:700px){.grid-add{grid-template-columns:minmax(0,1fr);}}
@media (prefers-reduced-motion:reduce){.btn,.back,.co b,.field,.field label{transition:none;}}

/* ready-to-send message on the admin page */
.sendbox{border-color:var(--bc);}
.sendbox .sub{margin:8px 0 16px; max-width:72ch;}
.sendbox textarea{display:block; width:100%; margin-bottom:16px; padding:14px 16px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; outline:0; resize:vertical; color:var(--text); font-family:var(--fb); font-size:14px; line-height:1.6;}
.sendbox textarea:focus{border-color:var(--cyan);}

/* project pages */
.pbar{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 34px;}
.pbar .bar{margin:0 0 6px;}
.col>.pbar .head,.pbar .head{width:auto; max-width:none; text-align:left;}
.pclient{margin-bottom:6px; color:var(--cyan); font-size:14px;}
.ptitle{font-size:clamp(40px,5vw,72px);}
.ptabs{display:flex; gap:clamp(16px,2.4vw,34px); margin-top:21px; overflow-x:auto; border-bottom:1px solid var(--border); scrollbar-width:none;}
.ptabs::-webkit-scrollbar{display:none;}
.ptabs a{position:relative; flex:none; padding:12px 0; color:var(--muted); font-size:14px; text-decoration:none; transition:color .25s;}
.ptabs a::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);}
.ptabs a:hover,.ptabs a.on{color:var(--text);}
.ptabs a:hover::after,.ptabs a.on::after{transform:scaleX(1);}
.count{display:inline-block; min-width:20px; padding:0 6px; background:var(--grad); border-radius:100px; color:var(--on-grad); font-size:12px; font-weight:600; line-height:20px; text-align:center;}
.panel{scroll-margin-top:21px;}
.page--wide .panel{margin-top:21px;}
.panel h2{margin-bottom:8px;}
.status-strip{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:21px 55px;}
.stage{font-family:var(--fd); font-size:clamp(34px,4vw,52px); line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
.status-side{flex:1 1 280px; max-width:460px;}
.meter{height:6px; overflow:hidden; background:var(--bg2); border-radius:100px;}
.meter span{display:block; height:100%; background:var(--grad); border-radius:100px;}
.cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 21px;}
.list{margin-top:8px; padding-left:18px; color:var(--muted); line-height:1.7;}
.list li+li{margin-top:6px;}
.row{display:flex; align-items:center; justify-content:space-between; gap:12px 21px; padding:14px 0; border-bottom:1px solid var(--border);}
.row:last-of-type{border-bottom:0;}
.row b{font-weight:600;}
.row small{display:block; margin-top:2px; color:var(--muted); font-size:13px;}
.row-act{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px 12px; flex:none;}
.row-act small{margin:0;}
.row-text{margin-top:6px; color:var(--muted); font-size:14px; white-space:pre-wrap;}
.chip.st-done,.chip.re-approved{color:var(--ok);}
.chip.st-review,.chip.re-waiting{color:var(--warn);}
.chip.st-in_progress{color:var(--cyan);}
.chip.re-changes{color:var(--err);}
.timeline{margin-top:12px; list-style:none;}
.timeline li{position:relative; display:flex; align-items:center; justify-content:space-between; gap:21px; padding:12px 0 12px 28px;}
.timeline li::before{content:''; position:absolute; left:0; top:20px; width:12px; height:12px; border:2px solid var(--bc); border-radius:50%; background:var(--bg1);}
.timeline li::after{content:''; position:absolute; left:5px; top:32px; bottom:-20px; width:2px; background:var(--border);}
.timeline li:last-child::after{display:none;}
.timeline li.tl-done::before{background:var(--ok); border-color:var(--ok);}
.timeline li.tl-review::before,.timeline li.tl-in_progress::before{background:var(--cyan); border-color:var(--cyan);}
.timeline small{display:block; color:var(--muted); font-size:13px;}
.review-head{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px 21px;}
.review-head small{color:var(--muted); font-size:13px;}
.review-media{margin-top:16px;}
.review-media img,.review-media video{display:block; width:100%; max-height:620px; object-fit:contain; background:var(--film); border-radius:14px;}
.review-link{padding:34px; background:var(--bg2); border-radius:14px; text-align:center;}
.review-note{margin-top:12px; color:var(--muted);}
.decision{margin-top:12px; padding:12px 16px; background:var(--bg2); border-radius:10px; font-size:14px;}
.decide{display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; margin-top:16px;}
details>summary{cursor:pointer; list-style:none;}
details>summary::-webkit-details-marker{display:none;}
.decide details[open]{flex-basis:100%;}
.decide details form,.ver form{margin-top:12px;}
.older{margin-top:12px;}
.older>summary{color:var(--muted); font-size:14px;}
.thread{margin-top:21px; padding-top:16px; border-top:1px solid var(--border);}
.msg-item{margin-top:10px; padding:12px 16px; background:var(--bg2); border-radius:12px;}
.msg-item--staff{border-left:2px solid var(--cyan);}
.msg-head{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;}
.msg-head small{color:var(--muted); font-size:13px;}
.msg-item p{margin-top:4px; font-size:15px; white-space:pre-wrap; overflow-wrap:anywhere;}
.panel textarea,.panel select,.inline-add input{width:100%; padding:11px 14px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; outline:0; color:var(--text); font-family:var(--fb); font-size:15px;}
.panel textarea{display:block; margin:6px 0 12px; resize:vertical;}
.panel select{width:auto; padding:8px 12px; font-size:13px;}
.panel textarea:focus,.panel select:focus,.inline-add input:focus{border-color:var(--cyan);}
.inline-add{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.inline-add input{flex:1 1 180px; width:auto;}
.add-box{margin-top:21px; padding:21px; background:var(--bg2); border-radius:14px;}
.add-box textarea{background:var(--bg1);}
.add-box .legend{margin-bottom:12px;}
.ver{flex-basis:100%;}
.ver[open]{min-width:min(420px,100%);}
input[type=file]{display:block; margin-top:8px; color:var(--muted); font-size:13px;}
@media (max-width:760px){
  .cols{grid-template-columns:minmax(0,1fr);}
  .row{flex-wrap:wrap;}
  .row-act{justify-content:flex-start;}
}