:root {
  --blue-deep:#0758c7;
  --blue:#078de0;
  --cyan:#18afd3;
  --green:#11bd55;
  --orange:#ff9b0b;
  --ink:#172033;
  --muted:#8490a2;
  --canvas:#eef3f8;
  --font-level-1:36px;
  --font-level-2:17px;
  --font-level-3:14px;
  --font-level-4:12px;
}

* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { background:var(--canvas); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
button,input,select { font:inherit; }
button,select { cursor:pointer; }

.login-shell { min-height:100vh; display:grid; place-items:center; padding:26px; overflow:hidden; background:radial-gradient(circle at 12% 14%,rgba(73,211,255,.3),transparent 28%),linear-gradient(135deg,#032c78 0%,#075fc0 48%,#08a4c8 100%); }
.login-shell::before { content:""; position:fixed; inset:0; opacity:.38; pointer-events:none; background-image:linear-gradient(90deg,transparent 0 94%,rgba(119,231,255,.22) 94% 95%,transparent 95%),linear-gradient(0deg,transparent 0 91%,rgba(164,238,255,.18) 91% 92%,transparent 92%),radial-gradient(circle at 15% 24%,rgba(210,250,255,.9) 0 1px,transparent 1.7px); background-size:72px 72px,72px 72px,25px 25px; }
.login-card { position:relative; z-index:1; width:min(980px,100%); display:grid; grid-template-columns:.95fr 1.05fr; overflow:hidden; border:1px solid rgba(255,255,255,.52); border-radius:30px; background:rgba(255,255,255,.96); box-shadow:0 30px 90px rgba(0,25,77,.36); }
.login-brand { display:flex; flex-direction:column; justify-content:center; padding:42px; color:#fff; background:linear-gradient(145deg,#043a9a,#087ec8 64%,#08a9c9); }
.login-logo { width:190px; height:108px; display:grid; place-items:center; margin-bottom:30px; padding:10px 14px; overflow:hidden; border-radius:20px; background:#fff; box-shadow:0 16px 34px rgba(0,31,83,.26); }
.login-logo img { width:100%; height:100%; object-fit:contain; }
.login-brand p { margin:0 0 10px; color:#c9f2ff; font-size:12px; font-weight:900; letter-spacing:.1em; text-shadow:0 2px 5px rgba(0,22,63,.55); }
.login-brand h1 { max-width:360px; font-size:38px; line-height:1.05; }
.login-brand>span { margin-top:15px; color:#d9f5ff; font-size:13px; font-weight:700; line-height:1.5; }
.login-form { display:flex; flex-direction:column; justify-content:center; gap:14px; padding:42px 38px; }
.login-form label { display:flex; flex-direction:column; gap:7px; }
.login-form label span { color:#526077; font-size:12px; font-weight:900; }
.login-form input { height:48px; padding:0 14px; border:1px solid #dbe3eb; border-radius:13px; outline:0; color:#1e2d44; background:#f9fbfd; font-size:13px; font-weight:700; }
.login-form input:focus { border-color:#1b9bd4; box-shadow:0 0 0 4px rgba(13,150,207,.1); }
.login-form>button { height:48px; display:flex; align-items:center; justify-content:center; gap:9px; margin-top:2px; border:0; border-radius:13px; color:#fff; background:linear-gradient(135deg,#10c65b,#08a948); font-size:13px; font-weight:900; box-shadow:0 9px 20px rgba(11,175,78,.22); }
.login-form>button span { font-size:18px; }
.login-error { margin:0; padding:9px 11px; border-radius:9px; color:#c73d3d; background:#fff0f0; font-size:11px; font-weight:800; }

.admin-shell { min-height:100vh; padding:24px; background:radial-gradient(circle at 8% 0%,#d9efff 0,transparent 28%),var(--canvas); }
.admin-frame { width:min(1180px,100%); min-height:calc(100vh - 48px); margin:0 auto; overflow:hidden; border-radius:28px; background:#f6f8fb; box-shadow:0 24px 65px rgba(29,64,111,.16); }
.admin-header { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:27px 34px; color:#fff; background:linear-gradient(122deg,#043a9a 0%,#056bc7 45%,#08a4c8 100%); }
.admin-header::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.38; background-image:linear-gradient(90deg,transparent 0 94%,rgba(119,231,255,.2) 94% 95%,transparent 95%),linear-gradient(0deg,transparent 0 91%,rgba(164,238,255,.14) 91% 92%,transparent 92%),radial-gradient(circle at 15% 24%,rgba(184,244,255,.8) 0 1px,transparent 1.7px); background-size:72px 72px,72px 72px,24px 24px; }
.admin-brand { min-width:0; display:flex; align-items:center; gap:18px; }.admin-logo { width:142px; height:82px; flex:0 0 142px; display:grid; place-items:center; padding:8px 11px; overflow:hidden; border-radius:17px; background:#fff; box-shadow:0 13px 30px rgba(0,24,70,.28); }.admin-logo img { width:100%; height:100%; object-fit:contain; }.admin-brand>div:last-child { padding-left:18px; border-left:1px solid rgba(184,238,255,.42); }.admin-brand p { margin:0 0 5px; color:#caf3ff; font-size:10px; font-weight:900; letter-spacing:.09em; }.admin-brand h1 { font-size:30px; }.admin-brand>div>span { display:block; margin-top:7px; color:#daf6ff; font-size:11px; font-weight:700; }
.admin-session { display:flex; align-items:center; gap:10px; padding:7px; border:1px solid rgba(255,255,255,.2); border-radius:16px; background:rgba(0,35,99,.3); }.admin-session>span { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:#075caf; background:#fff; font-size:10px; font-weight:900; }.admin-session div { min-width:0; }.admin-session small,.admin-session strong { display:block; white-space:nowrap; }.admin-session small { color:#aeeeff; font-size:8px; font-weight:900; letter-spacing:.08em; }.admin-session strong { margin-top:2px; font-size:11px; }.admin-session button { height:38px; margin-left:7px; padding:0 13px; border:1px solid rgba(255,255,255,.22); border-radius:10px; color:#fff; background:rgba(3,39,103,.36); font-size:10px; font-weight:900; }
.admin-content { padding:22px 26px 28px; }.admin-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }.admin-stats article { display:flex; align-items:center; gap:13px; padding:15px 17px; border:1px solid #e7edf3; border-radius:17px; background:#fff; box-shadow:0 7px 18px rgba(37,60,91,.06); }.admin-stats article>span { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:#087bc5; background:#e6f6ff; font-size:20px; font-weight:900; }.admin-stats strong,.admin-stats small { display:block; }.admin-stats strong { color:#18263b; font-size:24px; line-height:1; }.admin-stats small { margin-top:4px; color:#7b8798; font-size:10px; font-weight:800; }
.admin-grid { margin-top:15px; display:grid; grid-template-columns:minmax(330px,.82fr) minmax(430px,1.18fr); gap:15px; }.create-account-card,.account-list-card { min-width:0; padding:19px; border:1px solid #e4ebf2; border-radius:20px; background:#fff; box-shadow:0 9px 25px rgba(41,63,90,.07); }.section-title { display:flex; align-items:center; gap:10px; margin-bottom:16px; }.section-title>span { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:#fff; background:linear-gradient(135deg,#0875c8,#12a8d2); font-size:18px; font-weight:900; }.section-title small { display:block; margin-bottom:2px; color:#1196bc; font-size:8px; font-weight:900; letter-spacing:.11em; }.section-title h2 { margin:0; color:#1b293d; font-size:16px; }
.create-account-card form { display:flex; flex-direction:column; gap:13px; }.create-account-card label { display:flex; flex-direction:column; gap:6px; }.create-account-card label>span,.create-account-card legend { color:#59667a; font-size:10px; font-weight:900; }.create-account-card input { width:100%; height:43px; padding:0 12px; border:1px solid #dfe6ed; border-radius:11px; outline:0; color:#26354b; background:#fafcfe; font-size:11px; font-weight:700; }.create-account-card input:focus { border-color:#31a5df; box-shadow:0 0 0 3px rgba(16,145,221,.1); }.admin-form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.create-account-card fieldset { margin:0; padding:0; border:0; }.create-account-card legend { margin-bottom:7px; }.role-choice { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.role-choice button { min-height:82px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:11px; border:1px solid #e1e7ee; border-radius:13px; color:#596579; background:#fafcfe; text-align:left; }.role-choice button>span { margin-bottom:3px; color:#0b89ca; font-size:17px; }.role-choice b { font-size:10px; }.role-choice small { margin-top:3px; color:#8c97a6; font-size:8px; line-height:1.35; }.role-choice button.active { border-color:#24a5dc; color:#0668ad; background:#eaf8ff; box-shadow:0 5px 14px rgba(20,143,200,.1); }.create-account-button { height:44px; display:flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:12px; color:#fff; background:linear-gradient(135deg,#10c65b,#08a948); font-size:11px; font-weight:900; box-shadow:0 8px 17px rgba(11,175,78,.2); }
.managed-account-list { max-height:430px; display:flex; flex-direction:column; gap:8px; overflow:auto; padding-right:3px; }.managed-account-list article { display:grid; grid-template-columns:38px minmax(0,1fr) auto 30px; align-items:center; gap:9px; padding:10px; border:1px solid #e7ecf1; border-radius:13px; background:#fbfcfe; }.managed-avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:#0875bd; background:#e4f5ff; font-size:9px; font-weight:900; }.managed-info { min-width:0; }.managed-info strong,.managed-info small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.managed-info strong { color:#26354a; font-size:10px; }.managed-info small { margin-top:3px; color:#8793a2; font-size:8px; }.role-badge { padding:5px 8px; border-radius:99px; font-size:8px; font-weight:900; }.role-badge.employer { color:#075fa8; background:#e1f2ff; }.role-badge.recipient { color:#078a45; background:#e3f8eb; }.delete-account { width:28px; height:28px; border:1px solid #ffd0d0; border-radius:9px; color:#d24747; background:#fff4f4; font-size:16px; }

.page-shell { min-height:100vh; padding:24px; background:radial-gradient(circle at 8% 0%,#d9efff 0,transparent 28%),var(--canvas); }
.app-frame { width:min(1240px,100%); min-height:calc(100vh - 48px); margin:0 auto; overflow:hidden; border-radius:28px; background:#f7f8fa; box-shadow:0 24px 65px rgba(29,64,111,.16); }
.blue-header { position:relative; isolation:isolate; overflow:hidden; padding:32px 42px 27px; color:#fff; border-radius:0 0 52px 52px; background:linear-gradient(122deg,#043a9a 0%,#056bc7 42%,#048fcf 72%,#0aa7ca 100%); }
.blue-header::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.42; background-image:linear-gradient(90deg,transparent 0 94%,rgba(119,231,255,.2) 94% 95%,transparent 95%),linear-gradient(0deg,transparent 0 91%,rgba(164,238,255,.14) 91% 92%,transparent 92%),radial-gradient(circle at 15% 24%,rgba(184,244,255,.8) 0 1px,transparent 1.7px),radial-gradient(circle at 72% 67%,rgba(137,235,255,.7) 0 1px,transparent 1.7px); background-size:72px 72px,72px 72px,24px 24px,31px 31px; mask-image:linear-gradient(90deg,rgba(0,0,0,.42),#000 65%,rgba(0,0,0,.55)); }
.blue-header::after { content:""; position:absolute; z-index:-1; width:520px; height:520px; right:-150px; top:-330px; border:1px solid rgba(156,239,255,.2); border-radius:50%; background:radial-gradient(circle,rgba(108,222,255,.2),transparent 64%); box-shadow:0 0 0 52px rgba(122,226,255,.035),0 0 0 104px rgba(122,226,255,.025); }
.header-line { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.brand-heading { display:flex; min-width:0; align-items:center; gap:22px; }
.logo-crop { position:relative; width:178px; height:102px; flex:0 0 178px; display:grid; place-items:center; overflow:hidden; padding:10px 14px; border:1px solid rgba(255,255,255,.78); border-radius:20px; background:rgba(255,255,255,.96); box-shadow:0 16px 38px rgba(0,25,78,.32),inset 0 0 0 1px rgba(6,105,189,.07); backdrop-filter:blur(8px); }
.logo-crop img { display:block; width:100%; height:100%; object-fit:contain; }
.brand-copy { min-width:0; padding-left:22px; border-left:1px solid rgba(180,235,255,.42); }
.overline { margin:0 0 7px; color:#d9f6ff; font-size:var(--font-level-3); font-weight:900; letter-spacing:.095em; text-shadow:0 2px 7px rgba(0,20,58,.78); }
h1 { margin:0; font-size:var(--font-level-1); line-height:1.05; letter-spacing:-.8px; text-shadow:0 4px 12px rgba(0,20,58,.72); }
.date-line { width:max-content; margin:11px 0 0; display:flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid rgba(198,241,255,.24); border-radius:99px; color:#e4f8ff; background:rgba(1,38,105,.28); font-size:var(--font-level-4); font-weight:700; text-shadow:0 2px 5px rgba(0,20,58,.7); box-shadow:0 5px 14px rgba(0,26,73,.12); }
.date-line span { color:#72e6ff; font-size:11px; }
.system-status { display:flex; align-items:center; gap:8px; padding:10px 15px; border-radius:99px; color:#e8fff1; background:rgba(4,45,117,.5); font-size:var(--font-level-4); font-weight:800; text-shadow:0 2px 5px rgba(0,20,58,.65); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 8px 18px rgba(0,27,80,.15); }
.system-status span { width:7px; height:7px; border-radius:50%; background:#32e779; box-shadow:0 0 0 4px rgba(50,231,121,.15); }
.account-bar { position:relative; z-index:2; width:min(520px,100%); margin:18px auto 0; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:7px 8px 7px 10px; border:1px solid rgba(201,243,255,.22); border-radius:17px; background:rgba(0,36,104,.32); box-shadow:0 10px 24px rgba(0,27,80,.16); backdrop-filter:blur(9px); }
.logged-account { min-width:0; display:flex; align-items:center; gap:10px; }.logged-account>span { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border-radius:11px; color:#075caf; background:#fff; font-size:10px; font-weight:900; }.logged-account div { min-width:0; }.logged-account small,.logged-account strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.logged-account small { margin-bottom:2px; color:#aeeeff; font-size:8px; font-weight:900; letter-spacing:.08em; }.logged-account strong { color:#fff; font-size:12px; text-shadow:0 2px 5px rgba(0,20,58,.55); }
.account-bar>button { height:36px; padding:0 13px; border:1px solid rgba(255,255,255,.24); border-radius:11px; color:#fff; background:rgba(3,39,103,.36); font-size:10px; font-weight:900; }.account-bar>button span { margin-left:4px; }
.stats { position:relative; z-index:1; width:min(610px,72%); margin:16px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.stats article { min-height:100px; display:grid; grid-template-columns:auto auto; grid-template-rows:1fr 1fr; align-items:center; justify-content:center; column-gap:12px; padding:16px; border-radius:20px; background:linear-gradient(145deg,rgba(34,180,230,.38),rgba(0,90,190,.36)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 12px 28px rgba(0,60,145,.12); }
.line-icon { grid-row:span 2; color:#fff; font-size:21px; letter-spacing:-8px; transform:translateX(-4px); }.line-icon.check,.line-icon.calendar { width:29px; height:29px; display:grid; place-items:center; border:2px solid #fff; border-radius:50%; letter-spacing:0; transform:none; font-size:16px; }.line-icon.calendar { border-radius:4px; font-size:20px; line-height:1; }
.stats strong { align-self:end; font-size:30px; line-height:1; text-shadow:0 3px 8px rgba(0,25,70,.45); }.stats article>span:last-child { align-self:start; margin-top:7px; color:#d4f2ff; font-size:var(--font-level-4); font-weight:700; white-space:nowrap; text-shadow:0 2px 5px rgba(0,25,70,.55); }

.workspace { padding:18px 26px 20px; }
.action-panel { display:grid; grid-template-columns:185px 1fr 170px; gap:12px; padding:13px; border-radius:20px; background:#fff; box-shadow:0 9px 25px rgba(41,63,90,.08); }
.select-control,.search-control { height:44px; display:flex; align-items:center; gap:9px; padding:0 14px; border:1px solid #e2e7ed; border-radius:13px; background:#fff; }
.select-control .dot { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:#19bad1; box-shadow:0 0 0 4px #e0f8fb; }
.select-control select { width:100%; border:0; outline:0; color:#344055; background:transparent; font-size:var(--font-level-4); font-weight:700; }
.search-control { color:#a2aab5; }.search-control input { width:100%; border:0; outline:0; color:#344055; font-size:var(--font-level-4); }.search-control input::placeholder { color:#aab1bd; }
.new-ticket { height:44px; border:0; border-radius:13px; color:#fff; background:linear-gradient(135deg,#10c75b,#09ae47); font-size:var(--font-level-4); font-weight:800; text-shadow:0 2px 4px rgba(0,57,27,.4); box-shadow:0 7px 15px rgba(15,186,80,.24); transition:.18s ease; }.new-ticket:hover { transform:translateY(-1px); box-shadow:0 10px 20px rgba(15,186,80,.3); }.new-ticket span { margin-right:6px; }
.recipient-panel { display:flex; flex-direction:column; gap:13px; padding:14px 16px 16px; border-radius:20px; background:#fff; box-shadow:0 9px 25px rgba(41,63,90,.08); }
.recipient-panel-top { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.recipient-panel-top>.select-control { width:185px; flex:0 0 185px; }
.recipient-identity { min-width:0; display:flex; align-items:center; gap:13px; }
.recipient-identity>span { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border-radius:15px; color:#0871c7; background:linear-gradient(145deg,#d9f3ff,#edfaff); font-size:var(--font-level-3); font-weight:900; box-shadow:inset 0 0 0 1px rgba(8,129,199,.08); }
.recipient-identity div { min-width:0; }
.recipient-identity small { display:block; margin-bottom:2px; color:#1498bd; font-size:9px; font-weight:900; letter-spacing:.12em; }
.recipient-identity strong { display:block; color:#1d293b; font-size:var(--font-level-2); }
.recipient-identity p { margin:3px 0 0; color:#718095; font-size:var(--font-level-4); }
.recipient-directory { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.recipient-directory button { min-width:0; height:48px; display:flex; align-items:center; gap:9px; padding:6px 10px; border:1px solid #e3e9ef; border-radius:13px; color:#4e5b70; background:#f9fbfd; transition:.18s ease; }
.recipient-directory button>span { width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center; border-radius:9px; color:#1384c5; background:#e5f5ff; font-size:9px; font-weight:900; }
.recipient-directory button strong { overflow:hidden; font-size:11px; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.recipient-directory button.active { border-color:#2aa7de; color:#075ea8; background:#eaf8ff; box-shadow:0 6px 15px rgba(13,135,195,.13); }
.recipient-directory button.active>span { color:#fff; background:linear-gradient(135deg,#0870c9,#14a8d0); }
.approval-panel { margin-top:15px; padding:16px; border:1px solid #e4ebf2; border-radius:20px; background:#fff; box-shadow:0 9px 25px rgba(41,63,90,.08); }
.approval-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.approval-heading small { display:block; margin-bottom:3px; color:#1595b9; font-size:9px; font-weight:900; letter-spacing:.11em; }
.approval-heading h2 { margin:0; color:#1c2a3e; font-size:var(--font-level-2); }
.approval-heading>span { padding:7px 12px; border-radius:99px; color:#a86100; background:#fff2d9; font-size:10px; font-weight:900; }
.approval-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.approval-item { min-width:0; display:grid; grid-template-columns:115px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px; border:1px solid #e8edf2; border-radius:15px; background:#fbfcfe; }
.approval-person { display:flex; align-items:center; gap:8px; }
.approval-person>span { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:10px; color:#0c76bb; background:#e3f4ff; font-size:9px; font-weight:900; }
.approval-person div { min-width:0; }.approval-person strong { display:block; overflow:hidden; color:#253247; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.approval-person small { color:#9aa5b3; font-size:8px; font-weight:800; }
.approval-content { min-width:0; }.approval-content p { display:-webkit-box; overflow:hidden; margin:0 0 3px; color:#3d4c61; font-size:10px; font-weight:700; line-height:1.4; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.approval-content small { display:block; overflow:hidden; color:#909aa8; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.approval-actions { display:flex; gap:5px; }.approval-actions button { height:34px; padding:0 10px; border-radius:9px; font-size:9px; font-weight:900; }.approval-actions .reject { border:1px solid #ffc8c8; color:#cf3b3b; background:#fff3f3; }.approval-actions .accept { border:0; color:#fff; background:linear-gradient(135deg,#18bd63,#0aa94f); box-shadow:0 5px 11px rgba(13,175,82,.2); }
.review-result { padding:6px 9px; border-radius:99px; font-size:9px; font-weight:900; }.review-result.accepted { color:#0a9448; background:#e4f8ec; }.review-result.rejected { color:#cf3b3b; background:#fff0f0; }
.review-chip { padding:3px 6px; border-radius:99px; font-size:8px; font-weight:900; }.review-chip.menunggu { color:#a86100; background:#fff2d9; }.review-chip.diterima { color:#0a9448; background:#e4f8ec; }.review-chip.ditolak { color:#cf3b3b; background:#fff0f0; }
.status-button.submit-work.ready { background:linear-gradient(135deg,#0c86d1,#0870c2); }.status-button.submit-work.menunggu { color:#8e5700; background:#ffe7b3; text-shadow:none; box-shadow:none; }.status-button.submit-work.diterima { background:linear-gradient(135deg,#1bc66a,#0daf51); }.status-button.submit-work.ditolak { background:linear-gradient(135deg,#ef6d64,#d94a43); }
.status-button:disabled { cursor:default; transform:none; }
.submission-task { padding:12px 13px; border:1px solid #dce8f1; border-radius:12px; background:#f6fbff; }.submission-task small { color:#148bb4; font-size:9px; font-weight:900; }.submission-task p { margin:4px 0 0; color:#435167; font-size:11px; line-height:1.45; }
.status-choice { margin:0; padding:0; border:0; }.status-choice legend { margin-bottom:8px; color:#586478; font-size:var(--font-level-4); font-weight:800; }.status-choice>div { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.status-choice button { height:62px; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid #dfe6ed; border-radius:14px; color:#647084; background:#fafcfe; font-size:var(--font-level-4); font-weight:900; transition:.18s ease; }.status-choice button span { font-size:18px; }.status-choice .pending-choice.active { border-color:#ffad36; color:#a65f00; background:#fff3de; box-shadow:0 6px 15px rgba(255,157,15,.14); }.status-choice .complete-choice.active { border-color:#22b965; color:#078b42; background:#e9f9ef; box-shadow:0 6px 15px rgba(20,181,92,.14); }
.notice { position:fixed; z-index:5; top:22px; left:50%; transform:translateX(-50%); padding:11px 17px; border-radius:12px; color:#fff; background:#14243f; font-size:11px; box-shadow:0 12px 30px rgba(16,33,63,.25); }
.modal-backdrop { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:20px; background:rgba(13,27,52,.58); backdrop-filter:blur(5px); }
.ticket-modal { width:min(510px,100%); overflow:hidden; border-radius:24px; background:#fff; box-shadow:0 28px 75px rgba(6,21,48,.3); animation:modal-in .18s ease-out; }
@keyframes modal-in { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:21px 23px; color:#fff; background:linear-gradient(135deg,#075bc9,#08a2d9); }
.modal-head>div { display:flex; align-items:center; gap:12px; }.modal-icon { width:39px; height:39px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.16); font-size:22px; }.modal-head p { margin:0 0 3px; color:#bdeaff; font-size:10px; font-weight:800; letter-spacing:.12em; }.modal-head h2 { margin:0; font-size:var(--font-level-2); }.modal-head>button { width:34px; height:34px; border:0; border-radius:50%; color:#fff; background:rgba(0,56,130,.25); font-size:20px; }
.ticket-modal form { display:flex; flex-direction:column; gap:14px; padding:22px 23px 23px; }.ticket-modal label { display:flex; flex-direction:column; gap:7px; }.ticket-modal label>span { color:#586478; font-size:var(--font-level-4); font-weight:800; }.ticket-modal input,.ticket-modal select,.ticket-modal textarea { width:100%; border:1px solid #dfe5ec; border-radius:11px; outline:0; color:#273349; background:#fbfcfe; font-size:var(--font-level-4); }.ticket-modal input,.ticket-modal select { height:42px; padding:0 12px; }.ticket-modal textarea { resize:vertical; min-height:88px; padding:11px 12px; font-family:inherit; }.ticket-modal input:focus,.ticket-modal select:focus,.ticket-modal textarea:focus { border-color:#3aa7e6; box-shadow:0 0 0 3px rgba(16,145,221,.1); }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.form-actions { display:flex; justify-content:flex-end; gap:9px; padding-top:3px; }.form-actions button { min-width:110px; height:41px; border-radius:11px; font-size:var(--font-level-4); font-weight:800; }.form-actions .cancel { border:1px solid #dde3ea; color:#657083; background:#fff; }.form-actions .save { border:0; color:#fff; background:linear-gradient(135deg,#10c75b,#09ae47); box-shadow:0 6px 14px rgba(15,186,80,.22); }

.ticket-grid { margin-top:15px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.task-balloon-list { margin-top:16px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 18px; padding:2px 8px 10px; }
.task-balloon { position:relative; min-height:96px; display:flex; align-items:center; padding:20px 22px; border:1px solid #dcecf5; border-radius:24px 24px 24px 7px; background:linear-gradient(145deg,#fff,#f3fbff); box-shadow:0 10px 24px rgba(35,73,108,.09); }
.task-balloon::before { content:""; position:absolute; left:-1px; bottom:-12px; width:22px; height:22px; background:#f6fcff; clip-path:polygon(0 0,100% 0,0 100%); filter:drop-shadow(-1px 1px 0 #dcecf5); }
.task-balloon:nth-child(even) { border-color:#d8e7fb; border-radius:24px 24px 7px 24px; background:linear-gradient(145deg,#f2f8ff,#e9f4ff); }
.task-balloon:nth-child(even)::before { right:-1px; left:auto; background:#edf6ff; clip-path:polygon(0 0,100% 0,100% 100%); filter:drop-shadow(1px 1px 0 #d8e7fb); }
.task-balloon p { margin:0; color:#33465d; font-size:var(--font-level-3); font-weight:700; line-height:1.55; }
.ticket-card { min-height:112px; display:grid; grid-template-columns:74px minmax(0,1fr) 112px; align-items:center; gap:14px; padding:14px 16px; border:1px solid #eef1f4; border-radius:20px; background:#fff; box-shadow:0 8px 20px rgba(39,58,84,.065); }
.ticket-card:last-child:nth-child(odd) { grid-column:1/-1; }
.ticket-number { width:68px; height:68px; display:grid; place-items:center; border-radius:18px; color:#0aa8d1; background:linear-gradient(145deg,#daf5ff,#ecfbff); font-size:25px; font-weight:800; }
.ticket-info { min-width:0; }.person-line { display:flex; align-items:center; gap:7px; }.mini-avatar { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; color:#1074c5; background:#e3f2ff; font-size:9px; font-weight:800; }.person-line strong { overflow:hidden; color:#1d2635; font-size:var(--font-level-3); text-overflow:ellipsis; white-space:nowrap; }
.ticket-meta { margin:6px 0 5px; display:flex; align-items:center; gap:10px; }.ticket-code { padding:4px 8px; border-radius:5px; color:#117d9b; background:#e0f7fc; font-size:10px; font-weight:800; }.ticket-date { display:flex; align-items:center; gap:4px; color:#7e8998; font-size:10px; font-weight:600; }.ticket-date i { font-size:12px; font-style:normal; }.ticket-info p { display:-webkit-box; overflow:hidden; margin:0; color:#566276; font-size:var(--font-level-4); line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.status-button { min-height:45px; padding:0 11px; border:0; border-radius:13px; color:#fff; font-size:11px; font-weight:800; text-shadow:0 2px 4px rgba(0,0,0,.3); box-shadow:0 6px 12px rgba(0,0,0,.1); transition:.18s ease; }.status-button:hover { transform:translateY(-1px); }.status-button.pending { background:linear-gradient(135deg,#ffa711,#ff8c08); }.status-button.completed { background:linear-gradient(135deg,#1bc66a,#0daf51); }
.empty { margin-top:16px; padding:35px; border-radius:20px; color:#7e8998; background:#fff; text-align:center; font-size:12px; }
.recent-bar { margin-top:14px; display:flex; align-items:center; justify-content:center; gap:18px; color:#6f7b8d; font-size:var(--font-level-4); font-weight:700; }.recent-bar>div { display:flex; gap:8px; }.recent-bar button { padding:7px 15px; border:0; border-radius:99px; color:#0d9449; background:#e1f9eb; font-size:11px; font-weight:800; }

@media (max-width:800px) {
  :root { --font-level-1:31px; --font-level-2:16px; --font-level-3:12px; --font-level-4:11px; }
  .admin-shell { padding:0; }.admin-frame { min-height:100vh; border-radius:0; box-shadow:none; }.admin-header { align-items:flex-start; padding:23px 20px; }.admin-logo { width:112px; height:68px; flex-basis:112px; }.admin-brand { gap:11px; }.admin-brand>div:last-child { padding-left:11px; }.admin-brand h1 { font-size:24px; }.admin-session { flex-direction:column; align-items:stretch; }.admin-session>span,.admin-session div { display:none; }.admin-session button { margin:0; }.admin-content { padding:17px 16px 24px; }.admin-grid { grid-template-columns:1fr; }.managed-account-list { max-height:none; }
  .login-card { grid-template-columns:1fr; }
  .login-brand { grid-row:auto; padding:28px 32px; }
  .login-logo { width:150px; height:86px; margin-bottom:20px; }
  .login-brand h1 { font-size:31px; }
  .page-shell { padding:0; }
  .app-frame { min-height:100vh; border-radius:0; box-shadow:none; }
  .blue-header { padding:24px 22px 30px; border-radius:0 0 46px 46px; }
  .brand-heading { gap:14px; }.logo-crop { width:145px; height:85px; flex-basis:145px; padding:9px 11px; border-radius:16px; }.brand-copy { padding-left:14px; }
  .overline { max-width:260px; letter-spacing:.08em; }
  .account-bar { margin-top:18px; }
  .stats { width:100%; gap:10px; }
  .stats article { min-height:94px; padding:12px 7px; column-gap:7px; border-radius:18px; }
  .stats article>span:last-child { font-size:var(--font-level-4); }
  .workspace { padding:18px 16px 22px; }
  .action-panel { grid-template-columns:1fr 1fr; }
  .search-control { grid-column:1/-1; grid-row:2; }
  .recipient-panel { align-items:stretch; }
  .recipient-identity p { max-width:360px; }
  .recipient-directory { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .approval-list { grid-template-columns:1fr; }
  .ticket-grid { grid-template-columns:1fr; }
  .task-balloon-list { grid-template-columns:1fr; }
  .ticket-card:last-child:nth-child(odd) { grid-column:auto; }
  .recent-bar { flex-direction:column; gap:9px; }
}

@media (max-width:480px) {
  :root { --font-level-1:25px; --font-level-2:15px; --font-level-3:10px; --font-level-4:10px; }
  .admin-header { gap:10px; padding:18px 14px; }.admin-logo { width:88px; height:56px; flex-basis:88px; padding:6px; border-radius:12px; }.admin-brand p { font-size:7px; }.admin-brand h1 { font-size:19px; }.admin-brand>div>span { display:none; }.admin-session button { height:34px; padding:0 9px; font-size:9px; }.admin-content { padding:14px 11px 20px; }.admin-stats { gap:7px; }.admin-stats article { flex-direction:column; gap:4px; padding:10px 5px; text-align:center; }.admin-stats article>span { width:31px; height:31px; border-radius:10px; font-size:15px; }.admin-stats strong { font-size:20px; }.admin-stats small { font-size:8px; }.create-account-card,.account-list-card { padding:15px; }.admin-form-row,.role-choice { grid-template-columns:1fr; }.managed-account-list article { grid-template-columns:35px minmax(0,1fr) 28px; }.role-badge { grid-column:2; width:max-content; }.delete-account { grid-column:3; grid-row:1/3; }.managed-avatar { width:35px; height:35px; }
  .login-shell { align-items:start; padding:0; }
  .login-card { min-height:100vh; border:0; border-radius:0; }
  .login-brand { padding:25px 20px 23px; }
  .login-logo { width:132px; height:75px; margin-bottom:16px; border-radius:15px; }
  .login-brand p { font-size:9px; }.login-brand h1 { font-size:27px; }.login-brand>span { margin-top:9px; font-size:11px; }
  .login-form { padding:24px 20px; }
  .blue-header { padding:22px 18px 28px; }
  .header-line { align-items:flex-start; }.brand-heading { width:100%; align-items:center; gap:10px; }.logo-crop { width:112px; height:68px; flex-basis:112px; padding:7px 8px; border-radius:12px; }.brand-copy { padding-left:10px; }.brand-heading .date-line { margin-top:7px; padding:5px 9px; }.overline { max-width:180px; margin-bottom:5px; letter-spacing:.045em; }.system-status { position:absolute; right:0; bottom:-39px; padding:7px 9px; font-size:9px; }
  .account-bar { width:100%; margin-top:50px; }
  .stats { margin-top:14px; }
  .stats article { display:flex; min-height:106px; flex-direction:column; gap:5px; }
  .line-icon { grid-row:auto; height:25px; }.line-icon.check,.line-icon.calendar { width:25px; height:25px; font-size:13px; }
  .stats strong { font-size:23px; }.stats article>span:last-child { margin-top:0; }
  .action-panel { grid-template-columns:1fr; }
  .search-control { grid-column:auto; grid-row:auto; }
  .recipient-panel { align-items:stretch; flex-direction:column; }
  .recipient-panel-top { align-items:stretch; flex-direction:column; }
  .recipient-panel-top>.select-control { width:100%; flex-basis:44px; }
  .recipient-identity p { line-height:1.4; }
  .recipient-directory { gap:7px; }
  .recipient-directory button { height:46px; padding:5px 7px; }
  .approval-panel { padding:13px; }
  .approval-item { grid-template-columns:1fr; gap:8px; }
  .approval-actions { justify-content:flex-end; }
  .approval-actions button { min-width:82px; }
  .review-result { width:max-content; }
  .ticket-card { grid-template-columns:60px minmax(0,1fr) 92px; gap:10px; padding:13px 12px; border-radius:18px; }
  .task-balloon-list { padding-right:3px; padding-left:3px; }
  .task-balloon { min-height:88px; padding:17px 18px; }
  .ticket-number { width:56px; height:66px; border-radius:16px; font-size:22px; }
  .status-button { min-height:42px; padding:0 7px; font-size:10px; }
  .ticket-info p { -webkit-line-clamp:3; }
  .recent-bar>div { flex-wrap:wrap; justify-content:center; }
  .modal-backdrop { align-items:end; padding:0; }.ticket-modal { width:100%; border-radius:25px 25px 0 0; }.modal-head { padding:18px; }.ticket-modal form { padding:18px; }.form-row { grid-template-columns:1fr; }.form-actions button { flex:1; }
}

@media (min-width:801px) and (max-height:820px) {
  .page-shell { padding:14px; }
  .app-frame { min-height:calc(100vh - 28px); }
  .blue-header { padding-top:20px; padding-bottom:20px; }
  .stats { margin-top:14px; }.stats article { min-height:82px; }
  .workspace { padding-top:13px; }.ticket-card { min-height:96px; padding-top:10px; padding-bottom:10px; }.ticket-number { height:60px; }
}