/* PRIMA Портал — единые токены, каркас и компоненты. v3 (20.09.2026)
   Подключается во всех страницах prima-portal; разделы в iframe получают
   те же токены через свои файлы. Не менять логику страниц — только вид. */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&family=Fredoka:wght@600&display=swap');

:root{
  /* бренд Prima */
  --violet:#8B70BA; --pink:#F9BDDF; --mint:#D1EDED; --cream:#FFF1BA; --graphite:#282728;
  /* бренд Кружок */
  --lime:#E0F670; --sky:#C1F0FF;
  /* текст на пастели */
  --violet-t:#6A4FA3; --mint-t:#1F7F80; --pink-t:#B8407A; --cream-t:#8A6400;
  --violet-s:#F1ECF8; --pink-s:#FDEFF7; --mint-s:#EAF7F7; --lime-s:#F5FBD4; --cream-s:#FFF8DF; --sky-s:#EEFAFF;
  --bg:#F6F5FA; --surface:#FFFFFF; --surface2:#F2F0F7; --line:#E9E6F0; --line2:#DCD8E7;
  --ink:#282728; --txt:#35334A; --txt2:#6C6980; --mut:#9B98AE; --onaccent:#FFFFFF;
  --good:#1F7F80; --bad:#B8407A; --warn:#8A6400;
  --shadow:0 1px 2px rgba(40,39,40,.04),0 10px 30px rgba(139,112,186,.10);
  --shadow-h:0 2px 4px rgba(40,39,40,.05),0 18px 40px rgba(139,112,186,.18);
  --r:18px; --r-sm:12px; --r-pill:999px;
  --ff:'Onest',-apple-system,'Segoe UI',Roboto,sans-serif;
  --fl:'Fredoka','Onest',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --side-w:240px; --side-w-c:72px; --top-h:60px; --bottom-h:62px;

  /* совместимость со старыми переменными страниц (HR, музыка, вход) */
  --blue:#6A4FA3; --lilac:#8B70BA; --tiffany:#D1EDED; --blue-d:#5B4392; --lilac-d:#6A4FA3; --pink-d:#B8407A; --tiffany-d:#1F7F80;
  --blue-soft:#F1ECF8; --lilac-soft:#F1ECF8; --lilac-100:#EBE3F6; --pink-soft:#FDEFF7; --pink-50:#FDEFF7; --tiffany-soft:#EAF7F7; --pink-600:#B8407A; --pink-700:#B8407A; --plum:#6A4FA3;
  --surface-2:#F2F0F7; --surface-3:#EBE8F2; --border:#E9E6F0; --border-strong:#DCD8E7; --line-2:#E9E6F0;
  --charcoal:#282728; --txt-2:#6C6980; --txt-3:#6C6980; --accent:#8B70BA; --accent-soft:#F1ECF8; --accent-softer:#F6F3FB;
  --purple:#8B70BA; --purple-d:#6A4FA3; --purple-l:#F1ECF8; --lilac-50:#F1ECF8; --good-50:#EAF7F7;
  --r-xs:8px; --r-lg:20px; --r-xl:24px; --sh-1:0 1px 2px rgba(40,39,40,.04),0 6px 18px rgba(139,112,186,.08); --sh-2:var(--shadow); --sh-3:var(--shadow-h); --sh-pink:0 6px 18px rgba(249,189,223,.5);
  --ff-display:var(--ff); --e:var(--ease); --e-out:var(--ease);
  color-scheme:light;
}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--ff)!important;-webkit-font-smoothing:antialiased}
body.ps-body{background:var(--bg);color:var(--txt)}
.ps-app{background:var(--bg)}
:focus-visible{outline:2.5px solid var(--violet);outline-offset:2px;border-radius:6px}
::selection{background:rgba(224,246,112,.6)}

