/* ===== Mode gelap SWC (dipakai login, employee, barista, admin) ===== */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B1020; --panel:#141A2E; --panel-soft:#1B2240;
  --ink:#EAF0FF; --ink-soft:#A9B3D6; --ink-faint:#7D88AE; --soft:#A9B3D6; --faint:#7D88AE;
  --line:#2A3358;
  --primary-soft:#1E2A66; --primary-dark:#A9B8FF;
  --gold-soft:#3A2E14; --gold-ink:#F5C267;
  --green-soft:#10372A; --green-ink:#5EE0AC;
  --red-soft:#3D1A24; --red:#FF7B93;
  --shadow:0 10px 30px -12px rgba(0,0,0,.6); --shadow-sm:0 4px 14px -6px rgba(0,0,0,.5);
}
html[data-theme="dark"] body{background:radial-gradient(1100px 480px at 82% -10%, #1A2350 0%, transparent 60%), var(--bg);}
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:var(--panel-soft);color:var(--ink);border-color:var(--line);}
html[data-theme="dark"] input::placeholder{color:var(--ink-faint);}
html[data-theme="dark"] table th{background:var(--panel-soft);}
html[data-theme="dark"] img.logo{background:#fff;border-radius:16px;padding:6px;}
html[data-theme="dark"] #qrBox,html[data-theme="dark"] #qrBox canvas,html[data-theme="dark"] #qrBox img{background:#fff;}

/* ===== Kartu profil bersama ===== */
.swcp{text-align:center;}
.swcp-av{position:relative;width:96px;height:96px;margin:0 auto 12px;}
.swcp-av .pic{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,#6E7BFF,#17B6D9) center/cover no-repeat;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:32px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:3px solid var(--panel,#fff);box-shadow:0 6px 18px -6px rgba(20,35,110,.35);}
.swcp-cam{position:absolute;right:-2px;bottom:-2px;width:32px;height:32px;border-radius:50%;border:3px solid var(--panel,#fff);background:var(--primary,#3654FF);color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.swcp-name{font-weight:700;font-size:17px;color:var(--ink);}
.swcp-rm{background:none;border:none;color:var(--red,#E6516B);font-size:11.5px;font-weight:700;cursor:pointer;margin-top:4px;font-family:inherit;}
.swcp-info{margin:16px 0 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel-soft);text-align:left;overflow:hidden;}
.swcp-row{display:flex;justify-content:space-between;gap:14px;padding:11px 14px;font-size:13px;border-bottom:1px solid var(--line);}
.swcp-row:last-child{border-bottom:none;}
.swcp-row .k{color:var(--ink-faint);font-weight:600;flex-shrink:0;}
.swcp-row .v{color:var(--ink);font-weight:700;text-align:right;word-break:break-word;}
.swcp-theme{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;text-align:left;}
.swcp-theme .k{font-size:13px;font-weight:700;color:var(--ink);}
.swcp-seg{display:flex;border:1px solid var(--line);border-radius:100px;background:var(--panel-soft);padding:3px;}
.swcp-seg button{border:none;background:none;padding:7px 14px;border-radius:100px;font-size:12.5px;font-weight:700;color:var(--ink-soft);cursor:pointer;font-family:inherit;width:auto;}
.swcp-seg button.on{background:var(--primary,#3654FF);color:#fff;}
.swcp-ov{position:fixed;inset:0;background:rgba(11,21,51,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:9999;}
.swcp-ov.on{display:flex;}
.swcp-mdl{width:100%;max-width:380px;max-height:92vh;overflow:auto;background:var(--panel,#fff);color:var(--ink);border-radius:22px;padding:22px 20px;box-shadow:0 24px 60px -16px rgba(0,0,0,.5);}
.swcp-btn{width:100%;padding:12px;border:none;border-radius:12px;font-weight:700;font-size:13.5px;cursor:pointer;margin-top:9px;font-family:inherit;}
.swcp-btn.pw{background:var(--primary-soft);color:var(--primary-dark);}
.swcp-btn.out{background:var(--red-soft);color:var(--red);}
.swcp-btn.close{background:var(--panel-soft);color:var(--ink-soft);border:1px solid var(--line);}

/* ===== Kolom password dengan ikon mata ===== */
.pwwrap{position:relative;}
.pwwrap input{padding-right:46px!important;}
.pwwrap .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:none;background:none;cursor:pointer;color:var(--ink-faint,#959BB8);display:flex;align-items:center;justify-content:center;padding:0;border-radius:10px;}
.pwwrap .eye:hover{color:var(--primary,#3654FF);}
.pwwrap .eye svg{width:20px;height:20px;}