/* KEA member portal - styles (matches the Luxterra site: navy + gold on ivory) */
:root{
  --navy:#0c1d2e; --navy-2:#16304a; --gold:#a8842f; --gold-l:#c9a961; --gold-p:#efe4c8;
  --ivory:#faf7f0; --card:#fffdf8; --ink:#1a1d1f; --muted:#6b645c; --line:#e6dcc3;
  --ok:#2f6b3f; --ok-bg:#e4f1e6; --warn:#8a5a00; --warn-bg:#fbefd0; --bad:#8a2a2a; --bad-bg:#f7dede;
  --display:'Fraunces',Georgia,serif; --body:'Source Serif 4',Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font:16px/1.55 var(--body);min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3{font-family:var(--display);font-weight:500;color:var(--navy);line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(26px,4vw,36px)} h2{font-size:22px} h3{font-size:17px}
a{color:var(--gold)} a:hover{color:var(--navy)}
code{background:var(--gold-p);padding:2px 8px;border-radius:5px;font-size:1.05em;letter-spacing:.12em}

/* header */
.pt-top{background:var(--navy);color:#f5f1e8;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(14px,4vw,40px);flex-wrap:wrap}
.pt-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#f5f1e8;font-family:var(--display);font-size:17px}
.pt-brand small{display:block;font:11px var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-l)}
.pt-brand span{line-height:1.25}
.pt-nav{display:flex;flex-wrap:wrap;gap:4px 6px}
.pt-nav a{color:#e9e2d1;text-decoration:none;font-size:14px;padding:7px 12px;border-radius:999px;border:1px solid transparent}
.pt-nav a:hover{border-color:var(--gold-l);color:#fff}
.pt-nav a.on{background:rgba(201,169,97,.18);border-color:var(--gold-l);color:#fff}
.pt-nav a.pt-out{border-color:rgba(255,255,255,.25)}
.pt-badge{background:var(--gold-l);color:var(--navy);border-radius:999px;font-size:11px;padding:1px 7px;margin-left:4px}

.pt-main{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:28px clamp(14px,4vw,32px) 50px}
.pt-foot{background:var(--navy-3,#081420);color:#b9b2a2;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;padding:16px clamp(14px,4vw,40px)}

/* flash + notes */
.pt-flash{padding:12px 16px;border-radius:8px;margin-bottom:16px;border:1px solid}
.pt-flash.ok{background:var(--ok-bg);border-color:#b8d8bd;color:var(--ok)}
.pt-flash.err{background:var(--bad-bg);border-color:#e3b3b3;color:var(--bad)}
.pt-testbox{background:#fff7d6;border:1px dashed var(--gold);border-radius:8px;padding:10px 14px;margin:0 0 16px;font-size:15px}
.pt-note{background:var(--gold-p);border-left:3px solid var(--gold);padding:12px 16px;border-radius:0 8px 8px 0;margin:0 0 18px;font-size:15px}

/* cards + layout */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px clamp(16px,3vw,28px);margin-bottom:20px;box-shadow:0 1px 0 rgba(12,29,46,.03)}
.card > h2:first-child,.card > h3:first-child{margin-top:0}
.grid{display:grid;gap:18px}
.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))}
@media(max-width:860px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row.sb{justify-content:space-between}
.muted{color:var(--muted)} .small{font-size:14px} .right{text-align:right} .nowrap{white-space:nowrap}

/* auth pages */
.auth{max-width:480px;margin:18px auto 0}
.auth h1{text-align:center}
.auth .lead{text-align:center;color:var(--muted);margin:-4px 0 20px}
.links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:14px;font-size:15px}

/* forms */
label{display:block;font-size:14px;font-weight:600;color:var(--navy);margin:0 0 5px}
.fld{margin-bottom:15px}
.hint{display:block;font-size:13px;color:var(--muted);margin-top:4px;font-weight:400}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=date],input[type=search],input[type=file],select,textarea{
  width:100%;font:inherit;padding:11px 13px;border:1px solid #d3c7a8;border-radius:8px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold-l);outline-offset:1px;border-color:var(--gold)}
input.otp{font-size:24px;letter-spacing:.45em;text-align:center;font-family:var(--display)}
.btn{display:inline-block;font:600 15px var(--body);background:var(--navy);color:#fff;border:1px solid var(--navy);padding:11px 22px;border-radius:999px;cursor:pointer;text-decoration:none;line-height:1.2}
.btn:hover{background:var(--navy-2);color:#fff}
.btn.gold{background:var(--gold);border-color:var(--gold)} .btn.gold:hover{background:#8e6e22}
.btn.ghost{background:transparent;color:var(--navy)} .btn.ghost:hover{background:var(--gold-p);color:var(--navy)}
.btn.danger{background:#fff;color:var(--bad);border-color:#d9a7a7} .btn.danger:hover{background:var(--bad-bg);color:var(--bad)}
.btn.sm{padding:6px 13px;font-size:13px}
.btn.block{display:block;width:100%;text-align:center}
.inline{display:inline}

/* tables */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:15px}
th{font:600 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:9px 12px;border-bottom:2px solid var(--line);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid #efe7d2;vertical-align:top}
tr:hover td{background:#fffaf0}
td.num,th.num{text-align:right;white-space:nowrap}
tr.over td{background:#fdf0ef}

/* pills */
.pill{display:inline-block;font:600 12px var(--body);letter-spacing:.04em;padding:3px 10px;border-radius:999px;text-transform:capitalize}
.pill.ok{background:var(--ok-bg);color:var(--ok)} .pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)} .pill.mute{background:#ece6d6;color:var(--muted)}

/* member dashboard */
.hero{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:#f5f1e8;border-radius:14px;padding:26px clamp(18px,3vw,32px);margin-bottom:22px}
.hero h1{color:#fff;margin:0 0 4px}
.hero .code{font:13px var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-l)}
.hero .badge{display:inline-block;margin-top:10px;border:1px solid var(--gold-l);color:var(--gold-l);padding:4px 14px;border-radius:999px;font-size:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.stat b{display:block;font:500 28px var(--display);color:var(--navy)}
.stat span{font-size:13px;color:var(--muted);letter-spacing:.04em}
.stat.alert b{color:var(--bad)}
dl.kv{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:8px 22px}
dl.kv dt{color:var(--muted);font-size:14px} dl.kv dd{margin:0;word-break:break-word}
@media(max-width:480px){dl.kv{grid-template-columns:1fr;gap:0}dl.kv dd{margin-bottom:10px}}

.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-bottom:16px}
.filters .fld{margin:0}
.pager{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.pager a,.pager span{padding:6px 12px;border:1px solid var(--line);border-radius:8px;text-decoration:none;font-size:14px;background:#fff}
.pager span{background:var(--gold-p);border-color:var(--gold-l)}
details.card summary{cursor:pointer;font:500 18px var(--display);color:var(--navy)}
details.card[open] summary{margin-bottom:14px}

@media print{.pt-top,.pt-foot,.no-print{display:none!important}.card{border:0;box-shadow:none}}

/* show / hide password */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:46px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:grid;place-items:center;background:none;border:0;border-radius:8px;color:var(--muted);cursor:pointer}
.pw-eye:hover{color:var(--gold);background:var(--gold-p)}
.pw-eye:focus-visible{outline:2px solid var(--gold-l);outline-offset:-2px}

/* =====================================================================
   ROYAL THEME - navy + gold, light behind the content, ornaments
   ===================================================================== */
body{background:#f7f2e6;position:relative}
.pt-top,.pt-main,.pt-foot{position:relative;z-index:1}

/* ---- light behind everything ---- */
.pt-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.pt-bg::before{content:"";position:absolute;inset:0;background:
  radial-gradient(920px 520px at 88% -8%,rgba(212,175,70,.34),transparent 62%),
  radial-gradient(780px 540px at -8% 22%,rgba(30,64,110,.15),transparent 64%),
  radial-gradient(720px 440px at 50% 112%,rgba(201,169,97,.20),transparent 62%),
  linear-gradient(180deg,#fbf8f0 0%,#f3ead4 100%)}
.pt-bg .beam{position:absolute;left:50%;top:-30%;width:150%;height:90%;transform:translateX(-50%);
  background:conic-gradient(from 198deg at 50% 0,transparent 0 11%,rgba(232,200,74,.11) 16%,transparent 23%,rgba(232,200,74,.07) 29%,transparent 37%,transparent 100%);
  animation:ptSway 16s ease-in-out infinite alternate}
.pt-bg i{position:absolute;border-radius:50%;filter:blur(64px);animation:ptFloat 24s ease-in-out infinite}
.pt-bg .o1{width:420px;height:420px;right:5%;top:6%;background:radial-gradient(circle,rgba(236,200,74,.55),transparent 70%)}
.pt-bg .o2{width:360px;height:360px;left:2%;top:44%;background:radial-gradient(circle,rgba(74,124,196,.30),transparent 70%);animation-duration:30s;animation-delay:-9s}
.pt-bg .o3{width:300px;height:300px;right:26%;bottom:4%;background:radial-gradient(circle,rgba(201,169,97,.48),transparent 70%);animation-duration:27s;animation-delay:-16s}
.pt-bg .wheel{position:absolute;right:-170px;top:-150px;width:680px;height:680px;color:#a8842f;opacity:.13;animation:ptSpin 140s linear infinite}
@keyframes ptFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-46px,34px) scale(1.14)}}
@keyframes ptSpin{to{transform:rotate(360deg)}}
@keyframes ptSway{from{transform:translateX(-50%) rotate(-2.5deg)}to{transform:translateX(-50%) rotate(2.5deg)}}
@keyframes ptSheen{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* ---- header ---- */
.pt-top{position:sticky;top:0;z-index:30;background:linear-gradient(180deg,#081522,#0c1d2e 55%,#10294a);border-bottom:1px solid rgba(201,169,97,.55);box-shadow:0 10px 30px -10px rgba(5,14,28,.55)}
.pt-top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--gold-l) 30%,#fff3b0 50%,var(--gold-l) 70%,transparent)}
.pt-brand img{filter:drop-shadow(0 0 10px rgba(232,200,74,.5))}
.pt-brand{font-size:18px;letter-spacing:.01em}
.pt-nav a{transition:background .25s,border-color .25s,color .25s,transform .25s}
.pt-nav a:hover{transform:translateY(-1px);background:rgba(201,169,97,.10)}
.pt-nav a.on{background:linear-gradient(180deg,rgba(232,200,74,.30),rgba(201,169,97,.14));border-color:var(--gold-l);box-shadow:0 0 18px -4px rgba(232,200,74,.55)}

/* ---- headings ---- */
h1{font-weight:400;letter-spacing:-.01em}
.pt-main > h1::after,.pt-main > .row > h1::after{content:"";display:block;width:84px;height:2px;margin-top:12px;background:linear-gradient(90deg,var(--gold),var(--gold-l),transparent)}
.auth h1::after{margin-left:auto;margin-right:auto;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.card > h2:first-child{display:flex;align-items:center;gap:12px}
.card > h2:first-child::before{content:"";flex:0 0 auto;width:9px;height:9px;transform:rotate(45deg);background:linear-gradient(135deg,var(--gold-l),var(--gold));box-shadow:0 0 10px rgba(232,200,74,.7)}

/* ---- welcome banner (staff + member dashboards) ---- */
.hero{position:relative;overflow:hidden;isolation:isolate;border:1px solid rgba(201,169,97,.55);border-radius:22px;padding:clamp(24px,3.4vw,40px) clamp(20px,3.4vw,44px);margin-bottom:24px;
  background:radial-gradient(640px 320px at 92% -10%,rgba(236,200,74,.34),transparent 70%),radial-gradient(520px 300px at 8% 120%,rgba(74,124,196,.30),transparent 70%),linear-gradient(135deg,#061224 0%,#0b2447 52%,#12396b 100%);
  box-shadow:0 30px 60px -30px rgba(5,16,36,.8),0 0 0 1px rgba(255,255,255,.04) inset}
.hero::before{content:"";position:absolute;z-index:-1;right:-70px;top:-80px;width:360px;height:360px;opacity:.2;animation:ptSpin 100s linear infinite;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23e8c84a' stroke-width='1.4'%3E%3Ccircle cx='100' cy='100' r='94'/%3E%3Ccircle cx='100' cy='100' r='76' stroke-dasharray='2 5'/%3E%3Ccircle cx='100' cy='100' r='58'/%3E%3Ccircle cx='100' cy='100' r='14'/%3E%3Cpath d='M100 6V86M100 114V194M6 100H86M114 100H194M33.5 33.5L90 90M110 110L166.5 166.5M166.5 33.5L110 90M90 110L33.5 166.5'/%3E%3C/svg%3E") no-repeat center/contain}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.07) 50%,transparent 62%);animation:ptSheen 8s ease-in-out infinite}
.hero h1{font-size:clamp(28px,4.4vw,46px);color:#fff;margin:6px 0 4px}
.hero h1 em{font-style:italic;color:var(--gold-l);text-shadow:0 0 22px rgba(232,200,74,.45)}
.hero h1::after{display:none}
.hero .code{font:600 13px var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l)}
.hero .badge{border:1px solid var(--gold-l);color:var(--gold-l);background:rgba(232,200,74,.10);padding:6px 18px;border-radius:999px;font-size:14px;letter-spacing:.04em;box-shadow:0 0 18px -6px rgba(232,200,74,.7)}
.hero .hero-sub{margin:0 0 18px;color:rgba(245,241,232,.78);font-size:16px}
.hero-actions{gap:12px}
.btn.light{background:rgba(255,255,255,.07);color:#f6f0dd;border:1px solid rgba(201,169,97,.65);backdrop-filter:blur(4px)}
.btn.light:hover{background:rgba(232,200,74,.18);color:#fff;border-color:var(--gold-l)}

/* ---- cards ---- */
.card{position:relative;background:linear-gradient(180deg,rgba(255,253,248,.94),rgba(251,245,230,.94));backdrop-filter:blur(6px);
  border:1px solid rgba(201,169,97,.38);border-radius:18px;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 38px -22px rgba(12,29,46,.45)}
.card::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--gold-l),transparent);opacity:.85}
details.card summary{display:flex;align-items:center;gap:10px}
.auth .card{box-shadow:0 30px 60px -28px rgba(12,29,46,.5),0 0 0 1px rgba(255,255,255,.6) inset}

/* ---- stat tiles ---- */
.stat{position:relative;overflow:hidden;padding:20px 22px 18px 24px;border-radius:18px;border:1px solid rgba(201,169,97,.42);
  background:linear-gradient(155deg,#fffdf8 0%,#f9f0d8 100%);box-shadow:0 18px 34px -22px rgba(12,29,46,.55);transition:transform .3s,box-shadow .3s}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--gold-l),var(--gold))}
.stat::after{content:"";position:absolute;right:-30px;bottom:-40px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(232,200,74,.30),transparent 70%)}
.stat:hover{transform:translateY(-4px);box-shadow:0 26px 40px -22px rgba(12,29,46,.6)}
.stat b{font-size:clamp(26px,2.6vw,34px);font-weight:500;padding-right:50px}
.stat > span:last-child{position:relative;z-index:1}
.stat .si{position:absolute;z-index:1;right:16px;top:16px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,#0f2a4c,#081a33);color:var(--gold-l);box-shadow:0 6px 16px -6px rgba(5,16,36,.8),0 0 0 2px rgba(232,200,74,.35)}
.stat .si svg{width:20px;height:20px}
.stat.alert .si{background:linear-gradient(145deg,#7a2a30,#5a1a20);color:#ffd9a0}
.stat.alert b{color:var(--bad)}

/* ---- buttons ---- */
.btn{position:relative;overflow:hidden;transition:transform .2s,box-shadow .25s,background .25s}
.btn:hover{transform:translateY(-1px)}
.btn.gold{background:linear-gradient(180deg,#f0d36a 0%,var(--gold) 100%);color:#10213a;border-color:#a8842f;box-shadow:0 10px 22px -10px rgba(168,132,47,.9),0 1px 0 rgba(255,255,255,.5) inset}
.btn.gold:hover{background:linear-gradient(180deg,#f6dc7c,#b8922f);color:#0c1d2e;box-shadow:0 14px 26px -10px rgba(168,132,47,1)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-130%)}
.btn:hover::after{transform:translateX(130%);transition:transform .7s}

/* ---- tables, forms, pills ---- */
th{background:linear-gradient(180deg,#fbf3da,#f5e9c6);color:#6a5420;border-bottom:2px solid rgba(201,169,97,.7)}
th:first-child{border-top-left-radius:10px} th:last-child{border-top-right-radius:10px}
tr:hover td{background:rgba(232,200,74,.12)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(232,200,74,.25)}
.pill{box-shadow:0 0 0 1px rgba(0,0,0,.04) inset}
.pt-note{border-radius:12px;background:linear-gradient(90deg,rgba(232,200,74,.25),rgba(239,228,200,.5))}

/* ---- footer ---- */
.pt-foot{background:linear-gradient(180deg,#0a1a2e,#07111f);border-top:1px solid rgba(201,169,97,.5);color:#c8c0ae}

@media (max-width:560px){.stat .si{width:36px;height:36px;right:12px;top:12px}.stat b{padding-right:42px}.pt-bg .wheel{width:460px;height:460px;right:-170px;top:-120px}}
@media (prefers-reduced-motion:reduce){.pt-bg .beam,.pt-bg i,.pt-bg .wheel,.hero::before,.hero::after{animation:none!important}.stat,.btn,.pt-nav a{transition:none!important}}
@media print{.pt-bg{display:none}}

.stats{margin-bottom:24px}

/* =====================================================================
   ROYAL THEME v2 - palace lattice, arches, gold dust, filigree frames
   (replaces the wheel)
   ===================================================================== */
:root{
  --lattice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90' fill='none' stroke='%23c9a961' stroke-opacity='.55' stroke-width='1'%3E%3Cpath d='M45 3 87 45 45 87 3 45Z'/%3E%3Cpath d='M45 17 73 45 45 73 17 45Z'/%3E%3Ccircle cx='45' cy='45' r='4'/%3E%3Cpath d='M0 0 6 6M90 0 84 6M0 90 6 84M90 90 84 84'/%3E%3C/svg%3E");
  --lattice-dk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90' fill='none' stroke='%23e8c84a' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M45 3 87 45 45 87 3 45Z'/%3E%3Cpath d='M45 17 73 45 45 73 17 45Z'/%3E%3Ccircle cx='45' cy='45' r='4'/%3E%3Cpath d='M0 0 6 6M90 0 84 6M0 90 6 84M90 90 84 84'/%3E%3C/svg%3E");
  --lattice-lt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90' fill='none' stroke='%23a8842f' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M45 3 87 45 45 87 3 45Z'/%3E%3Cpath d='M45 17 73 45 45 73 17 45Z'/%3E%3Ccircle cx='45' cy='45' r='4'/%3E%3Cpath d='M0 0 6 6M90 0 84 6M0 90 6 84M90 90 84 84'/%3E%3C/svg%3E");
  --arches:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='64' viewBox='0 0 160 64' fill='none'%3E%3Cpath d='M8 64V34C8 17 44 9 80 2 116 9 152 17 152 34V64' fill='%23e8c84a' fill-opacity='.07' stroke='%23e8c84a' stroke-opacity='.5'/%3E%3Cpath d='M26 64V38C26 26 54 19 80 14 106 19 134 26 134 38V64' stroke='%23e8c84a' stroke-opacity='.32'/%3E%3Ccircle cx='80' cy='2' r='2.2' fill='%23e8c84a' fill-opacity='.7'/%3E%3C/svg%3E");
}

/* ---- the wheel is retired ---- */
.pt-bg .wheel{display:none}

/* ---- page background: lattice that fades toward the left, gold dust ---- */
.pt-bg .lattice{position:absolute;inset:0;background:var(--lattice-lt);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 100% 0%,#000 0,rgba(0,0,0,.55) 40%,transparent 78%);mask-image:radial-gradient(ellipse 80% 70% at 100% 0%,#000 0,rgba(0,0,0,.55) 40%,transparent 78%)}
.pt-bg .lattice::after{content:"";position:absolute;inset:0;background:var(--lattice-lt);
  -webkit-mask-image:radial-gradient(ellipse 60% 50% at 0% 100%,#000 0,transparent 75%);mask-image:radial-gradient(ellipse 60% 50% at 0% 100%,#000 0,transparent 75%)}
.pt-bg .sparks{position:absolute;inset:0;animation:ptTwinkle 5s ease-in-out infinite alternate;background:
  radial-gradient(circle at 12% 18%,rgba(214,170,40,.95) 0 1.6px,transparent 2.8px),
  radial-gradient(circle at 27% 64%,rgba(214,170,40,.8) 0 1.3px,transparent 2.4px),
  radial-gradient(circle at 41% 9%,rgba(214,170,40,.9) 0 1.8px,transparent 3px),
  radial-gradient(circle at 58% 38%,rgba(214,170,40,.7) 0 1.2px,transparent 2.2px),
  radial-gradient(circle at 73% 82%,rgba(214,170,40,.9) 0 1.7px,transparent 2.9px),
  radial-gradient(circle at 86% 27%,rgba(214,170,40,.95) 0 1.9px,transparent 3.1px),
  radial-gradient(circle at 93% 61%,rgba(214,170,40,.75) 0 1.3px,transparent 2.4px),
  radial-gradient(circle at 6% 88%,rgba(214,170,40,.85) 0 1.5px,transparent 2.7px),
  radial-gradient(circle at 49% 92%,rgba(214,170,40,.7) 0 1.2px,transparent 2.2px),
  radial-gradient(circle at 66% 12%,rgba(214,170,40,.8) 0 1.4px,transparent 2.5px)}
.pt-bg .sparks::after{content:"";position:absolute;inset:0;animation:ptTwinkle 7s ease-in-out -3s infinite alternate;background:
  radial-gradient(circle at 20% 40%,rgba(214,170,40,.85) 0 1.5px,transparent 2.6px),
  radial-gradient(circle at 35% 82%,rgba(214,170,40,.9) 0 1.8px,transparent 3px),
  radial-gradient(circle at 52% 55%,rgba(214,170,40,.7) 0 1.2px,transparent 2.2px),
  radial-gradient(circle at 64% 70%,rgba(214,170,40,.9) 0 1.6px,transparent 2.8px),
  radial-gradient(circle at 79% 8%,rgba(214,170,40,.8) 0 1.4px,transparent 2.5px),
  radial-gradient(circle at 90% 90%,rgba(214,170,40,.9) 0 1.8px,transparent 3px),
  radial-gradient(circle at 4% 52%,rgba(214,170,40,.75) 0 1.3px,transparent 2.4px)}
@keyframes ptTwinkle{from{opacity:.25}to{opacity:1}}

/* ---- header: faint lattice ---- */
.pt-top{background:var(--lattice-dk),linear-gradient(180deg,#081522,#0c1d2e 55%,#10294a)}

/* ---- welcome banner: arches along the bottom, lattice, gold dust ---- */
.hero{padding-bottom:calc(clamp(24px,3.4vw,40px) + 34px);
  background:
    linear-gradient(90deg,rgba(5,14,30,.88) 0%,rgba(5,14,30,.5) 42%,transparent 78%),
    var(--arches) bottom center/160px 64px repeat-x,
    var(--lattice-dk) 0 0/90px 90px,
    radial-gradient(640px 320px at 92% -10%,rgba(236,200,74,.38),transparent 70%),
    radial-gradient(520px 300px at 8% 120%,rgba(74,124,196,.30),transparent 70%),
    linear-gradient(135deg,#061224 0%,#0b2447 52%,#12396b 100%)}
.hero::before{inset:0;right:0;top:0;width:auto;height:auto;opacity:1;animation:ptTwinkle 4.5s ease-in-out infinite alternate;background:
  radial-gradient(circle at 78% 22%,rgba(255,232,150,.95) 0 1.8px,transparent 3px),
  radial-gradient(circle at 88% 46%,rgba(255,232,150,.8) 0 1.4px,transparent 2.6px),
  radial-gradient(circle at 66% 14%,rgba(255,232,150,.9) 0 1.5px,transparent 2.8px),
  radial-gradient(circle at 94% 18%,rgba(255,232,150,.95) 0 2px,transparent 3.3px),
  radial-gradient(circle at 72% 58%,rgba(255,232,150,.7) 0 1.3px,transparent 2.4px),
  radial-gradient(circle at 56% 34%,rgba(255,232,150,.75) 0 1.2px,transparent 2.3px),
  radial-gradient(circle at 84% 70%,rgba(255,232,150,.85) 0 1.6px,transparent 2.8px)}
.hero h1{text-shadow:0 2px 30px rgba(0,0,0,.35)}

/* ---- filigree corner frames on cards ---- */
.card::after{content:"";position:absolute;inset:9px;pointer-events:none;border-radius:12px;opacity:.7;background:
  linear-gradient(var(--gold),var(--gold)) top left/18px 1.5px no-repeat,
  linear-gradient(var(--gold),var(--gold)) top left/1.5px 18px no-repeat,
  linear-gradient(var(--gold),var(--gold)) top right/18px 1.5px no-repeat,
  linear-gradient(var(--gold),var(--gold)) top right/1.5px 18px no-repeat,
  linear-gradient(var(--gold),var(--gold)) bottom left/18px 1.5px no-repeat,
  linear-gradient(var(--gold),var(--gold)) bottom left/1.5px 18px no-repeat,
  linear-gradient(var(--gold),var(--gold)) bottom right/18px 1.5px no-repeat,
  linear-gradient(var(--gold),var(--gold)) bottom right/1.5px 18px no-repeat}
.card{background:var(--lattice-lt) 0 0/90px 90px,linear-gradient(180deg,rgba(255,253,248,.95),rgba(251,245,230,.95))}
.stat{background:var(--lattice-lt) 100% 0/70px 70px,linear-gradient(155deg,#fffdf8 0%,#f9f0d8 100%)}

/* ---- little ornamental rule under page titles ---- */
.pt-main > h1::after,.pt-main > .row > h1::after{width:120px;height:9px;background:
  linear-gradient(90deg,var(--gold) 0,var(--gold-l) 36%,transparent 36%) left center/100% 1.5px no-repeat,
  linear-gradient(135deg,var(--gold-l),var(--gold)) 44px center/8px 8px no-repeat;
  clip-path:none}

.pt-foot{background:var(--lattice-dk),linear-gradient(180deg,#0a1a2e,#07111f)}
@media (prefers-reduced-motion:reduce){.pt-bg .sparks,.pt-bg .sparks::after,.hero::before{animation:none!important;opacity:.6}}
@media print{.pt-bg{display:none}}

/* ---- file upload box (was the plain browser button) ---- */
input[type=file]{padding:10px 12px;border:1.5px dashed rgba(168,132,47,.75);border-radius:14px;cursor:pointer;color:var(--muted);
  background:var(--lattice-lt) 0 0/70px 70px,linear-gradient(180deg,#fffdf8,#f8f0dc);transition:border-color .25s,background-color .25s,box-shadow .25s}
input[type=file]:hover{border-color:var(--gold);box-shadow:0 10px 24px -14px rgba(168,132,47,.8)}
input[type=file]:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
input[type=file]::file-selector-button{margin-right:14px;padding:10px 22px;border:1px solid #a8842f;border-radius:999px;cursor:pointer;
  font:600 14px var(--body);color:#10213a;background:linear-gradient(180deg,#f0d36a,var(--gold));box-shadow:0 8px 18px -10px rgba(168,132,47,.95),0 1px 0 rgba(255,255,255,.5) inset;transition:transform .2s,box-shadow .25s,background .25s}
input[type=file]::file-selector-button:hover{background:linear-gradient(180deg,#f6dc7c,#b8922f);transform:translateY(-1px)}
input[type=file]::-webkit-file-upload-button{margin-right:14px;padding:10px 22px;border:1px solid #a8842f;border-radius:999px;cursor:pointer;
  font:600 14px var(--body);color:#10213a;background:linear-gradient(180deg,#f0d36a,var(--gold))}

/* header brand keeps its colours on hover (was turning dark navy) */
.pt-brand,.pt-brand:hover,.pt-brand:focus{color:#f5f1e8}
.pt-brand:hover span{color:#fff}
.pt-brand small,.pt-brand:hover small{color:var(--gold-l)}
.pt-foot a,.pt-foot a:hover{color:#e9e2d1}
.hero a:not(.btn),.hero a:not(.btn):hover{color:var(--gold-l)}

/* ---- side "whoosh" between pages ---- */
.pt-main{animation:ptInR .55s cubic-bezier(.2,.8,.2,1) both}
body.dir-l .pt-main{animation-name:ptInL}
@keyframes ptInR{from{opacity:0;transform:translateX(90px) skewX(-3deg);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes ptInL{from{opacity:0;transform:translateX(-90px) skewX(3deg);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes ptOutL{from{opacity:1;transform:none;filter:none}to{opacity:0;transform:translateX(-90px) skewX(3deg);filter:blur(5px)}}
@keyframes ptOutR{from{opacity:1;transform:none;filter:none}to{opacity:0;transform:translateX(90px) skewX(-3deg);filter:blur(5px)}}
body.pt-leaving.go-r .pt-main{animation:ptOutL .24s ease-in both}
body.pt-leaving.go-l .pt-main{animation:ptOutR .24s ease-in both}
body.pt-leaving{pointer-events:none}

/* a streak of golden light that sweeps across as the page changes */
.pt-whoosh{position:fixed;top:0;bottom:0;left:0;width:34vw;z-index:60;pointer-events:none;opacity:0;transform:translateX(-120%) skewX(-14deg);
  background:linear-gradient(90deg,transparent,rgba(232,200,74,.10) 25%,rgba(255,236,160,.42) 52%,rgba(232,200,74,.10) 78%,transparent)}
body.pt-leaving.go-r .pt-whoosh{animation:ptSweepR .5s ease-in both}
body.pt-leaving.go-l .pt-whoosh{animation:ptSweepL .5s ease-in both}
@keyframes ptSweepR{from{opacity:0;transform:translateX(-120%) skewX(-14deg)}25%{opacity:1}to{opacity:0;transform:translateX(330%) skewX(-14deg)}}
@keyframes ptSweepL{from{opacity:0;transform:translateX(330%) skewX(-14deg)}25%{opacity:1}to{opacity:0;transform:translateX(-120%) skewX(-14deg)}}
@media (prefers-reduced-motion:reduce){.pt-main{animation:none!important}body.pt-leaving .pt-main,.pt-whoosh{animation:none!important}}

/* =====================================================================
   v3 - no zig-zag lattice anywhere, and much lighter on the browser
   ===================================================================== */
/* the diamond lattice is switched off everywhere it was used */
:root{--lattice:none;--lattice-dk:none;--lattice-lt:none}
.pt-bg .lattice,.pt-bg .lattice::after{display:none}

/* things that made scrolling and clicking heavy */
.pt-bg i{filter:none;will-change:transform;animation-duration:36s}      /* soft glows are already gradients, no blur filter needed */
.pt-bg .beam{animation:none}
.pt-bg .sparks::after{display:none}
.card,.btn.light{backdrop-filter:none;-webkit-backdrop-filter:none}

/* page change: a short, simple slide (movement + fade only) */
.pt-whoosh{display:none!important}
.pt-main{animation:ptInR .3s ease-out both}
@keyframes ptInR{from{opacity:0;transform:translate3d(36px,0,0)}to{opacity:1;transform:none}}
@keyframes ptInL{from{opacity:0;transform:translate3d(-36px,0,0)}to{opacity:1;transform:none}}
@keyframes ptOutL{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(-36px,0,0)}}
@keyframes ptOutR{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(36px,0,0)}}
body.pt-leaving.go-r .pt-main{animation:ptOutL .16s ease-in both}
body.pt-leaving.go-l .pt-main{animation:ptOutR .16s ease-in both}

/* ---- profile icon + menu in the portal header ---- */
.pt-profile{position:relative;margin-left:6px}
.pt-pf-btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:3px 10px 3px 3px;border-radius:999px;border:1px solid rgba(201,169,97,.7);background:rgba(255,255,255,.06);color:#f1e9d3;cursor:pointer;transition:background .2s,border-color .2s}
.pt-pf-btn:hover,.pt-profile.open .pt-pf-btn{background:rgba(232,200,74,.18);border-color:var(--gold-l)}
.pt-pf-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:600 15px var(--display);color:#10213a;background:linear-gradient(145deg,#f4dc7c,var(--gold))}
.pt-pf-btn svg{transition:transform .2s}.pt-profile.open .pt-pf-btn svg{transform:rotate(180deg)}
.pt-pf-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:230px;padding:8px;border-radius:14px;z-index:70;
  background:linear-gradient(180deg,#0e2340,#0a1a31);border:1px solid rgba(201,169,97,.6);box-shadow:0 22px 40px -14px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s}
.pt-profile.open .pt-pf-menu{opacity:1;visibility:visible;transform:none}
.pt-pf-who{padding:10px 12px 12px;border-bottom:1px solid rgba(201,169,97,.3);margin-bottom:6px}
.pt-pf-who b{display:block;color:#fff;font:500 16px var(--display)}
.pt-pf-who small{display:block;margin-top:2px;color:var(--gold-l);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.pt-pf-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#eee6d0;text-decoration:none;font-size:15px;border:0}
.pt-pf-menu a:hover{background:rgba(232,200,74,.16);color:#fff}
.pt-pf-menu a svg{width:18px;height:18px;color:var(--gold-l);flex:0 0 auto}
.pt-pf-menu a.out{margin-top:4px;border-top:1px solid rgba(201,169,97,.25);border-radius:0 0 10px 10px}
@media (max-width:560px){.pt-pf-menu{right:-4px}}

/* idle warning for members */
.pt-idle{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;max-width:min(92vw,520px);padding:14px 20px;border-radius:14px;background:#0c1d2e;color:#f5f1e8;border:1px solid var(--gold-l);box-shadow:0 18px 40px -12px rgba(0,0,0,.6);font-size:15px;text-align:center}
.pt-idle b{color:var(--gold-l)}

/* ---- approvals: waiting list + last 10 decisions on the right ---- */
.split-ap{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(290px,1fr);gap:22px;align-items:start}
.recent-ap{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto}
.ap-list{list-style:none;margin:0;padding:0}
.ap-list li{padding:14px 0;border-bottom:1px solid rgba(201,169,97,.28)}
.ap-list li:last-child{border-bottom:0;padding-bottom:0}
.ap-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.ap-when{font-size:12.5px;color:var(--muted)}
.ap-name{display:block;font:500 18px var(--display);color:var(--navy)}
a.ap-name{text-decoration:none}a.ap-name:hover{color:var(--gold)}
.ap-meta{font-size:14px;color:#4a4034;margin-top:2px}
.ap-by{font-size:13px;color:var(--muted);margin-top:3px}
@media (max-width:980px){.split-ap{grid-template-columns:minmax(0,1fr)}.recent-ap{position:static;max-height:none}}

/* ---- notices (green = done, red = problem), in the royal style ---- */
.pt-flash{--fa:#2f8a52;--fb:#1b6b3d;--glow:rgba(47,138,82,.28);position:relative;display:flex;align-items:center;gap:14px;overflow:hidden;
  margin-bottom:20px;padding:14px 52px 14px 20px;border-radius:16px;color:var(--navy);font-size:16.5px;line-height:1.45;
  background:radial-gradient(420px 120px at 0 50%,var(--glow),transparent 70%),linear-gradient(180deg,#fffdf8,#f9f1da);
  border:1px solid rgba(201,169,97,.55);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 34px -22px rgba(12,29,46,.5);
  animation:ptFlashIn .5s cubic-bezier(.2,.8,.2,1) both;transition:opacity .3s,transform .3s}
.pt-flash.err{--fa:#c64a4a;--fb:#8f1f2c;--glow:rgba(198,74,74,.30)}
.pt-flash::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--fa),var(--fb))}
.pt-flash::after{content:"";position:absolute;left:22px;right:22px;top:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--gold-l),transparent);opacity:.9}
.pt-fi{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,var(--fa),var(--fb));box-shadow:0 8px 16px -8px var(--fb),0 0 0 3px rgba(255,255,255,.7),0 0 0 4px rgba(201,169,97,.55)}
.pt-fi svg{width:20px;height:20px}
.pt-ft{flex:1 1 auto;min-width:0}
.pt-fx{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:0;background:transparent;color:var(--muted);font-size:24px;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.pt-fx:hover{background:rgba(201,169,97,.2);color:var(--navy)}
.pt-flash.gone{opacity:0;transform:translateY(-8px)}
@keyframes ptFlashIn{from{opacity:0;transform:translate3d(0,-10px,0) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pt-flash{animation:none}}
@media (max-width:480px){.pt-flash{padding:12px 46px 12px 16px;font-size:15.5px}.pt-fi{width:34px;height:34px}}

/* notices: the royal ivory card wins over the old flat colours */
.pt-flash.ok,.pt-flash.err{background:radial-gradient(420px 120px at 0 50%,var(--glow),transparent 70%),linear-gradient(180deg,#fffdf8,#f9f1da);color:var(--navy);border-color:rgba(201,169,97,.55)}