/* ===== каркас ===== */
.ps-app{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh;min-height:100dvh;transition:grid-template-columns .3s var(--ease)}
.ps-app.ps-collapsed{grid-template-columns:var(--side-w-c) 1fr}
.ps-side{position:sticky;top:0;height:100vh;height:100dvh;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 12px;gap:4px;overflow:hidden;z-index:30}
.ps-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;padding:4px 6px 14px;min-width:0}
.ps-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(160deg,#A48FD0,var(--violet) 55%,#7A5FAE);display:grid;place-items:center;flex:0 0 auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 10px rgba(139,112,186,.35)}
.ps-mark svg{width:26px;height:26px}
.ps-word{font-family:var(--fl);font-weight:600;font-size:22px;color:var(--violet);letter-spacing:.01em;line-height:1;position:relative;white-space:nowrap}
.ps-word i{position:absolute;top:-6px;right:-9px;width:9px;height:9px;border-radius:50%;background:var(--mint)}
.ps-word em{font-style:normal;color:var(--pink);font-size:12px;position:absolute;left:-2px;top:-4px}
.ps-brand small{display:block;font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt2);margin-top:3px;white-space:nowrap}
.ps-collapsed .ps-brand>span:last-child{display:none}
.ps-nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;flex:0 1 auto;min-height:0;position:relative;z-index:1;background:var(--surface);padding-bottom:8px}
.ps-nav::-webkit-scrollbar{display:none}
.ps-nav a{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;color:var(--txt);text-decoration:none;font-weight:500;font-size:14px;white-space:nowrap;position:relative;transition:background .2s;min-height:44px}
.ps-nav a:hover{background:var(--surface2)}
.ps-nav a.on{background:var(--violet-s);color:var(--violet-t)}
.ps-nav a.on:before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--lime)}
.ps-nav a .ps-soon{margin-left:auto;font-size:10.5px;font-weight:500;color:var(--txt2);background:var(--surface2);padding:2px 7px;border-radius:var(--r-pill)}
.ps-nav a.ps-dis{opacity:.55;pointer-events:none}
.ps-sub{display:grid;gap:2px;padding:2px 0 6px 20px;border-left:1px solid var(--line);margin:0 0 4px 26px}
.ps-sub a{padding:6px 10px;font-size:13px;font-weight:400;color:var(--txt2);min-height:36px}
.ps-sub a.on{background:transparent;color:var(--ink);font-weight:500}
.ps-sub a.on:before{left:-21px;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--violet)}
.ps-collapsed .ps-nav a>span,.ps-collapsed .ps-sub,.ps-collapsed .ps-nav a .ps-soon{display:none}
.ps-collapsed .ps-nav a{justify-content:center;padding:6px}
.ps-collapsed .ps-nav a.on:before{display:none}
.ps-side-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);display:grid;gap:6px;position:relative}
.ps-user{display:flex;align-items:center;gap:10px;padding:6px;border-radius:12px;min-width:0}
.ps-user div{line-height:1.25;min-width:0}
.ps-user b{display:block;font-size:13px;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-user small{display:block;font-size:12px;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-collapsed .ps-user div,.ps-collapsed .ps-foot-actions{display:none}
.ps-collapsed .ps-user{justify-content:center}
.ps-foot-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ps-pattern{position:absolute;left:0;right:0;bottom:100%;height:110px;pointer-events:none;opacity:.55;background-image:radial-gradient(circle at 20% 30%, var(--pink) 0 3px, transparent 4px),radial-gradient(circle at 70% 60%, var(--mint) 0 3px, transparent 4px),radial-gradient(circle at 45% 85%, var(--cream) 0 3px, transparent 4px),radial-gradient(circle at 85% 20%, var(--lime) 0 2.5px, transparent 3.5px);background-size:120px 90px}
.ps-collapse{width:32px;height:32px;border-radius:9px;border:1px solid var(--line2);background:var(--surface);color:var(--txt2);display:grid;place-items:center;cursor:pointer;padding:0}
.ps-collapse svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.ps-collapsed .ps-collapse svg{transform:rotate(180deg)}
.ps-collapsed .ps-collapse{margin:0 auto}

.ps-main{display:flex;flex-direction:column;min-width:0;min-height:100vh;min-height:100dvh}
.ps-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 22px;min-height:var(--top-h);background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);flex-wrap:wrap}
.ps-top h1{font-family:var(--ff);font-size:21px;font-weight:700;color:var(--ink);margin:0 auto 0 0;min-width:0;letter-spacing:-.02em;line-height:1.15}
.ps-top h1 small{display:block;font-size:12.5px;font-weight:400;color:var(--txt2);margin-top:2px;letter-spacing:0}
.ps-ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-left:auto}
.ps-burger{display:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--line2);background:var(--surface);place-items:center;cursor:pointer;padding:0;color:var(--ink)}
.ps-burger svg{width:20px;height:20px}
.ps-burger svg,.ps-collapse svg,.ps-bottom a svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ps-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.ps-content.ps-fill{position:relative}
.ps-content.ps-fill>iframe{flex:1 1 auto;width:100%;border:0;min-height:calc(100vh - var(--top-h));min-height:calc(100dvh - var(--top-h))}
.ps-page{padding:20px 22px 32px;display:grid;gap:14px;align-content:start;max-width:1440px;width:100%}
.ps-subrow{display:none}

