:root{--bg:#f3f4f9;--panel:#fff;--panel2:#f6f6fb;--rail:#11132b;--fg:#1b1d33;--muted:#5f6278;--line:#e0e2ef;--accent:#373d93;--accent-soft:#e6e7f6;--head:#5842b4;--hi:#fb8e28;--good:#1e8a4f;--good-bg:#d9f1e3;--bad:#c3264e;--bad-bg:#fadbe3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0d0f22;--panel:#16193a;--panel2:#1b1f45;--fg:#e8e9f6;--muted:#9a9dc0;--line:#2a2e5a;--accent:#8f96ec;--accent-soft:#252a5e;--head:#ab9cf2;--good:#6fd39a;--good-bg:#183a2a;--bad:#f58aa6;--bad-bg:#45192a;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0d0f22;--panel:#16193a;--panel2:#1b1f45;--fg:#e8e9f6;--muted:#9a9dc0;--line:#2a2e5a;--accent:#8f96ec;--accent-soft:#252a5e;--head:#ab9cf2;--good:#6fd39a;--good-bg:#183a2a;--bad:#f58aa6;--bad-bg:#45192a;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.45 "Lato",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--accent)}
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;min-width:0}
.auth .card{width:100%;max-width:380px;padding:26px 24px;display:flex;flex-direction:column;gap:12px;border-top:4px solid var(--accent)}
.brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.brand>div{display:flex;flex-direction:column;padding-left:10px;border-left:3px solid var(--hi)}
.brand-logo,.tbrand .srp-mark,.tbrand img{display:block;width:110px;height:auto}
.tbrand{display:flex;align-items:center;gap:14px;min-width:0}
@media (max-width:520px){.tbrand{gap:10px}.tbrand img{width:72px}.top h1{font-size:21px}.wide{padding:16px 12px 32px}}
.brand b{font-weight:900;font-size:16px}.brand span{font-size:12px;color:var(--muted)}
h1{margin:4px 0 0;font-size:24px;font-weight:900}
h2{margin:0 0 10px;font-size:16px;color:var(--head)}
label{display:flex;flex-direction:column;gap:4px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:700}
input,select{font:inherit;font-size:14px;color:var(--fg);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0;text-transform:none;letter-spacing:0}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.btn{font:inherit;font-weight:700;cursor:pointer;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:25px;padding:9px 18px;text-decoration:none;display:inline-block;text-align:center}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--line)}
.btn.sm{padding:5px 12px;font-size:12.5px}
.msg{margin:0;padding:10px 12px;border-radius:8px;background:var(--accent-soft);font-size:13px}
.msg.err{background:var(--bad-bg);color:var(--bad)}.msg.good{background:var(--good-bg);color:var(--good)}
.sub{color:var(--muted);font-size:12px}
code{background:var(--panel2);padding:2px 6px;border-radius:5px;font-size:14px}
hr{border:0;border-top:1px solid var(--line);width:100%}
.wide{max-width:1200px;margin:0 auto;padding:22px 16px 40px;display:flex;flex-direction:column;gap:16px}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.eyebrow{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--head);font-weight:700}
.pad{padding:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.grid .full{grid-column:1/-1}
.lbl{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:6px}
.chks{display:flex;flex-wrap:wrap;gap:6px 12px}
.chk{flex-direction:row;align-items:center;gap:5px;text-transform:none;letter-spacing:0;font-size:13px;color:var(--fg);font-weight:400}
.chks.sm .chk{font-size:12px}
.roles{margin:0;padding-left:18px}
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px;border-bottom:1px solid var(--line);background:var(--panel2);white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
td input{display:block;width:100%;margin-bottom:4px;padding:5px 8px}
td.act form{display:flex;flex-direction:column;gap:6px}

/* sign-in: full legal name under the logo */
.brand-full{flex-direction:column;align-items:flex-start;gap:12px}
.brand-full>div{padding-left:10px}
.brand-full b{font-size:13.5px;line-height:1.3;letter-spacing:.06em;font-weight:900}
.brand-full span{margin-top:2px;font-weight:700;letter-spacing:.04em}

/* account page: first sign-in (password only) */
.acct{gap:18px;align-content:start;padding-top:32px}
.auth label.keep{flex-direction:row;align-items:center;gap:8px;font-size:13px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--fg,inherit);cursor:pointer}
.auth label.keep input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.auth .keep-note{margin-top:-8px}

