/* Productoons client portal + admin. Builds on styles.css (same tokens & components). */
.portal{background:var(--cream)}
.portal-main{padding:28px 0 64px;min-height:calc(100vh - 64px - 90px)}
.wrap-portal{width:min(860px,100% - 32px)}
.wrap-wide{width:min(1200px,100% - 32px)}
.footer-portal{padding:22px 0}
.foot-legal-only p{margin:0;color:#CFC6EA;font-size:.88rem}
.foot-legal-only a{color:#fff}
.inline{display:inline}
.card{background:#fff;border:var(--b);border-radius:24px;padding:clamp(18px,4vw,28px);box-shadow:var(--sh);margin-bottom:20px;min-width:0}
.card > :last-child{margin-bottom:0}
.stack{display:grid;gap:0;align-content:start;min-width:0}
.stack-sm{margin:28px 0 12px}
.stack-xs{display:grid;gap:8px}
.mt{margin-top:14px}
.center{text-align:center}
.small{font-size:.9rem}
.muted{color:var(--ink2)}
.hint{display:block;font-size:.85rem;font-weight:500;color:var(--ink2);margin-top:2px}
legend .hint{display:inline;margin-left:4px}
.break{word-break:break-word;overflow-wrap:anywhere}
.nowrap{white-space:nowrap}
.h2{font-size:clamp(1.6rem,5vw,2.2rem)}
.h3{font-size:1.35rem;margin-bottom:.6em}
.h4{font-family:var(--display);font-size:1.1rem;margin:18px 0 10px}
.kicker{margin-bottom:6px}
.back{margin:0 0 14px;font-weight:700}
.back a{text-decoration:none;font-family:var(--display)}
.back a:hover{color:var(--grape)}
.page-h{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
.page-h h1{font-size:clamp(2rem,7vw,2.8rem);margin:0;max-width:none;overflow-wrap:anywhere}
.page-h p{margin:0}
.linkish{font-weight:700}
code{background:var(--soft);padding:1px 6px;border-radius:6px;font-size:.9em}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;line-height:1.5}

/* topbar actions (shared with the homepage) */
.topbar-act{display:flex;align-items:center;gap:14px}
.nav-login{font-family:var(--display);font-weight:600;font-size:1.02rem;text-decoration:none;white-space:nowrap}
.nav-login:hover{color:var(--grape)}

/* alerts */
.alert{border:var(--b);border-radius:16px;padding:12px 16px;margin:0 0 18px;background:#E6FFF5;font-weight:600;box-shadow:var(--sh-sm)}
.alert-err{background:#FFF0EE}
.alert ul{margin:6px 0 0;padding-left:20px;font-weight:500}
.alert p{margin:6px 0 0}

/* auth */
.auth{display:grid;place-items:center;min-height:52vh}
.auth-card{width:min(480px,100%);text-align:left}
.auth-card h1{font-size:clamp(2rem,7vw,2.5rem)}
.auth-ico{font-size:2.6rem;margin:0 0 6px;line-height:1}
.auth-foot{margin:16px 0 0}

/* forms */
.form{display:grid;gap:16px}
.row2,.row3{display:grid;gap:16px}
@media (min-width:700px){.row2{grid-template-columns:1fr 1fr}.row3{grid-template-columns:2fr 1fr 2fr}}
input[type=password],input[type=number]{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--cream);border:2px solid var(--ink);border-radius:14px;padding:12px 14px}
input[type=password]:focus,input[type=number]:focus{outline:3px solid var(--grape);outline-offset:1px;background:#fff}
select{appearance:auto}
.check{display:flex;gap:10px;align-items:center;font-weight:600;font-size:.95rem}
.check input{width:20px;height:20px;accent-color:var(--grape);flex:none}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg span{display:inline-block;border:2px solid var(--ink);border-radius:999px;padding:9px 16px;font-family:var(--display);font-weight:600;background:#fff;cursor:pointer;transition:background .15s}
.seg input:checked + span{background:var(--sun);box-shadow:var(--sh-sm)}
.seg input:focus-visible + span{outline:3px solid var(--grape);outline-offset:2px}
.drop{display:grid;justify-items:center;gap:2px;text-align:center;border:2px dashed var(--ink);border-radius:18px;padding:22px 14px;background:var(--soft);cursor:pointer;transition:background .15s}
.drop:hover{background:#E9E2FF}
.drop-sm{padding:14px}
.drop-ico{font-size:1.8rem;line-height:1}
.drop-t{font-family:var(--display);font-weight:600;font-size:1.1rem}
.drop-s{font-size:.88rem;color:var(--ink2)}
.file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.file-input:focus-visible + .thumbs,.drop:focus-within{outline:3px solid var(--grape)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px;margin-top:10px}
.thumbs:empty{display:none}
.thumbs-lg{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.thumbs a,.thumbs figure{position:relative;display:block;margin:0;min-width:0}
.thumbs img{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid var(--ink);border-radius:12px;background:#fff}
.thumbs .tag{position:absolute;top:6px;left:6px;background:var(--sun);border:2px solid var(--ink);border-radius:8px;font-size:.72rem;font-weight:700;padding:0 6px}
.thumb-dl .small{display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem}
.thumb-err{grid-column:1/-1;color:#c0162f;font-weight:700;font-size:.92rem}

/* credits */
.credits-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;background:var(--sun)}
.credits-card.is-empty{background:#fff}
.credits-n{font-family:var(--display);font-weight:700;font-size:clamp(2rem,8vw,2.6rem);line-height:1;margin:0 0 6px}
.credits-n span{font-size:1.5em}
.credits-sub{margin:0;color:var(--ink2);max-width:34em}
.credits-pill{border:var(--b);border-radius:999px;background:var(--sun);padding:6px 16px;font-family:var(--display);font-weight:600;box-shadow:var(--sh-sm)}
.buy-grid{display:grid;gap:12px;grid-template-columns:1fr;margin-top:12px}
@media (min-width:640px){.buy-grid{grid-template-columns:repeat(3,1fr)}}
.buy-card{display:grid;gap:2px;text-decoration:none;border:var(--b);border-radius:18px;padding:16px;background:var(--cream);transition:transform .15s}
.buy-card:hover{transform:translate(-2px,-2px)}
.buy-pop{background:var(--soft)}
.buy-name{font-family:var(--display);font-weight:600;font-size:1.15rem}
.buy-price{font-family:var(--display);font-weight:700;font-size:1.9rem;line-height:1.1}
.buy-label{color:var(--ink2);margin-bottom:10px}

/* project list */
.plist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pitem{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;text-decoration:none;margin:0;padding:16px 18px;transition:transform .15s,box-shadow .15s}
.pitem:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.pitem-main{display:grid;gap:2px;min-width:0}
.pitem-t{font-family:var(--display);font-weight:600;font-size:1.2rem;overflow-wrap:anywhere}
.pitem-meta{font-size:.88rem;color:var(--ink2)}
.pitem-side{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pitem-cta{font-weight:700;color:var(--grape);font-size:.92rem}
.empty{text-align:center}
.empty-ico{font-size:2.4rem;margin:0}

/* status */
.sbadge{display:inline-block;border:2px solid var(--ink);border-radius:999px;padding:3px 11px;font-weight:700;font-size:.82rem;white-space:nowrap;background:#E9E4FF}
.s-script{background:var(--sun)}
.s-script_changes{background:#FFD9CF}
.s-production{background:#CFF3FF}
.s-delivered{background:var(--mint)}
.s-revision{background:#FFC8E3}
.track{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.track::before{content:"";position:absolute;top:17px;left:12.5%;right:12.5%;height:3px;background:var(--ink);opacity:.18}
.track li{display:grid;justify-items:center;gap:6px;text-align:center;position:relative}
.track-dot{width:36px;height:36px;border-radius:50%;border:3px solid var(--ink);display:grid;place-items:center;font-family:var(--display);font-weight:700;background:#fff;position:relative;z-index:1}
.track .done .track-dot{background:var(--mint)}
.track .now .track-dot{background:var(--sun);box-shadow:0 0 0 5px rgba(255,210,63,.45)}
.track-l{font-size:.82rem;font-weight:700}
.track li:not(.done):not(.now){opacity:.55}
.status-hint{margin:6px 0 0;font-weight:600;text-align:center}
.script{background:var(--cream);border:2px solid var(--ink);border-radius:16px;padding:16px 18px;font-size:1.02rem;line-height:1.6;overflow-wrap:anywhere;max-height:none}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 12px}
.btn-mint{--bg:var(--mint);color:var(--ink)}
.btn-ink{--bg:var(--ink)}
.reveal-box{margin-top:12px}
.reveal-box > summary{list-style:none}
.reveal-box > summary::-webkit-details-marker{display:none}
.reveal-box[open] > summary{opacity:.6}
.videos{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-bottom:14px}
.video-item{margin:0;display:grid;gap:10px;justify-items:start}
.video-item video{width:100%;max-width:340px;aspect-ratio:9/16;background:#000;border:var(--b);border-radius:20px;object-fit:contain}
.video-item figcaption{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-size:.88rem;color:var(--ink2);width:100%;max-width:340px;justify-content:space-between}
.videos-admin video{max-width:220px}
.brief-details > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.brief-details > summary::-webkit-details-marker{display:none}
.brief-details > summary::after{content:"+";font-family:var(--display);font-size:1.6rem;font-weight:700;line-height:1}
.brief-details[open] > summary::after{content:"–"}
.brief-details > summary h2{margin:0}
.brief-details[open] > summary{margin-bottom:14px}
.kv{display:grid;grid-template-columns:minmax(90px,max-content) 1fr;gap:8px 16px;margin:0 0 6px}
.kv dt{font-weight:700}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere;color:var(--ink2)}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.timeline li{display:grid;gap:2px;border-left:3px solid var(--grape);padding-left:12px}
.tl-when{font-size:.8rem;color:var(--ink2)}
.tl-body{display:block;color:var(--ink2);margin-top:2px;overflow-wrap:anywhere}

/* admin */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:6px}
@media (min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{display:grid;gap:2px;margin-bottom:12px;padding:16px 18px}
.stat-n{font-family:var(--display);font-weight:700;font-size:2rem;line-height:1}
.stat-l{font-size:.9rem;font-weight:600;color:var(--ink2)}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 16px;border-bottom:var(--b)}
.tabs a{text-decoration:none;font-family:var(--display);font-weight:600;font-size:1.08rem;padding:10px 16px;border:var(--b);border-bottom:0;border-radius:14px 14px 0 0;background:#fff;margin-bottom:-3px;white-space:nowrap}
.tabs a[aria-current]{background:var(--sun)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.filters a{text-decoration:none;border:2px solid var(--ink);border-radius:999px;padding:5px 12px;font-size:.88rem;font-weight:700;background:#fff}
.filters a[aria-current]{background:var(--ink);color:#fff}
.tbl-wrap{overflow-x:auto;padding:6px}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem}
.tbl th{text-align:left;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2);padding:10px 12px;border-bottom:2px solid var(--ink)}
.tbl td{padding:12px;border-bottom:1px solid #E6E0F5;vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl a{font-weight:600}
.grid2{display:grid;gap:0 20px}
@media (min-width:980px){.grid2{grid-template-columns:1fr 1fr;align-items:start}}
.plain-list{margin:0;padding-left:18px;display:grid;gap:8px}
.row-inline{display:flex;gap:10px;align-items:center}
.row-inline select{flex:1}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:#c0162f;text-decoration:underline;cursor:pointer}
.danger{border-color:#c0162f}
.danger summary{cursor:pointer;color:#c0162f}
.add-box summary{cursor:pointer}
.is-admin .topbar{background:rgba(243,238,255,.95)}

.topbar-act .btn{white-space:nowrap}
.page-h .kicker{margin-bottom:10px}
.older{margin-top:4px}
.older summary{cursor:pointer;font-weight:700;font-size:.95rem}
.older ul{margin:10px 0 0;padding-left:18px;display:grid;gap:8px;font-size:.92rem}
@media (max-width:400px){.topbar-act{gap:10px}.topbar-act .btn-sm{padding:.5em .85em;font-size:.9rem}}
@media (max-width:700px){
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{padding:12px 4px;border-bottom:1px solid #E6E0F5}
  .tbl tr:last-child{border-bottom:0}
  .tbl td{padding:3px 6px;border:0}
  .tbl td[data-label]::before{content:attr(data-label) ": ";font-weight:600;color:var(--ink2);font-size:.85rem}
  .tbl-wrap{padding:4px 12px}
}