:root {
  --bg: #080b13;
  --bg-elevated: #0d1220;
  --surface: rgba(16, 23, 40, .86);
  --surface-strong: #111a2c;
  --surface-soft: rgba(24, 34, 57, .68);
  --line: rgba(148, 163, 184, .16);
  --line-strong: rgba(129, 140, 248, .28);
  --text: #f2f5ff;
  --muted: #8d99ae;
  --muted-strong: #b6c0d2;
  --primary: #6c63ff;
  --primary-bright: #8c7cff;
  --cyan: #13c8e5;
  --green: #22d39b;
  --orange: #f6aa3c;
  --red: #f05d78;
  --gray: #78849a;
  --sidebar: rgba(9, 13, 23, .94);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow: 0 18px 55px rgba(0, 0, 0, .28);
  --glow: 0 0 0 1px rgba(108, 99, 255, .14), 0 16px 45px rgba(58, 45, 145, .14);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: "Inter", "Microsoft YaHei", "Segoe UI", sans-serif; font-size: 14px; line-height: 1.6; }
button, input, select, textarea { font: inherit; }
a { color: #9b94ff; text-decoration: none; transition: color .2s ease; }
a:hover { color: #c0bcff; }
h1, h2, h3, .brand { font-family: "Outfit", "Inter", "Microsoft YaHei", sans-serif; letter-spacing: -.015em; }
h1 { margin: 0; font-size: clamp(25px, 2.3vw, 34px); font-weight: 700; }
h2 { margin: 0; font-size: 20px; font-weight: 650; }
h3 { margin: 0; font-size: 16px; font-weight: 650; }
code { color: #b9c8ff; padding: 2px 6px; border: 1px solid rgba(128, 144, 193, .14); border-radius: 6px; background: rgba(109, 118, 166, .09); font-size: .88em; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ambient, .page-grid { position: fixed; inset: 0; pointer-events: none; }
.ambient { z-index: 0; opacity: .56; filter: blur(22px); }
.ambient-one { background: radial-gradient(circle at 28% 14%, rgba(86, 76, 220, .2), transparent 27%), radial-gradient(circle at 82% 53%, rgba(0, 189, 214, .13), transparent 24%); animation: ambient-drift 16s var(--ease) infinite alternate; }
.ambient-two { background: radial-gradient(circle at 68% 88%, rgba(126, 58, 209, .17), transparent 24%); animation: ambient-drift 20s var(--ease) infinite alternate-reverse; }
.page-grid { z-index: 0; opacity: .22; background-image: linear-gradient(rgba(135, 146, 183, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(135, 146, 183, .045) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); }

.app-layout { position: relative; z-index: 1; }
.sidebar { display: flex; flex-direction: column; padding: 24px 16px 18px; border-right: 1px solid var(--line); background: var(--sidebar); backdrop-filter: blur(24px); }
.brand { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0 5px 30px; color: var(--text); font-size: 18px; font-weight: 700; }
.brand:hover { color: #fff; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; color: #afa8ff; border: 1px solid rgba(124, 113, 255, .35); border-radius: 13px; background: linear-gradient(145deg, rgba(103, 88, 255, .24), rgba(15, 202, 229, .08)); box-shadow: inset 0 0 20px rgba(108, 99, 255, .12); }
.brand-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.brand small { display: block; margin-top: -2px; color: #626f84; font-family: "Inter", sans-serif; font-size: 9px; font-weight: 650; letter-spacing: .18em; }
.sidebar nav { display: grid; gap: 5px; }
.nav-label { margin: 17px 12px 7px; color: #546076; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.sidebar nav a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 43px; padding: 10px 12px; overflow: hidden; color: #8d99ae; border: 1px solid transparent; border-radius: 11px; font-weight: 500; }
.sidebar nav a::before { content: ""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(90deg, rgba(108, 99, 255, .18), rgba(108, 99, 255, .04)); transition: opacity .2s ease; }
.sidebar nav a > * { position: relative; }
.sidebar nav a svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.sidebar nav a:hover, .sidebar nav a.active { color: #e9e8ff; border-color: rgba(122, 111, 255, .18); }
.sidebar nav a:hover::before, .sidebar nav a.active::before { opacity: 1; }
.sidebar nav a.active { box-shadow: inset 3px 0 0 var(--primary); }
.sidebar-account { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--line); }
.account-avatar { display: grid; place-items: center; width: 38px; height: 38px; color: #fff; border: 1px solid rgba(130, 119, 255, .4); border-radius: 12px; background: linear-gradient(145deg, #5c54d9, #343071); font-weight: 700; }
.sidebar-account strong, .sidebar-account small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account strong { font-size: 13px; }.sidebar-account small { color: var(--muted); font-size: 10px; }
.logout { display: grid; place-items: center; width: 34px; height: 34px; color: var(--muted); border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.logout:hover { color: var(--red); background: rgba(240, 93, 120, .09); }
.logout svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.content { position: relative; z-index: 1; min-width: 0; }
.auth-content { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; min-height: 100vh; padding: 70px 20px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; padding: 14px 20px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(14, 20, 34, .72); box-shadow: var(--glow); backdrop-filter: blur(18px); }
.topbar > div:first-child { display: flex; align-items: center; gap: 14px; }.topbar h1 { font-size: 20px; }
.eyebrow, .section-label { color: #6d7a91; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; color: var(--green); border: 1px solid rgba(34, 211, 155, .25); border-radius: 99px; background: rgba(34, 211, 155, .08); letter-spacing: .04em; }
.eyebrow i, .online-pill i, .safe-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.topbar-actions { display: flex; align-items: center; gap: 12px; }.topbar-actions form { margin: 0; }
.role-pill, .online-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; color: var(--muted-strong); border: 1px solid var(--line); border-radius: 99px; background: rgba(255, 255, 255, .025); font-size: 12px; }
.role-pill svg { width: 15px; height: 15px; fill: none; stroke: #c3bdff; stroke-width: 1.8; }
.online-pill { margin-left: auto; color: var(--green); border-color: rgba(34, 211, 155, .2); background: rgba(34, 211, 155, .07); white-space: nowrap; }

.welcome-hero { position: relative; display: flex; align-items: center; gap: 18px; min-height: 132px; padding: 24px 28px; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: linear-gradient(110deg, rgba(24, 34, 57, .95), rgba(15, 22, 39, .88)); box-shadow: var(--shadow); }
.welcome-hero::after { content: ""; position: absolute; right: 22%; width: 280px; height: 140px; opacity: .16; background: radial-gradient(circle, var(--primary), transparent 68%); filter: blur(14px); pointer-events: none; }
.welcome-hero > * { position: relative; z-index: 1; }.welcome-hero h2 { margin: 4px 0 3px; font-size: clamp(21px, 2vw, 28px); }.welcome-hero p { margin: 0; color: var(--muted); }
.welcome-icon { display: grid; place-items: center; width: 66px; height: 66px; flex: 0 0 66px; color: #b7b1ff; border: 1px solid rgba(142, 130, 255, .34); border-radius: 20px; background: linear-gradient(145deg, rgba(105, 90, 236, .24), rgba(36, 211, 199, .08)); box-shadow: inset 0 0 28px rgba(106, 91, 232, .14); }
.welcome-icon svg { width: 33px; height: 33px; fill: none; stroke: currentColor; stroke-width: 1.55; }
.identity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 42px; }
.identity-card { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(17, 24, 41, .92), rgba(11, 16, 28, .9)); box-shadow: 0 12px 35px rgba(0, 0, 0, .18); }
.identity-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }.identity-head small { color: #657187; font-size: 10px; }
.card-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; }.card-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }.card-icon.purple { color: #b49cff; background: rgba(143, 92, 246, .16); }.card-icon.blue { color: #829bff; background: rgba(71, 93, 238, .16); }.card-icon.cyan { color: #22d3ee; background: rgba(8, 177, 202, .15); }
.identity-card h3 { margin-bottom: 12px; }.identity-card dl, .identity-card dd { margin: 0; }.identity-card dl { display: grid; gap: 8px; }.identity-card dl div { display: flex; justify-content: space-between; gap: 12px; }.identity-card dt { color: var(--muted); font-weight: 400; }.identity-card dd { color: #dce3f1; text-align: right; }
.inline-badge { padding: 3px 7px; color: #b9b1ff; border: 1px solid rgba(127, 115, 255, .22); border-radius: 6px; background: rgba(108, 99, 255, .1); font-size: 11px; }.safe-state { display: inline-flex; align-items: center; gap: 6px; color: var(--green); }

.page-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }.page-header p, header > p { margin: 5px 0 0; color: var(--muted); }.dashboard-heading h2 { margin-top: 4px; font-size: 24px; }
.panel, .stat, .login-card, .reminder-summary article { border: 1px solid var(--line); background: var(--surface); box-shadow: 0 14px 38px rgba(0, 0, 0, .18); backdrop-filter: blur(16px); }
.panel { width: 100%; padding: 24px; margin-bottom: 20px; border-radius: var(--radius); }.panel.narrow { max-width: 620px; }.panel h2 { margin-bottom: 16px; }
.panel form, .form-panel form { display: grid; gap: 16px; }.panel label, dialog label { display: grid; gap: 7px; color: var(--muted-strong); font-weight: 500; }
.form-control, .form-select { min-height: 44px; color: var(--text); border: 1px solid rgba(143, 155, 190, .22); border-radius: var(--radius-sm); background-color: rgba(5, 9, 18, .7); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.form-control::placeholder { color: #59657a; }.form-control:focus, .form-select:focus { color: #fff; border-color: rgba(125, 112, 255, .82); background-color: rgba(8, 12, 23, .9); box-shadow: 0 0 0 4px rgba(108, 99, 255, .13), 0 0 24px rgba(108, 99, 255, .11); }
.form-select { --bs-form-select-bg-img: none; }.form-select option { color: var(--text); background: #101625; }
.btn { position: relative; min-height: 40px; overflow: hidden; border-radius: 10px; font-weight: 600; transition: transform .18s var(--ease), box-shadow .18s ease, filter .18s ease; }.btn:hover { transform: translateY(-1px); }.btn:active { transform: translateY(0) scale(.985); }
.button-ripple { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: rgba(255,255,255,.34); pointer-events: none; animation: ripple .62s ease-out forwards; }
.btn-primary { border-color: transparent; background: linear-gradient(110deg, #6b63f6, #5943df); box-shadow: 0 8px 22px rgba(89, 67, 223, .24); }.btn-primary:hover, .btn-primary:focus { border-color: transparent; background: linear-gradient(110deg, #7c74ff, #6550ee); box-shadow: 0 10px 28px rgba(89, 67, 223, .35); }
.btn-light, .btn-outline-secondary { color: var(--muted-strong); border-color: var(--line); background: rgba(255, 255, 255, .045); }.btn-light:hover, .btn-outline-secondary:hover { color: #fff; border-color: rgba(139, 129, 255, .32); background: rgba(108, 99, 255, .09); }.btn-outline-primary { color: #aaa3ff; border-color: rgba(126, 115, 255, .45); }.btn-outline-primary:hover { border-color: var(--primary); background: rgba(108, 99, 255, .15); }.btn-outline-danger { color: #ff91a5; border-color: rgba(240, 93, 120, .3); }.btn-outline-danger:hover { color: #fff; border-color: var(--red); background: rgba(240, 93, 120, .16); }.btn-success { border-color: transparent; background: #168f6d; }.btn-danger { border-color: transparent; background: #ba3f59; }
.button-icon { width: 17px; height: 17px; margin-right: 7px; fill: none; stroke: currentColor; stroke-width: 1.9; vertical-align: -3px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }.stat { position: relative; display: block; min-height: 144px; padding: 22px; overflow: hidden; color: inherit; border-radius: var(--radius); }.stat::after { content: ""; position: absolute; right: -30px; bottom: -52px; width: 130px; height: 130px; border-radius: 50%; opacity: .1; background: currentColor; filter: blur(8px); }.stat:hover { color: inherit; border-color: var(--line-strong); box-shadow: var(--glow); transform: translateY(-3px); }.stat span, .stat small { display: block; color: var(--muted); }.stat strong { display: block; margin: 8px 0 5px; font-family: "Outfit", sans-serif; font-size: 34px; line-height: 1; }.stat.overdue { color: var(--red); }.stat.expiring { color: var(--orange); }.stat.active { color: var(--green); }.stat.closed { color: #91a0ba; }
.mini-stats, .summary { display: flex; gap: 30px; padding: 15px 18px; margin-bottom: 20px; color: var(--muted); border: 1px solid var(--line); border-radius: 12px; background: rgba(15, 22, 37, .7); }.mini-stats b { margin-left: 5px; color: var(--text); }.detail-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.detail-title h2 { margin: 3px 0 0; }
.dashboard-list { display: grid; }.dashboard-list a { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(180px, 1.2fr) minmax(160px, 1fr) minmax(110px, .6fr); gap: 15px; align-items: center; padding: 14px 8px; color: inherit; border-top: 1px solid var(--line); }.dashboard-list a:hover { background: rgba(108, 99, 255, .045); }
.empty, .empty-state { padding: 36px; color: var(--muted); text-align: center; }

.form-panel { width: min(1050px, 100%); margin-right: auto; margin-left: auto; }.duration-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.quick-hours, .button-row { display: flex; gap: 8px; flex-wrap: wrap; }.preview { display: flex; gap: 25px; padding: 15px; border: 1px solid rgba(120, 128, 180, .12); border-radius: 10px; background: rgba(99, 102, 241, .06); }.form-actions { padding-top: 6px; }.field-error, .text-danger { color: #ff8299 !important; font-size: 12px; }.conflict-card { padding: 22px; margin-bottom: 20px; border: 1px solid rgba(240, 93, 120, .3); border-radius: var(--radius); background: rgba(129, 33, 55, .2); }.conflict-card h2 { color: #ff8ba1; }
.filter-bar { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) minmax(145px, 1fr) minmax(145px, 1fr) auto auto; gap: 10px; margin-bottom: 20px; }.table-responsive { border: 1px solid var(--line); border-radius: 12px; }.records-table { width: 100%; min-width: 1100px; border-collapse: collapse; white-space: nowrap; }.records-table th { padding: 12px 11px; color: #707c91; background: rgba(5, 9, 17, .42); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-align: left; text-transform: uppercase; }.records-table td { max-width: 340px; padding: 14px 11px; border-top: 1px solid var(--line); vertical-align: middle; }.records-table tbody tr { transition: background .15s ease; }.records-table tbody tr:hover { background: rgba(108, 99, 255, .045); }.records-table td small { display: block; margin-top: 4px; color: var(--muted); }.records-table td:last-child a { display: block; margin: 3px; }.copy-btn { color: #8f87ff; border: 0; background: none; cursor: pointer; font-size: 12px; }.copy-btn:hover { color: #c0bcff; }
.status, .task-status { display: inline-block; padding: 4px 9px; border: 1px solid transparent; border-radius: 99px; font-size: 11px; white-space: nowrap; }.status-active { color: #4de3b3; border-color: rgba(34, 211, 155, .18); background: rgba(34, 211, 155, .09); }.status-expiring { color: #ffc66d; border-color: rgba(246, 170, 60, .2); background: rgba(246, 170, 60, .09); }.status-overdue { color: #ff8fa4; border-color: rgba(240, 93, 120, .2); background: rgba(240, 93, 120, .1); }.status-closed { color: #a8b3c7; border-color: var(--line); background: rgba(120, 132, 154, .09); }.status-voided { color: #78849a; background: rgba(120, 132, 154, .06); text-decoration: line-through; }.voided-row { opacity: .58; text-decoration: line-through; }.pager { display: flex; justify-content: flex-end; gap: 16px; padding-top: 18px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(250px, .85fr); gap: 20px; margin-bottom: 22px; }.details { margin: 0; }.action-panel { align-self: start; display: grid; gap: 10px; }.history-list { display: grid; }.history-item { display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(145px, .9fr) minmax(140px, 1fr) minmax(90px, .6fr) minmax(90px, .6fr) auto; gap: 15px; align-items: center; padding: 13px 5px; border-top: 1px solid var(--line); }.log-row { display: grid; grid-template-columns: 170px 180px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1400px; margin: 0 auto; }.settings-grid .panel { margin: 0; }.switch-row { display: flex !important; align-items: center; gap: 9px; }.help-text { margin-top: 15px; color: var(--muted); font-size: 13px; }
.reminder-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }.reminder-summary article { padding: 20px; border-radius: var(--radius); }.reminder-summary span, .reminder-summary small { color: var(--muted); }.reminder-summary strong { display: block; margin-top: 8px; font-size: 29px; }.reminder-summary .small-value { font-size: 15px; }.reminder-summary small { display: block; margin-top: 8px; }.reminder-summary .overdue { border-left: 3px solid var(--red); }.reminder-summary .expiring { border-left: 3px solid var(--orange); }.reminder-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }.reminder-section { margin: 0; }.reminder-list { display: grid; gap: 12px; }.reminder-card { padding: 16px; border: 1px solid var(--line); border-left: 3px solid; border-radius: 10px; background: rgba(13, 19, 32, .8); }.reminder-card.overdue { border-left-color: var(--red); }.reminder-card.expiring { border-left-color: var(--orange); }.reminder-card-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }.reminder-card-info { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; margin: 12px 0; }.reminder-card-info p { margin: 0; color: var(--muted); }.reminder-card-info b { color: var(--text); }.reminder-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.flash-stack { position: fixed; z-index: 100; top: 18px; right: 20px; display: grid; gap: 9px; width: min(380px, calc(100vw - 28px)); pointer-events: none; }.flash-message { display: grid; grid-template-columns: 20px minmax(0, 1fr) 24px; align-items: center; gap: 10px; padding: 12px 13px; color: #dbe4f3; border: 1px solid var(--line); border-radius: 11px; background: rgba(11, 17, 29, .94); box-shadow: var(--shadow); backdrop-filter: blur(20px); animation: toast-in .35s var(--ease); pointer-events: auto; }.flash-message > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }.flash-message button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; color: #69758b; border: 0; background: transparent; }.flash-message button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }.flash-success { color: #53e9ba; border-color: rgba(34, 211, 155, .25); background: rgba(8, 40, 34, .94); }.flash-danger { color: #ff8da2; border-color: rgba(240, 93, 120, .25); background: rgba(47, 16, 26, .95); }.flash-warning { color: #ffc66d; border-color: rgba(246, 170, 60, .28); background: rgba(48, 34, 13, .95); }.flash-info { color: #65dff1; border-color: rgba(19, 200, 229, .25); }.flash-message.is-hiding { animation: toast-out .22s ease forwards; }
.alert { color: var(--muted-strong); border: 1px solid var(--line); border-radius: 11px; background: rgba(20, 29, 48, .8); }.alert-info { color: #94e8f5; border-color: rgba(19, 200, 229, .22); background: rgba(13, 57, 67, .28); }.alert-warning { color: #ffd28c; border-color: rgba(246, 170, 60, .24); background: rgba(86, 55, 10, .22); }.alert-danger { color: #ff9caf; border-color: rgba(240, 93, 120, .24); background: rgba(89, 22, 38, .22); }
dialog { width: min(520px, calc(100vw - 30px)); padding: 0; color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius); background: #111827; box-shadow: 0 25px 70px rgba(0, 0, 0, .58); }.dialog-warning { padding: 12px; color: #ffd28c; border-radius: 8px; background: rgba(246, 170, 60, .09); }dialog::backdrop { background: rgba(3, 6, 13, .78); backdrop-filter: blur(6px); }dialog form { display: grid; gap: 14px; padding: 25px; }

.login-shell { width: min(440px, 100%); animation: login-rise .7s var(--ease); }.login-card { position: relative; width: 100%; padding: 34px; overflow: hidden; border-radius: 24px; background: linear-gradient(145deg, rgba(19, 27, 46, .92), rgba(10, 15, 27, .9)); box-shadow: 0 30px 90px rgba(0, 0, 0, .42), 0 0 80px rgba(87, 72, 213, .08); }.login-card::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(145deg, rgba(165, 156, 255, .38), rgba(93, 76, 215, .05) 45%, rgba(20, 202, 229, .18)); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }.login-kicker { display: flex; align-items: center; justify-content: center; gap: 7px; width: fit-content; margin: 0 auto 14px; padding: 4px 9px; color: #a7a0ff; border: 1px solid rgba(118, 105, 255, .3); border-radius: 99px; background: rgba(108, 99, 255, .09); font-size: 9px; font-weight: 700; letter-spacing: .08em; }.login-kicker i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }.login-emblem { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 14px; color: #aaa3ff; border: 1px solid rgba(125, 112, 255, .35); border-radius: 15px; background: linear-gradient(145deg, rgba(104, 89, 235, .25), rgba(81, 62, 193, .12)); box-shadow: 0 8px 28px rgba(63, 47, 166, .22); }.login-emblem svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; }.login-heading { margin: 0 0 24px; text-align: center; }.login-heading h1 { font-size: 25px; }.login-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }.login-card form { display: grid; gap: 16px; }.field-group { display: grid; gap: 7px; }.field-group label { color: var(--muted-strong); font-size: 12px; font-weight: 600; }.input-shell { position: relative; }.input-shell > svg { position: absolute; z-index: 2; top: 50%; left: 13px; width: 18px; height: 18px; color: #66738a; fill: none; stroke: currentColor; stroke-width: 1.7; transform: translateY(-50%); transition: color .2s ease; }.input-shell .form-control { height: 48px; padding-right: 44px; padding-left: 43px; }.input-shell:focus-within > svg { color: #aaa3ff; }.password-toggle { position: absolute; z-index: 3; top: 50%; right: 7px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: #718097; border: 0; border-radius: 8px; background: transparent; transform: translateY(-50%); }.password-toggle:hover { color: #b6afff; background: rgba(108, 99, 255, .08); }.password-toggle svg { grid-area: 1/1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }.password-toggle .eye-off { display: none; }.password-toggle[aria-pressed="true"] .eye-on { display: none; }.password-toggle[aria-pressed="true"] .eye-off { display: block; }.field-group.has-error { animation: shake .35s ease; }.field-group.has-error .form-control { border-color: rgba(240, 93, 120, .72); box-shadow: 0 0 0 3px rgba(240, 93, 120, .09); }.login-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.remember-switch { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; cursor: pointer; }.remember-switch input { position: absolute; opacity: 0; pointer-events: none; }.switch-track { position: relative; width: 34px; height: 19px; border: 1px solid rgba(139, 151, 180, .26); border-radius: 99px; background: rgba(72, 82, 105, .35); transition: background .2s ease, border-color .2s ease; }.switch-track i { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #9aa5b7; transition: transform .22s var(--ease), background .2s ease; }.remember-switch input:checked + .switch-track { border-color: rgba(123, 111, 255, .7); background: rgba(108, 99, 255, .55); }.remember-switch input:checked + .switch-track i { background: #fff; transform: translateX(15px); }.remember-switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px rgba(108, 99, 255, .2); }.secure-note { display: inline-flex; align-items: center; gap: 5px; color: #5e6b81; font-size: 10px; }.secure-note svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }.login-submit { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; height: 48px; overflow: hidden; color: #fff; border: 0; background: linear-gradient(100deg, #6d64f5, #5942e0); box-shadow: 0 12px 30px rgba(78, 57, 207, .32); }.login-submit::before { content: ""; position: absolute; inset: -40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent); transform: translateX(-75%) rotate(18deg); transition: transform .7s ease; }.login-submit:hover::before { transform: translateX(75%) rotate(18deg); }.login-submit > * { position: relative; }.login-submit > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }.button-loading { display: none; align-items: center; gap: 7px; }.button-loading i { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }.login-submit.is-loading .button-label, .login-submit.is-loading > svg { display: none; }.login-submit.is-loading .button-loading { display: inline-flex; }.quick-fill { padding-top: 18px; margin-top: 20px; border-top: 1px dashed var(--line); }.quick-fill-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; color: var(--muted-strong); border: 0; background: transparent; font-size: 12px; }.quick-fill-toggle span { display: flex; align-items: center; gap: 7px; }.quick-fill-toggle svg { width: 15px; height: 15px; fill: none; stroke: #ffd166; stroke-width: 1.7; }.quick-fill-toggle small { color: #5d697e; }.quick-fill-drawer { display: grid; grid-template-rows: 0fr; gap: 8px; opacity: 0; transition: grid-template-rows .3s var(--ease), opacity .3s ease, margin .3s ease; }.quick-fill-drawer > * { overflow: hidden; }.quick-fill.is-open .quick-fill-drawer { grid-template-rows: 1fr 1fr; margin-top: 12px; opacity: 1; }.quick-fill-drawer button { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 54px; padding: 8px 10px; color: var(--muted-strong); border: 1px solid var(--line); border-radius: 10px; background: rgba(5, 9, 18, .36); text-align: left; }.quick-fill-drawer button:hover { border-color: var(--line-strong); background: rgba(108, 99, 255, .06); }.quick-fill-drawer b, .quick-fill-drawer small { display: block; }.quick-fill-drawer b { font-size: 11px; }.quick-fill-drawer small { color: #667287; font-size: 10px; }.quick-fill-drawer em { color: #858fa1; font-size: 10px; font-style: normal; }.quick-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: 11px; font-weight: 700; }.quick-icon.admin { color: #bca8ff; background: rgba(143, 92, 246, .16); }.quick-icon.tester { color: #59dff1; background: rgba(19, 200, 229, .13); }.login-security { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 20px; color: #59667b; font-size: 10px; }.login-security svg { width: 13px; height: 13px; fill: none; stroke: var(--green); stroke-width: 1.8; }

.quick-fill-drawer { grid-template-rows: none; max-height: 0; overflow: hidden; transition: max-height .35s var(--ease), opacity .3s ease, margin .3s ease; }
.quick-fill.is-open .quick-fill-drawer { grid-template-rows: none; max-height: 130px; }
.management-table { min-width: 900px; }
.registry-table { min-width: 860px; }
.registry-filter { display: grid !important; grid-template-columns: minmax(220px, 1fr) auto auto auto; gap: 10px; margin-bottom: 24px; }
.registry-title { margin-bottom: 14px; }
.page-size-label { display: flex !important; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; }.page-size-label select { width: 72px; padding: 8px; }.bulk-toolbar { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 0 14px; color: var(--muted); }.bulk-toolbar > span { margin-right: auto; font-size: 12px; }.bulk-toolbar .btn:disabled { opacity: .45; cursor: not-allowed; }.registry-table th:first-child, .registry-table td:first-child { width: 44px; text-align: center; }.batch-edit-list { display: grid; gap: 12px; max-height: min(52vh, 540px); overflow-y: auto; padding-right: 4px; }.batch-edit-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr); gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(5, 9, 18, .24); }.batch-edit-row label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.user-cell { display: flex; align-items: center; gap: 10px; }
.user-cell .account-avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; }
.user-cell strong, .user-cell small { display: block; }
.user-cell small { margin-top: 1px; color: var(--muted); font-size: 10px; }
.table-actions, .dialog-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dialog-actions { justify-content: flex-end; margin-top: 4px; }
.protected-label { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.protected-label svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.disabled-row { opacity: .56; }
.disabled-row:hover { opacity: .72; }
.public-open-page .auth-content { align-items: center; }.public-open-shell { width: min(1040px, 100%); }.public-open-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; align-items: stretch; }.public-open-card, .public-history-card { padding: 34px; border: 1px solid var(--line-strong); border-radius: 24px; background: linear-gradient(145deg, rgba(19, 27, 46, .95), rgba(10, 15, 27, .93)); box-shadow: 0 30px 90px rgba(0, 0, 0, .42), 0 0 80px rgba(87, 72, 213, .1); }.public-open-card h1 { margin: 14px 0 6px; font-size: 28px; }.public-open-card > p, .public-history-card p { color: var(--muted); }.public-open-card form { display: grid; gap: 12px; margin-top: 24px; }.public-open-card form > label { display: grid; gap: 7px; color: var(--muted-strong); font-size: 12px; font-weight: 600; }.public-open-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-top: 18px; color: #b7b1ff; border: 1px solid rgba(125, 112, 255, .35); border-radius: 15px; background: rgba(104, 89, 235, .18); }.public-open-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; }.public-open-submit { width: 100%; min-height: 46px; margin-top: 6px; }.public-open-submit:disabled { color: #d8e1f1; border-color: rgba(34, 211, 155, .24); background: rgba(17, 104, 82, .48); opacity: 1; cursor: not-allowed; box-shadow: none; }.public-open-note { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; }.public-duration-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }.public-duration-options button { padding: 8px 5px; color: #bdb8ff; border: 1px solid rgba(126, 115, 255, .3); border-radius: 9px; background: rgba(108, 99, 255, .08); }.public-duration-options button:hover { color: #fff; border-color: var(--primary); background: rgba(108, 99, 255, .18); }.overnight-note { display: flex; gap: 9px; align-items: center; padding: 11px 13px; margin-top: 18px; color: #ffd28c; border: 1px solid rgba(246, 170, 60, .22); border-radius: 10px; background: rgba(246, 170, 60, .08); font-size: 12px; }.overnight-note svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }.public-history-card { min-height: 520px; }.public-history-card h2 { margin: 4px 0; }.public-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.public-history-heading > strong { padding: 6px 10px; color: #57e2b7; border: 1px solid rgba(34, 211, 155, .2); border-radius: 99px; background: rgba(34, 211, 155, .08); font-size: 12px; white-space: nowrap; }.public-history-state { display: grid; place-items: center; min-height: 300px; margin-top: 22px; color: var(--muted); border: 1px dashed var(--line); border-radius: 13px; text-align: center; }.public-history-list { display: grid; gap: 10px; margin-top: 22px; }.public-history-item { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: rgba(5, 9, 18, .3); }.public-history-item span { display: block; color: var(--muted); font-size: 11px; }.public-history-item strong { display: block; margin-top: 4px; color: var(--text); font-size: 13px; }
.sidebar-toggle, .sidebar-overlay { display: none; }.sidebar-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; }.menu-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: auto; color: #fff; border-radius: 99px; background: var(--red); font-size: 10px; }.global-reminder-error { position: sticky; top: 8px; z-index: 20; }

@keyframes ambient-drift { to { transform: translate3d(2.5%, -2%, 0) scale(1.06); } }
@keyframes login-rise { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateX(16px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(16px); } }
@keyframes shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ripple { to { opacity: 0; transform: scale(18); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }