@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600;700;800&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap');

:root{
  --bg:#f8f7f4; --surface:#ffffff; --surface2:#f3f1ee; --border:#e5e1da;
  --ink:#1a1a1a; --ink-soft:#4a4a4a; --ink-muted:#8a8580;
  --mint:#d4f5e2; --peach:#fde8d5; --lavender:#e8e2f5; --rose:#f8e0e8;
  --mint-d:#1a7a4a; --peach-d:#b5591a; --lavender-d:#5b4a9e; --rose-d:#a13e5c;
  --radius:12px; --radius-sm:8px; --radius-lg:16px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.03);
  --shadow:0 2px 8px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.03);
  --shadow-lg:0 8px 24px rgba(0,0,0,.07),0 2px 8px rgba(0,0,0,.04);
  --transition:180ms ease;
}
*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
body{font-family:'Manrope','Instrument Sans',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);margin:0;font-size:14px;line-height:1.6;letter-spacing:-.01em;}
h1,h2,h3,.brand{font-family:'Syne',sans-serif;line-height:1.2;letter-spacing:-.02em;font-weight:700;}
h1{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.15;}
h2{font-size:20px;font-weight:700;}
h3{font-size:16px;font-weight:700;}
a{color:inherit;text-decoration:none;transition:color var(--transition);}
.staff-id,.mono{font-family:'DM Mono',monospace;font-size:11px;color:var(--ink-muted);letter-spacing:.02em;}

.layout{display:flex;min-height:100vh;}
.sidebar{width:230px;background:var(--surface);border-right:1px solid var(--border);padding:24px 0;flex-shrink:0;box-shadow:1px 0 4px rgba(0,0,0,.02);}
.sidebar .brand{padding:0 22px 22px;font-weight:800;font-size:19px;border-bottom:1px solid var(--border);margin-bottom:14px;letter-spacing:-.03em;line-height:1.2;}
.sidebar a{display:flex;align-items:center;padding:10px 22px;font-size:13px;color:var(--ink-soft);font-weight:500;transition:all var(--transition);border-left:3px solid transparent;}
.sidebar a:hover,.sidebar a.active{background:var(--surface2);color:var(--ink);font-weight:700;border-left-color:var(--ink);}
.sidebar .nav-sep{padding:16px 22px 6px;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-muted);font-weight:700;}
.sidebar .role-box{margin:18px 22px;padding:12px;background:var(--surface2);border-radius:var(--radius-sm);font-size:12px;line-height:1.5;}
.main{flex:1;padding:30px 36px;max-width:1200px;}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:20px;box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow var(--transition);}
.card:hover{box-shadow:var(--shadow);}
.card-header{padding:16px 20px;border-bottom:1px solid var(--border);font-weight:700;font-family:'Syne',sans-serif;font-size:14px;letter-spacing:-.01em;}
.card-body{padding:20px;}

