/* PSP Network app pages (static example mock). Colors & fonts match order-psp / track-psp. */
@font-face{font-family:'Figtree';font-weight:400 700;font-display:swap;src:url(psp-app-fonts/psp-app-figtree-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-weight:400 700;font-display:swap;src:url(psp-app-fonts/psp-app-figtree-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-weight:500 700;font-display:swap;src:url(psp-app-fonts/psp-app-fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-weight:500 700;font-display:swap;src:url(psp-app-fonts/psp-app-fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+FEFF,U+FFFD}
:root{--brand:#0b1f3a;--brand-dark:#071422;--brand-light:#e7eaf1;--accent:#d4a017;--accent-soft:#f7ecd0;--ink:#0f1f1a;--ink-soft:#24352e;--muted:#5c6b64;--line:#d5ddd8;--mist:#eef2f0;--paper:#f8faf9;--ok:#1a7f4b;--ok-soft:#e8f6ef;--danger:#b42318;--danger-soft:#fdecea;--warn:#8a5a00;
--sans:"Figtree",ui-sans-serif,system-ui,sans-serif;--display:"Fraunces","Times New Roman",serif}
*,*::before,*::after{box-sizing:border-box}[hidden]{display:none!important}
html,body{width:100%;max-width:none;margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);background:var(--mist);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--brand)}button,input,select,textarea{font:inherit;color:inherit}
.pa-banner{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent-soft);color:#6b4e00;border-bottom:1px solid #ecd9a3;padding:7px 16px;font-size:13px;font-weight:600;text-align:center}
.pa-header{background:var(--paper);border-bottom:1px solid var(--line)}
.pa-header-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px;padding:0 32px;width:100%}
.pa-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.pa-brand img{width:44px;height:44px;border-radius:8px}
.pa-brand-name{display:block;font-family:var(--display);font-weight:600;font-size:24px;color:var(--ink);line-height:1.15}
.pa-brand-sub{display:block;font-size:11px;color:var(--muted)}
.pa-nav{display:flex;gap:4px;flex-wrap:wrap}
.pa-nav a{padding:8px 12px;border-radius:8px;text-decoration:none;font-weight:600;font-size:14px;color:var(--ink-soft)}
.pa-nav a:hover{background:var(--brand-light)}.pa-nav a.on{background:var(--brand);color:#fff}
.pa-who{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.pa-who img{width:36px;height:36px;border-radius:50%;border:2px solid var(--line);background:#fff}
.pa-who b{display:block;color:var(--ink);font-size:14px}
.pa-crumb{background:var(--paper);border-bottom:1px solid var(--line);padding:10px 32px;font-size:13px;color:var(--muted)}
.pa-crumb a{text-decoration:none;font-weight:600}
.pa-main{flex:1;width:100%;padding:28px 32px 48px}
.pa-title{font-family:var(--display);font-weight:600;font-size:34px;margin:0 0 4px;letter-spacing:-.01em}
.pa-lede{margin:0 0 24px;color:var(--muted);font-size:16px}
.pa-titlebar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}.pa-titlebar .pa-lede{margin:0}
.g{display:grid;gap:20px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gside{grid-template-columns:minmax(0,1fr) 380px}.gside2{grid-template-columns:320px minmax(0,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.card-hd h2,.card-hd h3{margin:0;font-size:17px;font-weight:700}
.card-bd{padding:18px 20px}.card+.card{margin-top:20px}.g>.card+.card,.g>*+.card{margin-top:0}.stack>*+*{margin-top:20px}
.kpi{padding:18px 20px}.kpi .k{font-size:13px;color:var(--muted);font-weight:600}.kpi .v{font-family:var(--display);font-size:30px;font-weight:600;line-height:1.2}.kpi .s{font-size:12px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:10px;border:0;background:var(--brand);color:#fff;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--brand-dark)}.btn.ghost{background:#fff;color:var(--brand);border:1px solid var(--line)}.btn.ghost:hover{background:var(--paper)}
.btn.ok{background:var(--ok)}.btn.gold{background:var(--accent);color:#2b1f00}.btn.danger{background:#fff;color:var(--danger);border:1px solid #f1b8b2}
.btn.sm{height:34px;padding:0 12px;font-size:13px;border-radius:8px}.btn.block{width:100%}.btn[disabled]{opacity:.45;cursor:not-allowed}
.btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.f label,.lbl{font-size:13px;font-weight:700;color:var(--ink-soft)}
.in{width:100%;height:44px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:#fff}textarea.in{height:auto;min-height:110px;padding:10px 12px;resize:vertical}
.in:focus{outline:2px solid var(--brand);outline-offset:1px}.hint{font-size:12px;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--brand-light);color:var(--brand);white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.warn{background:var(--accent-soft);color:var(--warn)}.pill.bad{background:var(--danger-soft);color:var(--danger)}.pill.mute{background:var(--mist);color:var(--muted)}
.ex{display:inline-block;font-size:11px;font-weight:700;color:#6b4e00;background:var(--accent-soft);border-radius:6px;padding:1px 6px;vertical-align:middle}
table.t{width:100%;border-collapse:collapse;font-size:14px}.t th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:10px 20px;background:var(--paper);border-bottom:1px solid var(--line)}
.t td{padding:13px 20px;border-bottom:1px solid var(--line);vertical-align:middle}.t tr:last-child td{border-bottom:0}.t .r{text-align:right}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:0 20px;background:var(--paper);overflow-x:auto}
.tab{border:0;background:none;padding:14px 14px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.tab.on{color:var(--brand);border-bottom-color:var(--brand)}.tab .n{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:var(--mist);font-size:12px;margin-left:6px}
.row{display:flex;align-items:center;gap:14px}.row.sb{justify-content:space-between}.grow{flex:1;min-width:0}
.av{width:44px;height:44px;border-radius:50%;background:var(--brand-light);border:2px solid #fff;box-shadow:0 0 0 1px var(--line);flex:none}
.muted{color:var(--muted)}.small{font-size:13px}.b{font-weight:700}.mt0{margin-top:0}
.list>*{padding:16px 20px;border-bottom:1px solid var(--line)}.list>*:last-child{border-bottom:0}
.timer{font-variant-numeric:tabular-nums;font-weight:700}.timer.hot{color:var(--danger)}
.sw{position:relative;display:inline-block;width:46px;height:26px;flex:none}.sw input{opacity:0;width:0;height:0}
.sw span{position:absolute;inset:0;background:#c9d2cd;border-radius:999px;cursor:pointer;transition:.15s}.sw span::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 2px #0003}
.sw input:checked+span{background:var(--ok)}.sw input:checked+span::before{transform:translateX(20px)}.sw input:focus-visible+span{outline:2px solid var(--brand)}
.stars{display:inline-flex;gap:4px}.stars button{border:0;background:none;padding:0;font-size:30px;line-height:1;color:#cfd6d2;cursor:pointer}.stars button.on{color:var(--accent)}
.stars.sm button{font-size:18px;cursor:default}
.drop{border:2px dashed var(--line);border-radius:12px;padding:22px;text-align:center;background:var(--paper);display:block;cursor:pointer}.drop:hover{border-color:var(--brand)}.drop input{display:none}
.files{list-style:none;margin:10px 0 0;padding:0;font-size:14px}.files li{display:flex;justify-content:space-between;padding:8px 12px;background:var(--mist);border-radius:8px;margin-top:6px}
.tl{list-style:none;margin:0;padding:0}.tl li{position:relative;padding:0 0 18px 30px}.tl li::before{content:"";position:absolute;left:7px;top:20px;bottom:0;width:2px;background:var(--line)}.tl li:last-child::before{display:none}
.tl li::after{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--line)}.tl li.done::after{background:var(--ok);border-color:var(--ok)}.tl li.now::after{background:var(--brand);border-color:var(--brand)}
.chat{height:300px;overflow:auto;padding:16px 20px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.msg{max-width:72%;padding:10px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:14px}.msg.me{align-self:flex-end;background:var(--brand);color:#fff;border-color:var(--brand)}.msg small{display:block;opacity:.7;font-size:11px;margin-top:2px}
.note{padding:12px 16px;border-radius:10px;background:var(--brand-light);font-size:14px}.note.gold{background:var(--accent-soft);color:#4d3800}.note.ok{background:var(--ok-soft);color:#0f5132}.note.bad{background:var(--danger-soft);color:var(--danger)}
.prog{height:8px;border-radius:99px;background:var(--mist);overflow:hidden}.prog>i{display:block;height:100%;background:var(--ok)}
.stepper{display:flex;gap:8px;margin-bottom:22px}.stepper span{flex:1;height:6px;border-radius:99px;background:var(--line)}.stepper span.on{background:var(--brand)}
.tier{padding:24px}.tier.hl{border:2px solid var(--accent);box-shadow:0 8px 24px #d4a01722}.tier .price{font-family:var(--display);font-size:38px;font-weight:600}.tier ul{padding-left:18px;margin:14px 0 20px}.tier li{margin:5px 0}
.ph{aspect-ratio:4/3;border-radius:10px;display:flex;align-items:flex-end;padding:10px;color:#fff;font-weight:700;font-size:13px}
.ph.b{background:linear-gradient(135deg,#7a6a55,#4b3f33)}.ph.a{background:linear-gradient(135deg,#2f7a5b,#1b4d6b)}
.hub a.card{display:block;text-decoration:none;color:inherit;padding:16px 18px;transition:.15s}.hub a.card:hover{border-color:var(--brand);transform:translateY(-1px)}.hub a.card+a.card{margin-top:0}
.hub .num{font-size:12px;font-weight:700;color:var(--accent)}.hub h3{margin:2px 0 4px;font-size:16px}.hub p{margin:0;font-size:13px;color:var(--muted)}
.sec-h{font-family:var(--display);font-size:24px;margin:28px 0 14px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--brand);color:#fff;padding:12px 20px;border-radius:12px;font-weight:600;box-shadow:0 10px 30px #0004;transition:.2s;z-index:50;pointer-events:none;max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%)}.toast::before{content:"Example only · ";color:var(--accent)}
.pa-footer{background:var(--paper);border-top:1px solid var(--line);padding:20px 32px;display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--muted);width:100%}
.pa-footer a{color:var(--ink-soft);text-decoration:none;font-weight:600;margin-left:18px}
.chk{display:flex;gap:10px;align-items:flex-start;padding:10px 0}.chk input{width:18px;height:18px;margin-top:2px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}.seg button{border:0;background:none;padding:9px 16px;font-weight:700;cursor:pointer;color:var(--muted)}.seg button.on{background:var(--brand);color:#fff}
.tot{display:flex;justify-content:space-between;padding:8px 0;font-size:14px}.tot.big{font-size:20px;font-weight:700;border-top:1px solid var(--line);margin-top:6px;padding-top:14px}
svg.chart{width:100%;height:auto;display:block}
@media(max-width:1100px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.gside,.gside2{grid-template-columns:1fr}.pa-nav{display:none}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}.pa-main{padding:20px 16px}}
@media print{.pa-banner,.pa-header,.toast{display:none}}

/* ---- section 2: shared + admin ---- */
.pa-icons{display:flex;gap:2px;margin-left:auto}.pa-ic{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;color:var(--ink-soft)}.pa-ic:hover,.pa-ic.on{background:var(--brand-light);color:var(--brand)}
.pa-dot{position:absolute;top:3px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--danger);color:#fff;font-style:normal;font-size:10px;font-weight:700;line-height:16px;text-align:center}
.pa-header-in{gap:18px}
.pa-header.adm{background:var(--brand);border-bottom-color:var(--brand-dark)}.pa-header.adm .pa-brand-name,.pa-header.adm .pa-who b{color:#fff}.pa-header.adm .pa-brand-sub,.pa-header.adm .pa-who{color:#c8d0de}.pa-header.adm .pa-nav a{color:#dfe5ee}.pa-header.adm .pa-nav a:hover{background:#ffffff1f}.pa-header.adm .pa-nav a.on{background:var(--accent);color:#2b1f00}
.pa-adm{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--accent);color:#2b1f00;font-weight:700;font-size:12px}
.authwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.authside{background:var(--brand);color:#fff;border-radius:14px;padding:32px}.authside h2{font-family:var(--display);font-size:28px;margin:0 0 10px}.authside li{margin:8px 0;color:#dfe5ee}
.otp{display:flex;gap:10px}.otp input{width:52px;height:60px;text-align:center;font-size:24px;font-weight:700;border:1px solid var(--line);border-radius:10px;background:#fff}.otp input:focus{outline:2px solid var(--brand)}.otp.ok input{border-color:var(--ok);background:var(--ok-soft)}
.tour-scrim{position:absolute;z-index:40;border-radius:14px;box-shadow:0 0 0 9999px rgba(7,20,34,.62);transition:all .25s;pointer-events:none}
.tour-tip{position:absolute;z-index:41;width:340px;background:#fff;border-radius:14px;padding:18px 20px;box-shadow:0 14px 40px #0006;transition:all .25s}.tour-tip h3{margin:0 0 6px;font-size:18px}.tour-tip p{margin:0 0 14px;font-size:14px;color:var(--ink-soft)}
.tour-tip .row{justify-content:space-between}.tdots{display:flex;gap:6px}.tdots i{width:8px;height:8px;border-radius:50%;background:var(--line)}.tdots i.on{background:var(--brand)}
.tourhost{position:relative}
.nt{display:flex;gap:14px;align-items:flex-start;cursor:pointer}.nt:hover{background:var(--paper)}.nt .ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.nt.unread{background:#f4f7fc}.nt.unread .ttl::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brand);margin-left:8px;vertical-align:middle}
.ic.o{background:var(--ok-soft);color:var(--ok)}.ic.m{background:var(--brand-light);color:var(--brand)}.ic.s{background:var(--accent-soft);color:var(--warn)}
.inbox{display:grid;grid-template-columns:340px minmax(0,1fr);min-height:600px}.inbox-l{border-right:1px solid var(--line);display:flex;flex-direction:column}.inbox-l .list{overflow:auto;flex:1}
.cv{cursor:pointer;display:flex;gap:12px;align-items:flex-start}.cv:hover{background:var(--paper)}.cv.on{background:var(--brand-light)}.cv .sn{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cv .un{min-width:20px;height:20px;border-radius:99px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 6px}
.thread{display:flex;flex-direction:column}.thread .chat{flex:1;height:auto;min-height:420px}.composer{display:flex;gap:10px;align-items:center;padding:14px 20px;border-top:1px solid var(--line)}
.chip{display:inline-flex;gap:8px;align-items:center;padding:4px 10px;border-radius:8px;background:var(--mist);font-size:13px;margin:0 20px 10px}
.help-hero{background:var(--brand);color:#fff;border-radius:14px;padding:36px;text-align:center;margin-bottom:24px}.help-hero h1{font-family:var(--display);font-size:36px;margin:0 0 6px}.help-hero .in{max-width:640px;height:52px;font-size:16px;margin-top:14px;color:var(--ink)}
.hc{display:block;padding:20px;cursor:pointer;text-align:left;border:1px solid var(--line);background:#fff;border-radius:14px;width:100%}.hc:hover,.hc.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}.hc b{display:block;font-size:16px;margin:6px 0 2px}.hc span{font-size:13px;color:var(--muted)}.hc .e{font-size:24px}
details.faq{border-bottom:1px solid var(--line)}details.faq summary{cursor:pointer;padding:16px 20px;font-weight:700;list-style:none;display:flex;justify-content:space-between}details.faq summary::after{content:"+";font-size:20px;color:var(--muted)}details.faq[open] summary::after{content:"−"}details.faq p{margin:0;padding:0 20px 16px;color:var(--ink-soft)}
.bubble{position:fixed;right:28px;bottom:28px;width:60px;height:60px;border-radius:50%;background:var(--accent);color:#2b1f00;border:0;font-size:26px;cursor:pointer;box-shadow:0 10px 30px #0004;z-index:45}
.chatpop{position:fixed;right:28px;bottom:100px;width:360px;background:#fff;border-radius:14px;box-shadow:0 14px 40px #0005;z-index:45;overflow:hidden}.chatpop .chat{height:220px}
.legal h2{font-family:var(--display);font-size:22px;margin:24px 0 8px}.legal p,.legal li{color:var(--ink-soft);max-width:none}.draftbar{padding:14px 18px;border-radius:10px;background:var(--danger-soft);color:var(--danger);font-weight:700;border:1px solid #f1b8b2;margin-bottom:20px}
.e404{text-align:center;padding:60px 20px}.e404 .big{font-family:var(--display);font-size:140px;line-height:1;color:var(--brand);font-weight:700}.e404 .big span{color:var(--accent)}
.qrow{cursor:pointer}.qrow:hover td{background:var(--paper)}.qrow.on td{background:var(--brand-light)}
.dl{display:grid;grid-template-columns:150px 1fr;gap:8px 14px;font-size:14px;margin:0}.dl dt{color:var(--muted);font-weight:600}.dl dd{margin:0}