/* Profile picture (account.php#photo, lib/avatar.php) */
.av-row{display:flex;align-items:center;gap:18px}
.av-pic{flex:0 0 auto;width:96px;height:96px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);border:1px solid var(--line)}
.av-pic img{width:100%;height:100%;object-fit:cover;display:block}
.av-pic b{font-size:34px;font-weight:900;letter-spacing:.02em}
.av-act{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.av-act form{margin:0}
.av-pick{position:relative;overflow:hidden}
.av-pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.av-pick:focus-within{box-shadow:0 0 0 3px var(--accent-soft),0 0 0 5px var(--accent)}
.av-rm{font:inherit;font-size:13px;background:none;border:0;padding:4px 0;color:var(--muted);text-decoration:underline;cursor:pointer}
.av-rm:hover,.av-rm:focus-visible{color:var(--bad)}
.av-edit{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:6px;border-top:1px solid var(--line);margin-top:4px}
.av-how{margin:8px 0 0;font-size:13px;color:var(--muted);text-align:center}
.av-stage{position:relative;width:min(280px,100%);aspect-ratio:1;border-radius:14px;overflow:hidden;touch-action:none;cursor:grab;background:#fff;outline:none}
.av-stage:active{cursor:grabbing}.av-stage:focus-visible{box-shadow:0 0 0 3px var(--accent)}
.av-stage canvas{width:100%;height:100%;display:block}
.av-ring{position:absolute;inset:8%;border-radius:50%;box-shadow:0 0 0 999px rgb(0 0 0 / .45);border:2px solid #fff;pointer-events:none}
.av-zoom{display:flex;align-items:center;gap:10px;width:min(280px,100%);font-weight:700;color:var(--muted)}
.av-zoom input{flex:1;accent-color:var(--accent)}
.av-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.av-note{margin:0;font-size:12.5px}.av-note.err{color:var(--bad)}
@media (max-width:420px){.av-row{flex-direction:column;align-items:flex-start}}
/* My shortcuts (account.php) */
.sc-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sc-list li{display:flex;align-items:center;gap:12px;padding:10px 8px 10px 14px}
.sc-list li+li{border-top:1px solid var(--line)}
.sc-list .sb-i{width:18px;height:18px;flex:0 0 auto;color:var(--accent)}
.sc-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.sc-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-t small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-list form{display:flex;gap:2px;flex:0 0 auto}
.sc-b{width:34px;height:34px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:16px;line-height:1;cursor:pointer}
.sc-b:hover,.sc-b:focus-visible{background:var(--line);color:inherit;outline:none}
.om-list .btn{flex:0 0 auto;width:auto;margin:0;padding:7px 12px;font-size:13px;text-decoration:none}
.om-list li{flex-wrap:wrap}
.sc-b:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.sc-b:disabled{opacity:.25;cursor:default;background:transparent}
.sc-del:hover{color:#c62828}
.sc-bad .sc-t em{font-style:normal;font-size:12px;color:var(--bad)}.sc-bad>.sb-i{color:var(--bad)}
.sc-empty{margin:0;padding:14px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:13.5px}
.sc-add{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.sc-row{display:grid;grid-template-columns:2fr 3fr;gap:10px}
.sc-row label{min-width:0}.sc-row input{width:100%;box-sizing:border-box}
@media (max-width:480px){.sc-row{grid-template-columns:1fr}}
:target{scroll-margin-top:16px}
.acct #password{max-width:520px}

/* ---------- Appearance & account (account.php, redesigned 16 Oct 2026) ----------
   House look kept: --accent navy, --hi orange brand rule, Lato, the light / dark tokens above; Glass / Paper apply via .card. */
.acx{max-width:1040px;margin:0 auto;padding:22px 16px 56px;display:flex;flex-direction:column;gap:18px}
.ac-head{align-items:center;padding:16px 18px;border-radius:16px;background:var(--panel);border:1px solid var(--line);
  border-top:4px solid var(--accent);position:relative;overflow:hidden}
.ac-head::after{content:"";position:absolute;inset:auto -40px -60px auto;width:220px;height:140px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--hi) 22%,transparent),transparent);pointer-events:none}
.ac-head .brand{flex:0 0 auto}
.ac-head .brand-logo{width:96px}
.ac-who{display:flex;align-items:center;gap:14px;flex:1 1 280px;min-width:0}
.ac-who h1{margin:0;font-size:24px;line-height:1.15}
.ac-who .sub{margin:2px 0 0;font-size:13px}
.ac-av{flex:0 0 auto;width:44px;height:44px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--hi)}
.ac-av img{width:100%;height:100%;object-fit:cover;display:block}.ac-av b{font-weight:900;font-size:16px}
.ac-tools{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.ac-tools .srp-theme-btn.in-head{margin-left:0}

.ac-wrap{display:grid;grid-template-columns:210px minmax(0,1fr);gap:20px;align-items:start}
.ac-nav{position:sticky;top:16px;display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.ac-nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:var(--fg);text-decoration:none;font-weight:700;font-size:13.5px;
  border-left:3px solid transparent;transition:background-color .15s,color .15s}
.ac-nav a .sb-i{width:18px;height:18px;flex:0 0 auto;color:var(--muted)}
.ac-nav a:hover{background:var(--panel2)}
.ac-nav a[aria-current="true"]{background:var(--accent-soft);color:var(--accent);border-left-color:var(--hi)}
.ac-nav a[aria-current="true"] .sb-i{color:var(--accent)}
.ac-nav a:focus-visible{outline:3px solid var(--hi);outline-offset:1px}
.ac-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.ac-card{padding:22px;display:flex;flex-direction:column;gap:14px;scroll-margin-top:16px}
.ac-anchor{position:absolute}
.ac-h{display:flex;align-items:flex-start;gap:12px}
.ac-h>div{flex:1 1 auto;min-width:0}
.ac-h h2{margin:2px 0 0;font-size:18px;font-weight:900;color:var(--fg)}
.ac-h .sub{margin:3px 0 0;font-size:13px;line-height:1.45}
.ac-ico{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.ac-ico .sb-i{width:20px;height:20px}
.ac-count{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:3px 10px;margin-top:4px}
.acx .msg.good{background:var(--good-bg);color:var(--good)}

/* appearance: sample + summary */
.lk-now{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:end;padding:16px;border-radius:14px;
  background:linear-gradient(135deg,var(--accent-soft),var(--panel2));border:1px solid var(--line)}
.lk-sample{display:flex;flex-direction:column;gap:6px;min-width:0;font-family:var(--look-font,inherit)}
.lk-hello{font-size:22px;font-weight:900;line-height:1.2;color:var(--fg)}
.lk-chips{display:flex;flex-wrap:wrap;gap:6px}
.lk-chips span{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--accent)}
.lk-chips span:first-child{background:var(--accent);border-color:var(--accent);color:#fff}
.lk-line{font-size:13.5px;color:var(--muted)}
.lk-sum{margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.lk-sum .sub{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.lk-sum b{font-size:14px;padding-left:10px;border-left:3px solid var(--hi)}

/* appearance: option cards */
.lk-set{border:0;margin:0;padding:0;min-width:0}
.lk-set legend{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:10px;padding:0}
.lk-set legend span{letter-spacing:0;text-transform:none;font-weight:400}
.lk-grid{display:grid;gap:10px}
.lk-modes,.lk-skins{grid-template-columns:repeat(3,1fr)}
.lk-fonts{grid-template-columns:repeat(4,1fr)}
.lk-opt{position:relative;display:block;cursor:pointer;margin:0;font-size:13px;color:var(--fg);font-weight:400}
.lk-opt,.lk-opt *{text-transform:none;letter-spacing:normal}
.lk-opt input{position:absolute;opacity:0;width:1px;height:1px}
.lk-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;height:100%;padding:10px;border:1.5px solid var(--line);
  border-radius:14px;background:var(--panel2);transition:border-color .15s,box-shadow .15s,transform .15s}
.lk-opt:hover .lk-card{border-color:var(--accent);transform:translateY(-1px)}
.lk-opt input:checked+.lk-card{border-color:var(--accent);background:var(--panel);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.lk-opt input:checked+.lk-card::after{content:"";position:absolute;top:-8px;right:-8px;z-index:1;width:20px;height:20px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat;
  box-shadow:0 0 0 2px var(--panel)}
.lk-opt input:focus-visible+.lk-card{outline:3px solid var(--hi);outline-offset:2px}
.lk-name{font-weight:700;font-size:13.5px;margin-top:6px}
.lk-desc{font-size:11.5px;line-height:1.35;color:var(--muted)}
.lk-fcard{align-items:center;text-align:center;padding:14px 8px 12px}
.lk-fcard .lk-name{margin-top:2px}
.lk-aa{font-size:34px;line-height:1;font-weight:700;color:var(--accent)}
.lk-opt input:checked+.lk-fcard .lk-aa{color:var(--hi)}

/* mini screens: top bar, two panels, a button */
.lk-sw{display:block;width:100%;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:var(--m-bg);border:1px solid var(--m-line)}
.mini{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:18% 1fr 16%;gap:7%;height:100%;padding:0 0 9%}
.mini b{grid-column:1/-1;background:var(--m-bar);position:relative}
.mini b::before{content:"";position:absolute;left:7%;top:30%;width:16%;height:40%;border-radius:3px;background:var(--m-logo,#fff);opacity:.9}
.mini b::after{content:"";position:absolute;right:7%;top:28%;height:44%;aspect-ratio:1;border-radius:50%;background:#fdd600}
.mini i{background:var(--m-card);border:1px solid var(--m-line);border-radius:5px;box-shadow:var(--m-shadow,none);margin:0 0 0 14%}
.mini i+i{margin:0 14% 0 0}
.mini u{grid-column:1/-1;justify-self:start;width:34%;margin-left:7%;border-radius:999px;background:var(--m-acc)}
.lk-sw-light,.lk-sw-classic{--m-bg:#eef0f8;--m-card:#fff;--m-line:#dfe2f0;--m-bar:#2e3790;--m-acc:#373d93}
.lk-sw-dark{--m-bg:#0d0f22;--m-card:#1b1f45;--m-line:#2a2e5a;--m-bar:#16193a;--m-acc:#8f96ec;--m-logo:#8f96ec}
.lk-sw-auto{--m-card:rgba(127,131,180,.4);--m-line:rgba(127,131,180,.45);--m-bar:linear-gradient(90deg,#2e3790 50%,#16193a 50%);--m-acc:#fb8e28;
  --m-bg:linear-gradient(90deg,#eef0f8 0 50%,#0d0f22 50% 100%)}
.lk-sw-auto{background:var(--m-bg)}
.lk-sw-glass{--m-card:rgba(255,255,255,.55);--m-line:rgba(255,255,255,.85);--m-bar:rgba(46,55,144,.82);--m-acc:#373d93;--m-shadow:0 2px 6px rgba(28,32,90,.14);
  background:radial-gradient(60% 70% at 12% 0,rgba(253,214,0,.55),transparent 70%),radial-gradient(70% 80% at 100% 0,rgba(88,66,180,.55),transparent 70%),linear-gradient(160deg,#dfe4f7,#c9d0f0)}
.lk-sw-paper{--m-bg:#f5f0e6;--m-card:#fffdf8;--m-line:transparent;--m-bar:#2e3790;--m-acc:#373d93;--m-shadow:0 1px 2px rgba(70,50,15,.14),0 3px 8px rgba(70,50,15,.1)}
.lk-note{margin:8px 0 0}
.lk-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:4px;border-top:1px solid var(--line);margin-top:2px;padding-top:14px}
html.ac-js #lookSave{display:none}
.lk-status{font-size:13px;color:var(--muted)}.lk-status.ok{color:var(--good);font-weight:700}.lk-status.err{color:var(--bad)}
html.ac-js .lk-foot:has(#lookReset[hidden]):has(.lk-status:empty){display:none}

/* password */
.pw label,.sc-add label{min-width:0}
.pw input{width:100%}
.pw-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

@media (max-width:860px){
  .ac-wrap{grid-template-columns:1fr;gap:14px}
  .ac-nav{top:0;z-index:5;flex-direction:row;overflow-x:auto;scrollbar-width:none;border-radius:0 0 14px 14px;margin:0 -16px;padding:8px 12px;
    border-width:0 0 1px;box-shadow:0 6px 16px -12px rgba(27,31,84,.4)}
  .ac-nav::-webkit-scrollbar{display:none}
  .ac-nav a{flex:0 0 auto;border-left:0;border-radius:999px;padding:8px 14px;border:1px solid var(--line)}
  .ac-nav a[aria-current="true"]{border-color:var(--accent)}
  .lk-fonts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .acx{padding:12px 16px 40px;gap:14px}
  .ac-head{padding:14px}
  .ac-head .brand{display:none}
  .ac-who h1{font-size:20px}
  .ac-tools{margin-left:auto}
  .ac-card{padding:16px}
  .lk-now{grid-template-columns:1fr}.lk-sum{align-items:flex-start;text-align:left}
  .lk-modes,.lk-skins{grid-template-columns:1fr}
  .lk-modes .lk-card,.lk-skins .lk-card{display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding-right:36px}
  .lk-modes .lk-sw,.lk-skins .lk-sw{grid-row:1/3}
  .lk-modes .lk-name,.lk-skins .lk-name{margin-top:0;align-self:end}
  .lk-modes .lk-desc,.lk-skins .lk-desc{align-self:start}
  .lk-modes .lk-opt input:checked+.lk-card::after,.lk-skins .lk-opt input:checked+.lk-card::after{top:50%;right:10px;margin-top:-10px}
  .pw-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:no-preference){html:has(.acx){scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){.lk-card,.ac-nav a{transition:none}.lk-opt:hover .lk-card{transform:none}}
html.srp-in-super .ac-head{display:none}
html.srp-in-super .acx{padding-top:12px}
.acx [hidden]{display:none!important}
.acx label.btn{flex-direction:row;font-size:14px;letter-spacing:0;text-transform:none;color:#fff}
.acx .av-row{padding:4px 0}
.acx .av-pic{box-shadow:0 0 0 3px var(--panel),0 0 0 5px var(--accent-soft)}