/* мобильные */
.ps-drawer{position:fixed;inset:0;z-index:60;display:none}
.ps-drawer.open{display:block}
.ps-drawer .ps-scrim{position:absolute;inset:0;background:rgba(40,39,40,.4);animation:ps-fade .2s var(--ease)}
.ps-drawer .ps-side{position:absolute;left:0;top:0;bottom:0;width:min(300px,84vw);height:auto;border-right:0;border-radius:0 24px 24px 0;box-shadow:var(--shadow-h);animation:ps-slide .28s var(--ease);padding-top:calc(14px + env(safe-area-inset-top,0px))}
@keyframes ps-fade{from{opacity:0}}
@keyframes ps-slide{from{transform:translateX(-30px);opacity:0}}
.ps-bottom{display:none}
@media (max-width:980px){
  .ps-app,.ps-app.ps-collapsed{grid-template-columns:1fr}
  .ps-app>.ps-side{display:none}
  .ps-burger{display:grid}
  .ps-top{padding:10px 14px}
  .ps-top h1{font-size:19px}
  .ps-subrow{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;background:var(--surface);border-bottom:1px solid var(--line);padding:0 8px}
  .ps-subrow::-webkit-scrollbar{display:none}
  .ps-subrow a{padding:11px 10px 9px;font-size:13.5px;font-weight:500;color:var(--txt2);border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none;min-height:42px}
  .ps-subrow a.on{color:var(--ink);border-color:var(--violet)}
  .ps-page{padding:14px 14px calc(var(--bottom-h) + 20px)}
  .ps-content.ps-fill>iframe{min-height:calc(100vh - var(--top-h) - var(--bottom-h));min-height:calc(100dvh - var(--top-h) - var(--bottom-h))}
  .ps-bottom{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;justify-content:space-around;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 6px calc(8px + env(safe-area-inset-bottom,0px));min-height:var(--bottom-h)}
  .ps-bottom a{display:grid;justify-items:center;gap:2px;font-size:10.5px;color:var(--txt2);text-decoration:none;font-weight:500;min-width:56px;padding:2px 4px}
  .ps-bottom a svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;padding:3px;border-radius:9px;box-sizing:border-box}
  .ps-bottom a.on{color:var(--violet-t)}
  .ps-bottom a.on svg{background:var(--violet-s)}
  .ps-main{padding-bottom:0}
}

