/* reNIKOLA sign-in pages: sign-in, account settings, admin console */
:root{
  --g:#0E6B2F; --g2:#14A12E; --g3:#10A15A; --o:#F39200; --y:#FFC20E;
  --ink:#1B2A36; --ink2:#46566A; --dim:#5B6B7C; --faint:#8593A3;
  --bg:#EEF2F6; --card:#fff; --card2:#F5F7FA; --line:#E3E8EF; --line2:#D3DBE4;
  --red:#D23F2F; --red-bg:#FDECEA; --amb:#B76E00; --amb-bg:#FFF4E0; --blu:#2F6FD0; --blu-bg:#E9F1FD; --grn-bg:#E7F6EC;
  --r:14px; --shadow:0 1px 2px rgba(20,40,60,.05),0 10px 30px rgba(20,40,60,.07);
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--g);text-decoration:none;font-weight:600}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.rk-stripe{height:4px;background:linear-gradient(90deg,var(--o) 0 24.5%,var(--y) 24.5% 40.8%,var(--g2) 40.8% 100%)}

/* ---------- form parts ---------- */
.fld{display:block;margin:0 0 14px}
.fld>span{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:6px}
.fld small{display:block;color:var(--faint);font-size:12px;margin-top:5px}
.inp{width:100%;height:44px;border:1px solid var(--line2);border-radius:10px;background:#fff;padding:0 13px;outline:none;transition:border-color .15s,box-shadow .15s}
.inp:focus{border-color:var(--g3);box-shadow:0 0 0 3px rgba(16,161,90,.15)}
.inp[readonly]{background:var(--card2);color:var(--dim)}
select.inp{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235B6B7C' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 13px center;padding-right:34px}
textarea.inp{height:auto;min-height:70px;padding:10px 13px;resize:vertical}
.pw{position:relative}
.pw .inp{padding-right:46px}
.pw .eye{position:absolute;right:4px;top:4px;width:36px;height:36px;border:0;background:transparent;border-radius:8px;cursor:pointer;color:var(--faint);display:grid;place-items:center}
.pw .eye:hover{color:var(--ink);background:var(--card2)}
.code-inp{letter-spacing:.5em;font-size:22px;font-weight:700;text-align:center;height:54px}
.chk{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink2);cursor:pointer;user-select:none}
.chk input{width:17px;height:17px;accent-color:var(--g3);margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:10px;border:1px solid var(--line2);
  background:#fff;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s,opacity .15s;color:var(--ink)}
.btn:hover{border-color:var(--faint)}
.btn.pri{background:var(--g3);border-color:var(--g3);color:#fff;box-shadow:0 2px 8px rgba(16,161,90,.25)}
.btn.pri:hover{background:#0C8E4E;border-color:#0C8E4E}
.btn.dan{color:var(--red);border-color:#F2C4BE}
.btn.dan:hover{background:var(--red-bg)}
.btn.dan.solid{background:var(--red);border-color:var(--red);color:#fff}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--card2)}
.btn.sm{height:34px;padding:0 12px;font-size:13px;border-radius:9px}
.btn.wide{width:100%;height:46px;font-size:15px}
.btn:disabled{opacity:.55;cursor:default}
.btn .spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:rk-spin .7s linear infinite}
@keyframes rk-spin{to{transform:rotate(360deg)}}
.msg{border-radius:10px;padding:10px 13px;font-size:13.5px;margin:0 0 14px;display:flex;gap:9px;align-items:flex-start}
.msg.err{background:var(--red-bg);color:#9A2A1E}
.msg.ok{background:var(--grn-bg);color:#0B6B33}
.msg.info{background:var(--blu-bg);color:#234E8E}
.msg.warn{background:var(--amb-bg);color:#8A5300}
.checks{list-style:none;margin:-4px 0 14px;padding:0;display:grid;gap:5px;font-size:12.5px}
.checks li{display:flex;align-items:center;gap:8px;color:var(--faint)}
.checks li::before{content:"";width:16px;height:16px;border-radius:50%;border:1.6px solid var(--line2);flex:none}
.checks li.ok{color:var(--g)}
.checks li.ok::before{border-color:var(--g3);background:var(--g3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center}

/* ---------- app pages (account, admin) ---------- */
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top-in{height:62px;display:flex;align-items:center;gap:14px;padding:0 clamp(16px,2.2vw,44px)}
.top-logo{height:38px;display:block}
.top-div{width:1px;height:30px;background:var(--line)}
.top-t{font-weight:700;font-size:16px;color:var(--g)}
.top-t small{display:block;font-weight:500;font-size:12px;color:var(--faint);margin-top:-2px}
.top-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.wrap{margin:0 auto;padding:24px clamp(16px,2.2vw,44px)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 22px;min-width:0}
.card h3{margin:0 0 4px;font-size:16px}
.card .sub{color:var(--dim);margin:0 0 16px;font-size:13px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px;align-items:start}
.hello{display:flex;align-items:center;gap:18px;margin:6px 0 22px}
.av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:linear-gradient(135deg,#14A12E,#0E6B2F);flex:none;letter-spacing:.02em}
.av.lg{width:64px;height:64px;font-size:22px;box-shadow:0 6px 18px rgba(14,107,47,.25)}
.av.sm{width:32px;height:32px;font-size:12px}
.hello h1{margin:0;font-size:26px;letter-spacing:-.01em}
.hello p{margin:2px 0 0;color:var(--dim)}
.kv{display:grid;grid-template-columns:120px minmax(0,1fr);gap:9px 14px;font-size:13.5px}
.kv dt{color:var(--faint)}
.kv dd{margin:0;font-weight:600;word-break:break-word}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;background:var(--card2);color:var(--ink2);border:1px solid var(--line);white-space:nowrap}
.pill.g{background:var(--grn-bg);color:#0B6B33;border-color:#C8EBD3}
.pill.r{background:var(--red-bg);color:#9A2A1E;border-color:#F4CDC7}
.pill.a{background:var(--amb-bg);color:#8A5300;border-color:#F5DDB0}
.pill.b{background:var(--blu-bg);color:#234E8E;border-color:#CFE0F8}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.list{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.list>div{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line)}
.list>div:last-child{border-bottom:0}
.list .grow{flex:1;min-width:0}
.list small{display:block;color:var(--faint);font-size:12px}
.muted{color:var(--faint)}

/* user menu (account / admin pages) */
.um{position:relative}
.um-btn{display:flex;align-items:center;gap:10px;border:1px solid transparent;background:transparent;border-radius:12px;padding:4px 8px 4px 4px;cursor:pointer}
.um-btn:hover,.um.open .um-btn{background:var(--card2);border-color:var(--line)}
.um-btn .t{text-align:left;line-height:1.2}
.um-btn .t small{display:block;color:var(--faint);font-size:11.5px}
.um-btn .t b{font-size:13.5px}
.um-menu{position:absolute;right:0;top:calc(100% + 8px);width:260px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 48px rgba(20,40,60,.18);padding:6px;display:none;z-index:40}
.um.open .um-menu{display:block}
.um-menu .hd{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.um-menu .hd b{display:block}
.um-menu .hd small{color:var(--faint);display:block;font-size:12px;word-break:break-all}
.um-menu a,.um-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:9px;border:0;background:none;font-weight:500;color:var(--ink);cursor:pointer;text-decoration:none;font-size:13.5px}
.um-menu a:hover,.um-menu button:hover{background:var(--card2);text-decoration:none}
.um-menu .out{color:var(--red)}

/* admin console */
.adm{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
.tabs{position:sticky;top:86px;display:grid;gap:2px}
.tabs button{display:flex;align-items:center;gap:10px;border:0;background:none;text-align:left;padding:10px 12px;border-radius:10px;cursor:pointer;color:var(--ink2);font-weight:600}
.tabs button:hover{background:#fff}
.tabs button.on{background:#fff;color:var(--g);box-shadow:var(--shadow)}
.tabs button svg{flex:none;opacity:.8}
.tabs .n{margin-left:auto;font-size:11.5px;color:var(--faint);font-weight:600}
.ph{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.ph h2{margin:0;font-size:21px;letter-spacing:-.01em}
.ph p{margin:2px 0 0;color:var(--dim);font-size:13.5px}
.ph .act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.stat small{display:block;color:var(--faint);font-size:12px}
.stat b{font-size:22px}
.tool{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.tool .inp{height:38px;max-width:320px}
.tool select.inp{max-width:180px}
.tbl{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:auto;box-shadow:var(--shadow)}
.tbl table{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:12px;color:var(--faint);font-weight:600;padding:11px 14px;border-bottom:1px solid var(--line);background:#FAFBFD;white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:#FAFCFD}
.who{display:flex;align-items:center;gap:11px;min-width:200px}
.who b{display:block}
.who small{color:var(--faint);font-size:12px}
.rowmenu{position:relative}
.rowmenu .mn{position:absolute;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(20,40,60,.18);padding:6px;width:230px;z-index:20;display:none}
.rowmenu.open .mn{display:block}
.rowmenu .mn button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 11px;border-radius:8px;cursor:pointer;font-size:13.5px}
.rowmenu .mn button:hover{background:var(--card2)}
.rowmenu .mn button.d{color:var(--red)}
.rowmenu .mn hr{border:0;border-top:1px solid var(--line);margin:5px 0}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.role h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.role .meta{display:grid;gap:7px;font-size:13px;margin:12px 0 14px}
.role .meta div{display:flex;gap:8px}
.role .meta span{color:var(--faint);width:62px;flex:none}
.role .foot{display:flex;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:12px}
.role .foot .muted{margin-right:auto;font-size:12.5px}
.ev{display:inline-flex;align-items:center;gap:7px;font-weight:600;white-space:nowrap}
.ev i{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.ev.g i{background:var(--g3)} .ev.r i{background:var(--red)} .ev.a i{background:#E0930A} .ev.b i{background:var(--blu)}
.secret{display:flex;gap:8px;align-items:center;background:#0F2233;color:#fff;border-radius:12px;padding:12px 12px 12px 16px;margin:6px 0 14px}
.secret code{font:600 17px/1.3 ui-monospace,Consolas,monospace;letter-spacing:.04em;flex:1;word-break:break-all}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 18px}
.pgrp{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.pgrp>label{font-weight:700;font-size:12.5px;color:var(--ink2);margin-bottom:6px}
.pgrp .chk{font-size:13px;padding:3px 0}
.switch{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;margin:0 0 10px}
.switch input{appearance:none;width:38px;height:22px;border-radius:999px;background:var(--line2);position:relative;flex:none;cursor:pointer;transition:background .15s;margin:1px 0 0}
.switch input::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked{background:var(--g3)}
.switch input:checked::after{left:18px}
.switch b{display:block;font-size:13.5px}
.switch small{color:var(--dim);font-size:12.5px}
.sect{font-weight:700;font-size:13px;margin:18px 0 10px;color:var(--ink2)}
.empty{padding:34px;text-align:center;color:var(--faint)}

/* modal + toast */
.mb{position:fixed;inset:0;background:rgba(15,30,45,.45);backdrop-filter:blur(3px);z-index:60;display:grid;place-items:center;padding:20px;animation:rk-fade .15s}
@keyframes rk-fade{from{opacity:0}}
.md{background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.3);width:100%;max-width:520px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;animation:rk-up .2s}
.md.lg{max-width:820px}
@keyframes rk-up{from{transform:translateY(12px);opacity:0}}
.md-h{display:flex;align-items:center;gap:10px;padding:18px 22px 6px}
.md-h h3{margin:0;font-size:18px}
.md-h .x{margin-left:auto;width:34px;height:34px;border:0;border-radius:9px;background:none;cursor:pointer;color:var(--faint);font-size:20px}
.md-h .x:hover{background:var(--card2);color:var(--ink)}
.md-b{padding:12px 22px;overflow:auto}
.md-f{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px 18px;border-top:1px solid var(--line)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#0F2233;color:#fff;border-radius:12px;padding:11px 18px;font-weight:600;box-shadow:0 14px 40px rgba(0,0,0,.25);z-index:70;animation:rk-up .2s;max-width:calc(100vw - 40px)}
.toast.err{background:var(--red)}

@media(max-width:900px){
  .top-in{padding:0 14px;gap:10px;height:56px}
  .top-logo{height:32px}
  .top-div,.top-t small,.um-btn .t{display:none}
  .wrap{padding:16px 14px}
  .adm{grid-template-columns:minmax(0,1fr);gap:14px}
  .tabs{position:static;display:flex;overflow-x:auto;gap:4px;scrollbar-width:none}
  .tabs button{white-space:nowrap}
  .tabs .n{display:none}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .hello h1{font-size:21px}
  .kv{grid-template-columns:100px minmax(0,1fr)}
}

/* ======= SITE LOOK: the same look as the dashboard and the sign-in page (2026-10-30) =======
   Same fonts, header, sidebar, orange pill buttons, flat cards and neutral greys as the "SITE LOOK" block in the dashboard.
   Green is still selected / active, red and amber are still problems; orange pills are actions. */
:root{
  --sans:"DM Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --display:"Mukta","DM Sans",system-ui,sans-serif;
  --ui:"Raleway","DM Sans",system-ui,sans-serif;
  --act:#FFA400; --act-d:#FE7C04;
  --ink:#232323; --ink2:#333; --dim:#555; --faint:#7A7A7A;
  --bg:#FAFAFA; --card2:#F5F5F5; --line:#E5E5E5; --line2:#CFCFCF;
  --r:6px; --shadow:none;
}
/* Raleway's numbers are old-style by default: buttons and fields do not inherit this, so they are named too */
body,button,select,input,textarea,.btn,.tabs button,.tbl th{font-feature-settings:"lnum"}

/* header: the dashboard's, with the stripe under it */
.top{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;box-shadow:0 1px 8px rgba(20,40,60,.04)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,#F39200 0 24.5%,#FFC20E 24.5% 40.8%,#14A12E 40.8% 100%)}
.top-in{height:58px;gap:14px;padding:0 22px 3px}
.top-logo{height:38px}
.top-div{height:auto;align-self:stretch;margin:12px 0 9px;background:#E1E6EC}
.top-t{font:600 19px/1.15 var(--display);color:#000}
.top-t small{margin-top:2px;font:500 11.5px/1.3 var(--ui);color:#5B6B7C}

/* headings and figures */
.ph h2,.hello h1{font-family:var(--display);font-weight:500;letter-spacing:0}
.ph h2{font-size:23px}
.card h3{font:500 17px/1.3 var(--display)}
.stat b{font-family:var(--display);font-weight:500;font-size:24px}
.tbl th{font-family:var(--ui)}
.md-h h3{font:500 20px/1.25 var(--display)}
.sect{font:500 15px/1.3 var(--display)}

/* buttons that do something: the website's orange pill */
.btn{height:38px;padding:0 20px;border-radius:100px;font-family:var(--ui);font-size:13px;font-weight:600}
.btn:hover{border-color:var(--act)}
.btn.pri{background:var(--act);border-color:var(--act);color:#fff;box-shadow:none}
.btn.pri:hover{background:var(--act-d);border-color:var(--act-d)}
.btn.dan:hover{border-color:var(--red)}
.btn.ghost:hover{border-color:transparent}
.btn.sm{height:32px;padding:0 14px;font-size:12.5px}
a.btn{text-decoration:none}

/* fields, cards and dialogs: square corners, no shadows */
.inp{height:42px;border-radius:4px}
.inp:focus{border-color:var(--act);box-shadow:0 0 0 1px var(--act)}
.stat,.tbl,.list,.pgrp,.switch,.secret{border-radius:6px}
.md{border-radius:8px}
.mb{backdrop-filter:none}
.tbl tr:hover td{background:var(--card2)}

/* the user chip and menu: same as on the dashboard (bridge.js) */
.av{background:var(--g3);font-family:var(--ui);font-weight:600;letter-spacing:0}
.av.lg{box-shadow:none}
.um-btn{border:0;border-radius:4px;transition:background .12s}
.um-btn:hover,.um.open .um-btn{background:var(--card2)}
.um-btn .t{white-space:nowrap;font-family:var(--ui)}
.um-btn .t small{font-weight:500}
.um-btn .t b{font-weight:600}
.um-menu{top:calc(100% + 6px);width:250px;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.um-menu .hd{padding:8px 10px 10px}
.um-menu .hd b{font:500 15px/1.3 var(--display)}
.um-menu a,.um-menu button{display:block;padding:8px 10px;border-radius:4px;font:500 13px var(--ui);text-align:left}
.um-menu .out{margin-top:6px;padding-top:10px;border-top:1px solid var(--line);border-radius:0 0 4px 4px;color:var(--ink)}

/* text links, as in the dashboard */
.kv a{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#AAA}
.kv a:hover{color:var(--act-d);text-decoration-color:currentColor}

/* Admin console: the dashboard's white sidebar */
.adm-wrap{padding:0}
.adm{grid-template-columns:238px minmax(0,1fr);gap:0;align-items:stretch;min-height:calc(100vh - 58px)}
.tabs{position:sticky;top:58px;align-self:start;align-content:start;height:calc(100vh - 58px);padding:14px 12px;background:#fff;border-right:1px solid var(--line)}
.tabs button{position:relative;padding:9px 12px;border-radius:9px;color:var(--ink2);font-family:var(--ui);font-weight:500}
.tabs button:hover{background:var(--card2)}
.tabs button.on{background:var(--card2);color:#000;font-weight:600;box-shadow:none}
.tabs button.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--g3)}
.tabs button.on svg{color:var(--g3);opacity:1}
#view{min-width:0;padding:22px 26px 36px}

@media(max-width:900px){
  .top-in{height:50px;gap:10px;padding:0 14px 3px}
  .top-logo{height:32px}
  .top-t{font-size:16px}
  .adm{grid-template-columns:minmax(0,1fr);min-height:0}
  .tabs{position:static;display:flex;height:auto;padding:6px 10px;border-right:0;border-bottom:1px solid var(--line)}
  .tabs button.on::before{display:none}
  #view{padding:14px}
}