table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;padding:10px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-muted);font-weight:700;border-bottom:2px solid var(--border);white-space:nowrap;}
td{padding:11px 10px;border-bottom:1px solid var(--border);color:var(--ink-soft);line-height:1.4;}
.table-wrap{overflow-x:auto;}
.sticky-head thead th{position:sticky;top:0;background:var(--surface);z-index:2;box-shadow:0 1px 0 var(--border);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:13px;font-weight:700;font-family:'Manrope',sans-serif;color:var(--ink);transition:all var(--transition);box-shadow:var(--shadow-sm);letter-spacing:-.01em;}
.btn:hover{box-shadow:var(--shadow);transform:translateY(-1px);}
.btn:active{transform:translateY(0);box-shadow:var(--shadow-sm);}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.15);}
.btn-primary:hover{background:#2a2a2a;box-shadow:0 4px 12px rgba(0,0,0,.2);transform:translateY(-1px);}
.btn-ghost{background:transparent;box-shadow:none;}
.btn-ghost:hover{background:var(--surface2);box-shadow:none;transform:none;}
.btn-sm{padding:7px 14px;font-size:12px;}
.btn-danger{color:#a12a2a;}
.act-btn{background:none;border:none;cursor:pointer;font-size:15px;padding:5px 7px;border-radius:6px;transition:background var(--transition);}
.act-btn:hover{background:var(--surface2);}

.fg{margin-bottom:16px;}
.fl{font-size:12px;font-weight:700;display:block;margin-bottom:6px;color:var(--ink);letter-spacing:-.01em;}
.fi,.fs{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;font-family:'Manrope',sans-serif;background:#fff;color:var(--ink);transition:border-color var(--transition),box-shadow var(--transition);line-height:1.5;}
.fi:focus,.fs:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,17,.08);}
.fi::placeholder{color:var(--ink-muted);}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* ===== ePortfolio link management (Formative Assessment page) ===== */
.pf-list{display:grid;gap:10px;}
.pf-item{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;transition:box-shadow var(--transition),transform var(--transition);}
.pf-item:hover{box-shadow:var(--shadow);transform:translateY(-1px);}
.pf-info{min-width:0;flex:1 1 200px;}
.pf-label{font-weight:700;font-size:13px;letter-spacing:-.01em;}
.pf-url{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:0;color:var(--lavender-d);text-decoration:underline;text-underline-offset:3px;word-break:break-all;display:inline-block;margin-top:2px;}
.pf-url:hover{color:var(--ink);}
.pf-actions{display:flex;gap:6px;align-items:center;flex-shrink:0;}

.badge{display:inline-block;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.01em;}
.badge-ee{background:var(--mint);color:var(--mint-d);}
.badge-me{background:var(--lavender);color:var(--lavender-d);}
.badge-ae{background:var(--peach);color:var(--peach-d);}
.badge-be{background:var(--rose);color:var(--rose-d);}
.lvl-ee{background:var(--mint);color:var(--mint-d);}
.lvl-me{background:var(--lavender);color:var(--lavender-d);}
.lvl-ae{background:var(--peach);color:var(--peach-d);}
.lvl-be{background:var(--rose);color:var(--rose-d);}
.badge-pending{background:var(--peach);color:var(--peach-d);}
.badge-inactive{background:var(--surface2);color:var(--ink-muted);}

.ls-list{margin-top:6px;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;max-height:240px;overflow-y:auto;background:#fff;box-shadow:var(--shadow);}
.ls-row{padding:10px 14px;font-size:13px;border-bottom:1px solid var(--border);cursor:pointer;display:flex;align-items:center;gap:8px;flex-wrap:wrap;transition:background var(--transition);}
.ls-row:last-child{border-bottom:none;}
.ls-row:hover{background:var(--surface2);}
.ls-cls{font-size:11px;color:var(--ink-muted);margin-left:auto;}
.ls-picked{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--mint);border-radius:var(--radius-sm);background:var(--mint);color:var(--mint-d);font-size:13px;font-weight:700;}
.ls-picked .act-btn{color:var(--mint-d);}

.flash{padding:14px 18px;border-radius:var(--radius-sm);margin-bottom:18px;font-size:13px;font-weight:500;line-height:1.5;}
.flash-success{background:var(--mint);color:var(--mint-d);border:1px solid rgba(26,122,74,.15);}
.flash-error{background:var(--rose);color:var(--rose-d);border:1px solid rgba(161,62,92,.15);}
.flash-info{background:var(--lavender);color:var(--lavender-d);border:1px solid rgba(91,74,158,.15);}

.empty-state{text-align:center;padding:48px 24px;color:var(--ink-muted);}
.empty-state .icon{font-size:36px;margin-bottom:10px;opacity:.6;}
.empty-state p{font-size:14px;line-height:1.6;}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px;width:380px;box-shadow:var(--shadow-lg);}
.login-card h2{font-size:20px;margin:0 0 8px;font-weight:800;}
.login-sub{color:var(--ink-muted);font-size:14px;margin:0 0 20px;line-height:1.5;}
.login-hint{font-size:12px;color:var(--ink-muted);margin-top:16px;text-align:center;}

.portal-school{border-top:5px solid var(--mint-d);}
.portal-admin{border-top:5px solid var(--lavender-d);}
.portal-tag{display:inline-block;padding:5px 14px;border-radius:99px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;margin-bottom:16px;}
.tag-school{background:var(--mint);color:var(--mint-d);}
.tag-admin{background:var(--lavender);color:var(--lavender-d);}
.btn-admin{background:var(--lavender-d);color:#fff;border-color:var(--lavender-d);}
.btn-admin:hover{filter:brightness(1.1);}

.login-secret{margin-top:20px;padding-top:16px;border-top:1px dashed var(--border);text-align:center;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.3px;opacity:.5;transition:opacity .15s ease;}
.login-secret:hover{opacity:1;}
.login-secret a{color:var(--lavender-d);}
.login-secret a:hover{text-decoration:underline;}

.login-details summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--ink-muted);letter-spacing:.3px;}
.login-details summary:hover{color:var(--ink);}
.login-details[open] summary{color:var(--ink);margin-bottom:6px;}
.creds-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;max-width:640px;}
.creds-val{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-size:13px;}

.ps-header{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid var(--ink);}
.ps-co{font-size:26px;font-weight:800;font-family:'Syne',sans-serif;letter-spacing:-.03em;line-height:1.15;}
.ps-table td{padding:8px 6px;font-size:13px;}
.ps-net{background:var(--ink);color:#fff;padding:14px 18px;border-radius:var(--radius-sm);display:flex;justify-content:space-between;align-items:center;}

@media screen{ .print-only{display:none !important;} }
@media print{
  .sidebar,.no-print{display:none !important;}
  .main{padding:0;max-width:none;}
  body{font-size:12px;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .card{box-shadow:none;border:1px solid #ddd;}
  .btn{box-shadow:none;}
  table{font-size:11px;}
  th{font-size:10px;}
  td{padding:6px 8px;}
}

/* =====================================================================
   Access / login pages — split-panel design (PRIDELION login UI)
   Scoped under .access-page so it never affects the app's own styles.
   ===================================================================== */
.access-page{
  --access-bg:42 37% 96%;
  --access-ink:218 38% 18%;
  --access-border:39 22% 85%;
  --access-input:39 24% 79%;
  --access-card:42 35% 98%;
  --access-primary:218 47% 22%;
  --access-primary-fg:42 37% 96%;
  --access-muted:39 23% 91%;
  --access-muted-fg:218 16% 48%;
  --access-accent:173 55% 34%;
  --access-accent-ink:173 55% 27%;
  --access-destructive:3 57% 43%;
  --access-gold:33 72% 57%;
  --access-gold-soft:33 72% 64%;
  --font-sans-access:'Manrope',sans-serif;
  --font-serif-access:'Newsreader',Georgia,serif;
  --font-mono-access:'DM Mono',monospace;
  position:relative;
  min-height:100dvh;
  overflow:hidden;
  background:
    radial-gradient(circle at 7% 92%, hsl(173 55% 34% / .10), transparent 25rem),
    hsl(var(--access-bg));
  color:hsl(var(--access-ink));
  font-family:var(--font-sans-access);
  -webkit-font-smoothing:antialiased;
}
.access-page::before{
  position:fixed;inset:0;z-index:0;pointer-events:none;content:'';
  opacity:.32;
  background-image:
    linear-gradient(hsl(218 47% 22% / .035) 1px, transparent 1px),
    linear-gradient(90deg, hsl(218 47% 22% / .035) 1px, transparent 1px);
  background-size:32px 32px;
}
.access-shell{
  position:relative;z-index:1;
  display:grid;width:min(1360px,100%);min-height:100dvh;
  margin:0 auto;padding:20px;gap:20px;
}
.brand-mark{
  display:block;width:42px;height:42px;
  border-radius:12px 12px 12px 4px;
  overflow:hidden;
  box-shadow:0 0 0 1px hsl(173 55% 34% / .45);
}
.brand-mark img{display:block;width:100%;height:100%;object-fit:cover;}
.brand-name{font-size:13px;font-weight:800;letter-spacing:.03em;line-height:1.25;}
.brand-sub{font-family:var(--font-mono-access);font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:hsl(42 37% 96% / .55);}
.institution-panel{
  position:relative;min-height:470px;overflow:hidden;
  border-radius:22px;padding:clamp(24px,4vw,54px);
  color:hsl(42 37% 96%);
  background:hsl(var(--access-primary));
  box-shadow:0 24px 60px hsl(218 32% 16% / .11);
}
.institution-panel::after{
  position:absolute;right:-15%;bottom:-34%;width:74%;aspect-ratio:1;
  border:1px solid hsl(42 37% 96% / .12);border-radius:50%;content:'';
  box-shadow:0 0 0 44px hsl(42 37% 96% / .025), 0 0 0 88px hsl(42 37% 96% / .025);
}
.institution-content{position:relative;z-index:2;}
.flex-row{display:flex;align-items:center;gap:12px;}
.institution-kicker{
  display:flex;align-items:center;gap:9px;
  color:hsl(42 37% 96% / .62);font-family:var(--font-mono-access);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
}
.institution-kicker::before{width:28px;height:1px;background:hsl(var(--access-gold));content:'';}
.institution-title{
  max-width:680px;margin-top:32px;
  font-family:var(--font-serif-access);
  font-size:clamp(2.5rem,5vw,4.6rem);font-weight:500;line-height:.93;letter-spacing:-.045em;
}
.institution-title em{color:hsl(var(--access-gold-soft));font-style:normal;}
.institution-copy{
  max-width:450px;margin-top:25px;
  color:hsl(42 37% 96% / .7);font-size:14px;line-height:1.7;
}
.seal-grid{
  position:absolute;right:8%;bottom:8%;z-index:1;
  display:grid;width:180px;grid-template-columns:repeat(4,1fr);gap:8px;
  opacity:.65;transform:rotate(-8deg);
}
.seal-grid span{display:block;height:44px;border:1px solid hsl(42 37% 96% / .18);background:hsl(42 37% 96% / .04);}
.seal-grid span:nth-child(2n){transform:translateY(16px);}
.seal-grid span:nth-child(3n){background:hsl(33 72% 57% / .13);}
.panel-footer{
  position:absolute;right:clamp(24px,4vw,54px);bottom:clamp(22px,4vw,42px);left:clamp(24px,4vw,54px);
  z-index:2;display:flex;justify-content:space-between;gap:16px;
  border-top:1px solid hsl(42 37% 96% / .16);padding-top:15px;
  color:hsl(42 37% 96% / .52);font-family:var(--font-mono-access);
  font-size:10px;letter-spacing:.05em;
}
.access-card{
  align-self:center;width:min(100%,500px);margin:0 auto;
  padding:clamp(22px,4vw,46px);
  animation:rise-in .6s ease both;
}
@keyframes rise-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.access-card-head{margin-bottom:28px;}
.eyebrow{color:hsl(var(--access-accent));font-family:var(--font-mono-access);font-size:10px;letter-spacing:.15em;text-transform:uppercase;}
.access-title{
  margin-top:12px;color:hsl(var(--access-ink));
  font-family:var(--font-serif-access);
  font-size:clamp(2.45rem,5vw,3.8rem);font-weight:500;
  letter-spacing:-.05em;line-height:.97;
}
.access-subtitle{max-width:390px;margin-top:14px;color:hsl(var(--access-muted-fg));font-size:13px;line-height:1.65;}
.access-form{display:grid;gap:18px;}
.field{display:grid;gap:8px;}
.field-label{color:hsl(var(--access-ink));font-size:12px;font-weight:700;letter-spacing:.01em;}
.field-control{
  display:flex;min-height:50px;align-items:center;
  border:1px solid hsl(var(--access-input));border-radius:10px;
  background:hsl(var(--access-card));
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.field-control:focus-within{
  border-color:hsl(var(--access-accent));
  box-shadow:0 0 0 4px hsl(var(--access-accent) / .12);
  transform:translateY(-1px);
}
.field-icon{margin-left:15px;flex:0 0 auto;color:hsl(var(--access-muted-fg));}
.field-icon svg{display:block;}
.field-input{
  width:100%;min-width:0;border:0;outline:0;padding:13px 14px;
  color:hsl(var(--access-ink));background:transparent;font-size:13px;font-family:inherit;
}
.field-input::placeholder{color:hsl(var(--access-muted-fg) / .66);}
.password-toggle{
  display:grid;width:40px;height:40px;flex:0 0 40px;margin-right:5px;place-items:center;
  border:0;border-radius:7px;color:hsl(var(--access-muted-fg));background:transparent;cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.password-toggle:hover{color:hsl(var(--access-accent));background:hsl(var(--access-accent) / .08);}
.password-toggle svg{display:block;}
.form-meta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:hsl(var(--access-muted-fg));font-size:11px;
}
.form-meta-hint{line-height:1.45;}
.text-link{border:0;padding:0;color:hsl(var(--access-accent));background:transparent;font-size:inherit;font-weight:700;cursor:pointer;}
.text-link:hover{text-decoration:underline;text-underline-offset:3px;}
.submit-button{
  display:inline-flex;min-height:52px;align-items:center;justify-content:center;gap:10px;
  border:1px solid hsl(var(--access-primary));border-radius:10px;
  color:hsl(var(--access-primary-fg));background:hsl(var(--access-primary));
  box-shadow:0 8px 18px hsl(218 47% 22% / .14);
  font-size:13px;font-weight:800;cursor:pointer;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.submit-button svg{display:block;}
.submit-button:hover:not(:disabled){background:hsl(173 55% 34%);box-shadow:0 12px 24px hsl(var(--access-accent) / .2);transform:translateY(-2px);}
.submit-button:active:not(:disabled){transform:translateY(0);}
.submit-button:disabled{cursor:wait;opacity:.65;}
.form-message{
  display:flex;align-items:flex-start;gap:9px;
  border:1px solid;border-radius:9px;padding:11px 12px;
  font-size:11px;line-height:1.5;animation:rise-in .3s ease both;margin-bottom:16px;
}
.form-message svg{display:block;flex:0 0 auto;margin-top:1px;}
.form-message.error{border-color:hsl(var(--access-destructive) / .25);color:hsl(var(--access-destructive));background:hsl(var(--access-destructive) / .07);}
.form-message.success{border-color:hsl(var(--access-accent) / .3);color:hsl(var(--access-accent-ink));background:hsl(var(--access-accent) / .09);}
.subtle-divider{
  display:flex;align-items:center;gap:12px;margin:25px 0 18px;
  color:hsl(var(--access-muted-fg));font-family:var(--font-mono-access);
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;
}
.subtle-divider::before,.subtle-divider::after{height:1px;flex:1;background:hsl(var(--access-border));content:'';}
.quiet-link{
  display:inline-flex;align-items:center;gap:7px;border:0;padding:0;
  color:hsl(var(--access-muted-fg));background:transparent;font-size:11px;cursor:pointer;
  transition:color .2s ease, transform .2s ease;
}
.quiet-link svg{display:block;color:hsl(var(--access-accent));}
.quiet-link:hover{color:hsl(var(--access-accent));transform:translateX(2px);}
.security-note{
  display:flex;align-items:center;gap:8px;margin-top:28px;
  color:hsl(var(--access-muted-fg));font-size:10px;
}
.security-note svg{display:block;flex:0 0 auto;color:hsl(var(--access-accent));}
.access-secret{
  margin-top:20px;padding-top:16px;border-top:1px dashed hsl(var(--access-border));
  text-align:center;font-family:var(--font-mono-access);font-size:11px;letter-spacing:.3px;opacity:.5;
  transition:opacity .15s ease;
}
.access-secret:hover{opacity:1;}
.access-secret a{color:hsl(var(--access-accent));}
.access-secret a:hover{text-decoration:underline;}
.field-textarea{min-height:104px;resize:vertical;padding-top:12px;font-family:inherit;line-height:1.6;}

@media (min-width:860px){
  .access-shell{
    grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
    align-items:stretch;padding:28px;gap:clamp(28px,5vw,82px);
  }
  .institution-panel{min-height:calc(100dvh - 56px);}
}
@media (max-width:859px){
  .access-shell{grid-template-rows:auto 1fr;}
  .institution-panel{min-height:300px;}
  .access-card{padding-top:20px;padding-bottom:24px;}
}
@media (max-width:520px){
  .access-shell{padding:10px;gap:10px;}
  .institution-panel{min-height:360px;border-radius:16px;}
  .institution-title{margin-top:24px;font-size:clamp(2.4rem,12vw,3.5rem);}
  .institution-copy{font-size:12px;}
  .seal-grid{right:0;bottom:15%;width:145px;}
  .panel-footer{font-size:8px;}
  .access-card{padding:24px 12px 30px;}
  .access-title{font-size:2.75rem;}
}

/* =====================================================================
   Install-app UI (PWA) — sidebar button + guide modal
   ===================================================================== */
.install-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:calc(100% - 32px);margin:14px 16px 6px;padding:10px 14px;
  border:1px dashed #b0a89e;border-radius:var(--radius-sm);
  color:var(--ink-soft);background:var(--surface);font-size:12px;font-weight:700;cursor:pointer;
  transition:all var(--transition);
}
.install-btn svg{display:block;color:var(--mint-d);}
.install-btn:hover{border-color:var(--mint-d);background:var(--mint);color:var(--ink);}
.install-trigger{
  display:inline-flex;align-items:center;gap:7px;border:0;padding:0;margin-top:16px;
  color:var(--ink);background:transparent;font-size:12px;font-weight:800;cursor:pointer;
  transition:color var(--transition), transform var(--transition);
}
.install-trigger svg{display:block;color:var(--lavender-d);}
.install-trigger:hover{color:var(--lavender-d);transform:translateY(-1px);}

.pwa-guide{position:fixed;inset:0;z-index:999;display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.35);backdrop-filter:blur(4px);animation:fade-in .2s ease both;}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.pwa-guide-card{position:relative;width:min(100%,400px);padding:34px 30px 28px;border-radius:var(--radius-lg);
  background:#fff;color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.2);text-align:center;
  animation:rise-in .35s ease both;}
.pwa-guide-close{position:absolute;top:14px;right:16px;border:0;background:transparent;color:var(--ink-muted);
  font-size:15px;cursor:pointer;transition:color var(--transition);}
.pwa-guide-close:hover{color:var(--ink);}
.pwa-guide-icon{display:grid;width:56px;height:56px;margin:0 auto 16px;place-items:center;border-radius:14px;
  color:#fff;background:linear-gradient(135deg,#4a3f8f,#1f7a53);box-shadow:0 4px 12px rgba(31,122,83,.25);}
.pwa-guide-card h4{margin:0 0 12px;font-family:'Syne',sans-serif;font-size:18px;font-weight:800;}
.pwa-guide-card p{margin:0 0 14px;font-size:13px;line-height:1.7;color:var(--ink-soft);}
.pwa-guide-note{margin-top:10px;font-size:11px;color:var(--ink-muted);}
.pwa-guide-ok{display:inline-flex;min-height:48px;align-items:center;justify-content:center;margin-top:8px;
  padding:0 28px;border:0;border-radius:var(--radius-sm);color:#fff;background:linear-gradient(135deg,#4a3f8f,#1f7a53);
  font-size:13px;font-weight:800;cursor:pointer;transition:transform var(--transition), box-shadow var(--transition);
  box-shadow:0 4px 12px rgba(31,122,83,.25);}
.pwa-guide-ok:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(31,122,83,.3);}