/* ===== иконки-плитки ===== */
.ps-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:var(--graphite);flex:0 0 auto;position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(0,0,0,.05),0 4px 10px rgba(40,39,40,.06)}
.ps-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ps-ico.v{background:linear-gradient(160deg,#F3EEFA,#DCD0F0);color:var(--violet-t)}
.ps-ico.p{background:linear-gradient(160deg,#FDE3F1,var(--pink));color:#9E2F68}
.ps-ico.m{background:linear-gradient(160deg,#EAF8F8,var(--mint));color:#1F7F80}
.ps-ico.c{background:linear-gradient(160deg,#FFF9E0,var(--cream));color:#8A6400}
.ps-ico.l{background:linear-gradient(160deg,#F2FBC9,var(--lime));color:#5C6E00}
.ps-ico.s{background:linear-gradient(160deg,#EAF9FF,var(--sky));color:#1D6F8A}
.ps-ico.sm{width:34px;height:34px;border-radius:10px}.ps-ico.sm svg{width:18px;height:18px}
.ps-nav a .ps-ico{width:32px;height:32px;border-radius:10px;box-shadow:none}
.ps-nav a .ps-ico svg{width:17px;height:17px}
.ps-ava{width:32px;height:32px;border-radius:50%;background:linear-gradient(160deg,#FDE3F1,var(--pink));color:var(--graphite);display:grid;place-items:center;font-weight:600;font-size:13px;flex:0 0 auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}

/* ===== компоненты ===== */
.pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-pill);font-weight:500;font-size:14px;border:1px solid transparent;cursor:pointer;font-family:var(--ff);white-space:nowrap;color:var(--ink);background:var(--surface);text-decoration:none;transition:transform .15s var(--ease),box-shadow .2s,filter .2s}
.pc-btn:hover{filter:brightness(1.03);box-shadow:0 6px 16px rgba(139,112,186,.22)}
.pc-btn:active{transform:scale(.97)}
.pc-btn.p{background:var(--violet);color:var(--onaccent)}
.pc-btn.lime{background:var(--lime);color:var(--graphite)}
.pc-btn.s{border-color:var(--line2)}
.pc-btn.g{background:transparent;color:var(--violet-t)}
.pc-btn.d{background:var(--pink-s);color:var(--pink-t)}
.pc-btn.sm{height:34px;padding:0 12px;font-size:13px}
.pc-btn.xs{height:30px;padding:0 10px;font-size:12.5px}
.pc-btn:disabled{opacity:.5;pointer-events:none}
.pc-icobtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line2);background:var(--surface);display:grid;place-items:center;color:var(--txt2);cursor:pointer;padding:0;position:relative}
.pc-icobtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pc-chip{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:3px 9px;border-radius:12px;font-size:12px;font-weight:500;color:var(--graphite);line-height:1.3;max-width:100%}
.pc-chip:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75;flex:0 0 auto}
.pc-chip.up{background:var(--mint)}.pc-chip.dn{background:var(--pink)}.pc-chip.n{background:var(--lime)}.pc-chip.w{background:var(--cream)}.pc-chip.m{background:var(--surface2);color:var(--txt2)}
.pc-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;min-width:0}
.pc-card h4{margin:0;font-size:15px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:10px}
.pc-card .sub{font-size:12.5px;color:var(--txt2);margin-top:2px}
.pc-lift{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.pc-lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-h)}
.pc-sel{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--surface);font-size:13.5px;font-weight:500;color:var(--ink);white-space:nowrap;font-family:var(--ff)}
.pc-fld{width:100%;font-family:var(--ff);font-size:14.5px;font-weight:400;color:var(--ink);padding:11px 14px;background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-sm);outline:none;transition:border-color .18s,box-shadow .18s;min-height:44px}
.pc-fld:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(139,112,186,.15)}
.pc-dark{background:linear-gradient(160deg,#6B52A6 0%,#4A3580 60%,#3B2A6B 100%);color:#fff;border:0;position:relative;overflow:hidden}
.pc-dark:before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08)}
.pc-dark:after{content:"";position:absolute;left:-40px;bottom:-80px;width:180px;height:180px;border-radius:50%;background:rgba(224,246,112,.12)}
.pc-dark h4,.pc-dark .sub{color:#fff;position:relative}
.pc-dark .sub{opacity:.75}
.pc-state{border:1px dashed var(--line2);border-radius:12px;padding:22px 18px;text-align:center;display:grid;gap:8px;justify-items:center;background:var(--surface)}
.pc-state svg.cat{width:64px;height:64px}
.pc-state b{color:var(--ink);font-size:15px;font-weight:600}
.pc-state p{font-size:13.5px;color:var(--txt2);max-width:36ch;margin:0}
.pc-skel{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--surface2),var(--line),var(--surface2));background-size:200% 100%;animation:pc-sh 1.4s infinite}
@keyframes pc-sh{to{background-position:-200% 0}}

/* появление блоков */
.pc-rv{animation:pc-up .55s var(--ease) both}
.pc-rv:nth-child(2){animation-delay:.06s}.pc-rv:nth-child(3){animation-delay:.12s}.pc-rv:nth-child(4){animation-delay:.18s}.pc-rv:nth-child(5){animation-delay:.24s}.pc-rv:nth-child(6){animation-delay:.30s}.pc-rv:nth-child(7){animation-delay:.36s}.pc-rv:nth-child(8){animation-delay:.42s}
@keyframes pc-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pc-rv,.pc-skel,.ps-drawer .ps-side,.ps-drawer .ps-scrim{animation:none!important}.pc-lift,.pc-btn,.ps-app,.ps-collapse svg{transition:none!important}}

/* главная */
.ph-hello{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;background:linear-gradient(160deg,#F5F1FB,#EBE3F6);border-radius:var(--r);padding:22px 24px;position:relative;overflow:hidden}
.ph-hello:after{content:"";position:absolute;right:-40px;bottom:-80px;width:240px;height:150px;border-radius:50%;background:var(--lime);opacity:.9}
.ph-hello>div{position:relative;z-index:1}
.ph-hello h2{font-size:clamp(22px,2.4vw,26px);font-weight:700;color:var(--ink);margin:0;position:relative;letter-spacing:-.02em;font-family:var(--ff)}
.ph-hello p{color:var(--txt2);font-size:14px;margin:6px 0 0;position:relative;max-width:60ch}
.ph-hello .cat{position:relative;z-index:1;width:96px;height:96px}
.ph-hello .ph-acts{position:relative;margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.ph-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.ph-tile{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-decoration:none;color:inherit;min-width:0}
.ph-tile b{display:block;font-size:15.5px;color:var(--ink);font-weight:600}
.ph-tile small{display:block;font-size:13px;color:var(--txt2);line-height:1.45;margin-top:3px}
.ph-tile .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ph-tile.soon{opacity:.62}
@media (max-width:640px){.ph-hello{grid-template-columns:1fr auto;padding:18px 16px}.ph-hello .cat{width:70px;height:70px}}

/* вход */
.pg-gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(150deg,#6B52A6 0%,#8B70BA 45%,#F9BDDF 100%)}
.pg-gate:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px 400px at 85% 10%,rgba(224,246,112,.35),transparent 60%),radial-gradient(500px 400px at 10% 90%,rgba(255,255,255,.14),transparent 55%)}
.pg-gate.hidden{display:none}
.pg-card{position:relative;z-index:2;width:100%;max-width:404px;padding:36px 32px 28px;text-align:center;background:var(--surface);border-radius:24px;box-shadow:0 26px 64px rgba(30,20,60,.35);animation:pc-up .55s var(--ease) both}
.pg-card .ps-mark{width:56px;height:56px;border-radius:16px;margin:0 auto 14px}
.pg-card .ps-mark svg{width:36px;height:36px}
.pg-logo{font-family:var(--fl);font-weight:600;font-size:30px;color:var(--violet);line-height:1}
.pg-logo span{font-family:var(--ff);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt2);display:block;margin-top:6px}
.pg-sub{font-size:13px;color:var(--txt2);margin:10px 0 24px}
.pg-card .fld,.pg-card .pc-fld{margin-bottom:10px}
.pg-card .pbtn,.pg-card .pc-btn.p{width:100%;height:46px;font-size:15px}
.pg-err{color:var(--bad);font-size:13px;margin-top:10px;min-height:18px;font-weight:500}
.pg-ok{color:var(--good);font-size:13.5px;margin-top:10px;font-weight:500}
.pg-link{display:inline-block;margin-top:16px;font-size:13px;font-weight:500;color:var(--violet-t);cursor:pointer;border-bottom:1px dashed rgba(106,79,163,.4)}