:root { color-scheme: light; --ink: #08233b; --muted: #607488; --line: #c9e2ef; --sky: #008dd0; --sky-dark: #006aab; --cyan: #2ad7d4; --surface: #fff; --soft: #eef9fd; --danger: #c83c4e; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--ink); background: #edf8fc; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.eyebrow { margin: 0 0 8px; color: var(--sky); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #8ad8ef; border-radius: 13px; color: #006da9; background: linear-gradient(145deg, #fff, #a5eff5); box-shadow: 0 10px 22px #005d8b33; font-size: 21px; font-weight: 900; }.brand strong, .brand small { display: block; }.brand strong { font-size: 15px; }.brand small { margin-top: 3px; color: #7991a5; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.admin-login { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); min-height: 100vh; }.login-brand { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(32px, 5vw, 72px); color: white; background: radial-gradient(circle at 80% 22%, #39dce657, transparent 24rem), linear-gradient(145deg, #062d58, #007ab5 65%, #14a9c7); }.login-brand .brand small { color: #aee8f2; }.login-brand > div { max-width: 710px; margin: auto 0; padding: 70px 0; }.login-brand .eyebrow { color: #5de7e2; }.login-brand h1 { margin: 0; font-size: clamp(48px, 6vw, 82px); line-height: .98; letter-spacing: -.07em; }.login-brand > div > p:last-child { max-width: 52ch; margin: 28px 0 0; color: #d9eef5; font-size: 14px; line-height: 1.8; }.login-panel { display: grid; place-items: center; padding: 30px; background: radial-gradient(circle at 80% 10%, #b9edfa, transparent 25rem), #f7fcfe; }.login-card { width: min(430px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 22px; background: #ffffffed; box-shadow: 0 30px 80px #225f7d24; }.login-card h2 { margin: 0; font-size: 29px; letter-spacing: -.05em; }.login-card > p:not(.eyebrow) { margin: 9px 0 25px; color: var(--muted); font-size: 12px; }.login-card label { display: block; margin-top: 15px; }.login-card label span, .form-grid label span, .user-actions label span { display: block; margin-bottom: 7px; color: #3b5266; font-size: 11px; font-weight: 800; }
input { width: 100%; height: 45px; padding: 0 13px; border: 1px solid #afcedd; border-radius: 10px; color: var(--ink); background: #fbfeff; outline: none; transition: border-color .15s, box-shadow .15s; } input:focus { border-color: #26acd9; box-shadow: 0 0 0 4px #38bbe72a; background: #fff; }
.primary-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px; margin-top: 22px; padding: 0 16px; border: 0; border-radius: 10px; color: white; background: linear-gradient(105deg, #0879ba, #00a5cf); box-shadow: 0 12px 24px #007db337; font-size: 13px; font-weight: 850; }.primary-button:disabled, .user-actions button:disabled { opacity: .55; cursor: wait; }.primary-button b { font-size: 19px; }.back-link { display: block; margin-top: 18px; color: var(--muted); font-size: 11px; text-align: center; text-decoration: none; }.form-message { margin: 13px 0 0; padding: 10px 12px; border: 1px solid #efb1bb; border-radius: 9px; color: var(--danger); background: #fff2f4; font-size: 11px; line-height: 1.55; }
.admin-app { display: grid; grid-template-columns: 235px minmax(0, 1fr); min-height: 100vh; }.admin-sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 28px 20px; border-right: 1px solid #b8dcea; background: linear-gradient(180deg, #e3f7fd, #f7fcfe); }.admin-sidebar nav { display: grid; gap: 7px; margin-top: 44px; }.admin-sidebar nav a { display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 0 12px; border-radius: 9px; color: #486274; font-size: 12px; font-weight: 750; text-decoration: none; }.admin-sidebar nav a span { color: #1595c5; font-size: 9px; }.admin-sidebar nav a:hover, .admin-sidebar nav a.is-active { color: #06395d; background: #bdefff; }.sidebar-foot { margin-top: auto; padding: 15px; border: 1px solid #b9dce9; border-radius: 12px; background: #fff9; }.sidebar-foot small, .sidebar-foot strong { display: block; }.sidebar-foot small { color: var(--muted); font-size: 9px; }.sidebar-foot strong { margin-top: 5px; font-size: 12px; }.sidebar-foot button { margin-top: 12px; padding: 0; border: 0; color: #b23e50; background: transparent; font-size: 10px; }
.admin-main { min-width: 0; padding: 30px clamp(22px, 4vw, 62px) 70px; background-image: linear-gradient(#a7d1e133 1px, transparent 1px), linear-gradient(90deg, #a7d1e133 1px, transparent 1px); background-size: 40px 40px; }.admin-topbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid var(--line); }.admin-topbar h1 { margin: 0; font-size: 30px; letter-spacing: -.055em; }.admin-topbar a { padding: 9px 12px; border: 1px solid #9fcbdc; border-radius: 8px; color: #0877a9; background: #fff; font-size: 11px; font-weight: 800; text-decoration: none; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-top: 23px; }.metric-grid article { min-width: 0; padding: 18px; border: 1px solid #bfdeea; border-radius: 14px; background: #ffffffda; box-shadow: 0 14px 34px #336d8420; }.metric-grid span, .metric-grid small { display: block; color: var(--muted); font-size: 10px; }.metric-grid strong { display: block; margin: 9px 0 6px; color: #07395d; font-size: 27px; letter-spacing: -.045em; }.metric-grid strong b { font: inherit; }
.admin-card { margin-top: 20px; padding: 25px; border: 1px solid #b9dae7; border-radius: 17px; background: #ffffffeb; box-shadow: 0 18px 46px #285f7920; }.section-heading { display: flex; align-items: start; justify-content: space-between; gap: 22px; padding-bottom: 20px; border-bottom: 1px solid #d2e5ec; }.section-heading h2 { margin: 0; font-size: 22px; letter-spacing: -.045em; }.section-heading > div > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 11px; }.section-heading > span { padding: 6px 9px; border: 1px solid #7fd6e8; border-radius: 999px; color: #047b9e; background: #e2fbff; font-size: 9px; font-weight: 850; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-top: 20px; }.create-card .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.form-grid label em { color: #8ca0ae; font-size: 9px; font-style: normal; font-weight: 500; }.form-submit { align-self: end; margin: 0; }
.credential-result { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding: 14px 16px; border: 1px solid #60cad9; border-radius: 11px; background: linear-gradient(105deg, #e6fcfb, #e9f8ff); }.credential-result small, .credential-result strong { display: block; }.credential-result small { color: #4e7480; font-size: 9px; }.credential-result strong { margin-top: 6px; white-space: pre-line; font-size: 12px; line-height: 1.6; }.credential-result button { flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 1px solid #48b4cb; border-radius: 8px; color: #05718b; background: #fff; font-size: 10px; font-weight: 800; }
.account-heading { align-items: end; }.search-box { width: min(250px, 100%); }.search-box span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; }.search-box input { height: 39px; }.list-status { margin: 22px 0 0; color: var(--muted); font-size: 11px; }.user-list { display: grid; gap: 12px; margin-top: 19px; }.user-card { overflow: hidden; border: 1px solid #c5dfe9; border-radius: 13px; background: #fbfeff; }.user-card > header { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 15px 17px; }.user-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #057a9e; background: linear-gradient(145deg, #bdf5f6, #d9efff); font-size: 12px; font-weight: 900; }.user-card header strong, .user-card header small { display: block; }.user-card header strong { font-size: 13px; }.user-card header small { margin-top: 4px; color: var(--muted); font-size: 9px; }.user-role { padding: 5px 8px; border-radius: 999px; color: #16815e; background: #e3f8ef; font-size: 8px; font-weight: 900; }.user-role.is-admin { color: #006d9d; background: #dff6ff; }.user-usage { display: flex; align-items: baseline; gap: 10px; padding: 13px 17px; border-top: 1px solid #deebf0; border-bottom: 1px solid #deebf0; background: #f3fbfe; }.user-usage > span, .user-usage small { color: var(--muted); font-size: 9px; }.user-usage strong { color: #076f9d; font-size: 21px; }.user-usage strong i { font-size: 10px; font-style: normal; }.user-usage strong.unlimited { font-size: 16px; }.user-actions { display: grid; grid-template-columns: 1.35fr .65fr; gap: 14px; padding: 15px 17px; }.user-actions form { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(140px, 1fr) auto; align-items: end; gap: 9px; }.user-actions form[data-action="password"] { grid-template-columns: 1fr auto; }.user-actions input { height: 38px; font-size: 10px; }.user-actions button { min-height: 38px; padding: 0 12px; border: 1px solid #82bfd5; border-radius: 8px; color: #0879a5; background: white; font-size: 10px; font-weight: 800; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: min(380px, calc(100vw - 30px)); padding: 13px 16px; border: 1px solid #65c8bd; border-radius: 10px; color: #165d50; background: #ecfffa; box-shadow: 0 18px 50px #174c5b35; font-size: 11px; }.toast[data-status="error"] { border-color: #e09da8; color: #9e3041; background: #fff1f3; }
@media (max-width: 1100px) { .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.user-actions { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .admin-login { grid-template-columns: 1fr; }.login-brand { min-height: 390px; padding: 28px; }.login-brand > div { padding: 50px 0; }.login-brand h1 { font-size: 48px; }.login-panel { padding: 20px 14px 34px; }.login-card { margin-top: -50px; }.admin-app { display: block; }.admin-sidebar { position: static; display: block; height: auto; padding: 17px; }.admin-sidebar nav { display: none; }.sidebar-foot { display: flex; align-items: center; gap: 9px; margin-top: 17px; }.sidebar-foot strong { margin: 0; }.sidebar-foot button { margin: 0 0 0 auto; }.admin-main { padding: 24px 14px 50px; }.account-heading { align-items: stretch; flex-direction: column; }.search-box { width: 100%; } }
@media (max-width: 600px) { .metric-grid, .form-grid { grid-template-columns: 1fr; }.admin-card { padding: 18px 14px; }.section-heading { align-items: flex-start; flex-direction: column; }.credential-result { align-items: stretch; flex-direction: column; }.credential-result button { width: 100%; }.user-actions form, .user-actions form[data-action="password"] { grid-template-columns: 1fr; }.user-actions button { width: 100%; }.user-usage { align-items: flex-start; flex-direction: column; gap: 4px; }.admin-topbar h1 { font-size: 25px; } }

.user-log-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 17px; border-bottom: 1px solid #deebf0; background: #fafdff; }.user-log-toolbar strong, .user-log-toolbar span { display: block; }.user-log-toolbar strong { font-size: 11px; }.user-log-toolbar span { margin-top: 4px; color: var(--muted); font-size: 9px; }.user-log-toolbar button { flex: 0 0 auto; min-height: 34px; padding: 0 11px; border: 1px solid #71bed8; border-radius: 8px; color: #06759f; background: white; font-size: 10px; font-weight: 850; }
.user-log-panel { padding: 18px; border-top: 1px solid #c5dfe9; background: linear-gradient(145deg, #f0faff, #fbfeff); }.log-loading, .log-error, .log-empty { margin: 0; padding: 13px; color: var(--muted); background: #fff; font-size: 10px; line-height: 1.6; }.log-error { color: var(--danger); background: #fff3f5; }
.user-log-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }.user-log-summary div { padding: 13px; border: 1px solid #c9e3ed; border-radius: 10px; background: #fff; }.user-log-summary span, .user-log-summary strong { display: block; }.user-log-summary span { color: var(--muted); font-size: 9px; }.user-log-summary strong { margin-top: 6px; color: #05749d; font-size: 17px; }
.recharge-section, .job-log-section { margin-top: 19px; }.recharge-section > h3, .job-log-section > h3 { margin: 0 0 10px; font-size: 12px; }.recharge-log { display: grid; gap: 7px; }.recharge-log > div { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid #d4e7ee; border-radius: 9px; background: #fff; }.recharge-log strong { color: #15815f; font-size: 11px; }.recharge-log span, .recharge-log time { color: var(--muted); font-size: 9px; }.recharge-log time { white-space: nowrap; }
.payment-section { margin-top: 19px; }.payment-section > h3 { margin: 0 0 10px; font-size: 12px; }.payment-log { display: grid; gap: 7px; }.payment-log > div { display: grid; grid-template-columns: 68px 68px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 10px 12px; border: 1px solid #d4e7ee; border-radius: 9px; background: white; }.payment-log strong { color: #0877a3; font-size: 11px; }.payment-log code, .payment-log time { color: var(--muted); font-size: 8px; }.payment-status { padding: 4px 6px; border-radius: 999px; color: #7d651d; background: #fff3c6; font-size: 8px; font-weight: 850; text-align: center; }.payment-status.is-paid { color: #137457; background: #ddf7ed; }
.job-log-section { display: grid; gap: 8px; }.job-log-section > h3 { margin-bottom: 2px; }.job-log { overflow: hidden; border: 1px solid #c8dfe8; border-radius: 10px; background: #fff; }.job-log > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding: 11px 13px; cursor: pointer; list-style: none; }.job-log > summary::-webkit-details-marker { display: none; }.job-log > summary > div { display: flex; align-items: center; gap: 9px; min-width: 0; }.job-log > summary strong { overflow: hidden; max-width: 280px; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.job-log > summary code { color: #617b8b; font-size: 8px; }.job-log > summary time { color: var(--muted); font-size: 8px; white-space: nowrap; }.job-status, .billing-state { flex: 0 0 auto; padding: 5px 7px; border-radius: 999px; font-size: 8px; font-weight: 900; }.job-status.is-succeeded, .billing-state.is-released { color: #137457; background: #ddf7ed; }.job-status.is-failed { color: #af3548; background: #ffebee; }.job-status.is-running, .job-status.is-queued, .billing-state.is-reserved { color: #0878a4; background: #def5ff; }.billing-state.is-consumed { color: #6d579b; background: #eee7ff; }.billing-state.is-none { color: #718390; background: #edf2f4; }
.job-log-body { padding: 15px; border-top: 1px solid #dce9ee; background: #fafdff; }.job-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid #d5e6ed; border-radius: 9px; background: #fff; }.job-facts div { padding: 10px; }.job-facts div:nth-child(n+4) { border-top: 1px solid #e1edf1; }.job-facts div:not(:nth-child(3n+1)) { border-left: 1px solid #e1edf1; }.job-facts dt { color: var(--muted); font-size: 8px; }.job-facts dd { margin: 5px 0 0; font-size: 10px; line-height: 1.45; }
.job-error { margin-top: 10px; padding: 11px 12px; border: 1px solid #efb4bd; border-radius: 9px; color: #922e3e; background: #fff1f3; }.job-error strong { font-size: 9px; }.job-error p { margin: 5px 0 0; font-size: 10px; line-height: 1.55; }.job-error code { display: inline-block; margin-top: 6px; color: #a35865; font-size: 8px; }
.job-log-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 11px; }.job-log-actions a, .job-log-actions button { display: inline-grid; min-height: 34px; place-items: center; padding: 0 11px; border: 1px solid #79bdd3; border-radius: 8px; color: #0877a3; background: white; font-size: 9px; font-weight: 850; text-decoration: none; }.job-log-actions button.is-primary { border-color: #087bb0; color: white; background: #087bb0; }.job-log-actions button:disabled { color: #71838d; border-color: #d1dfe4; background: #eef3f5; cursor: default; }
.event-log { margin-top: 15px; }.event-log h4 { margin: 0 0 8px; font-size: 10px; }.admin-event-list { display: grid; gap: 1px; margin: 0; padding: 0; overflow: hidden; border: 1px solid #d7e6eb; border-radius: 9px; background: #e2edf1; list-style: none; }.admin-event-list li { display: grid; grid-template-columns: 135px minmax(0, 1fr) 36px; gap: 10px; padding: 9px 10px; background: white; }.admin-event-list time, .admin-event-list em { color: var(--muted); font-size: 8px; font-style: normal; }.admin-event-list span { color: #4b6474; font-size: 9px; line-height: 1.5; }.admin-event-list span b { margin-right: 7px; color: #08759f; font-size: 8px; }.admin-event-list em { text-align: right; }.admin-event-list li.is-error span, .admin-event-list li.is-error span b { color: #a83244; }
@media (max-width: 760px) { .user-log-summary { grid-template-columns: 1fr; }.recharge-log > div { grid-template-columns: 75px 1fr; }.recharge-log time { grid-column: 2; }.job-log > summary, .job-log > summary > div { align-items: flex-start; flex-direction: column; }.job-log > summary code { word-break: break-all; }.job-facts { grid-template-columns: 1fr; }.job-facts div, .job-facts div:nth-child(n+4), .job-facts div:not(:nth-child(3n+1)) { border: 0; border-top: 1px solid #e1edf1; }.job-facts div:first-child { border-top: 0; }.admin-event-list li { grid-template-columns: 1fr 32px; }.admin-event-list time { grid-column: 1 / -1; }.job-log-actions { align-items: stretch; flex-direction: column; }.job-log-actions a, .job-log-actions button { width: 100%; }.user-log-toolbar { align-items: flex-start; flex-direction: column; }.user-log-toolbar button { width: 100%; } }
@media (max-width: 760px) { .payment-log > div { grid-template-columns: 60px 60px 1fr; }.payment-log time { grid-column: 3; } }

/* Account validity and renewal */
.account-expiry { display: inline-block !important; margin-top: 5px !important; padding: 3px 6px; border-radius: 5px; color: #187454 !important; background: #e6f8f1; font-size: 8px !important; font-weight: 800; }
.account-expiry.is-expired { color: #a62f43 !important; background: #ffe7eb; }
.account-expiry.is-permanent { color: #08739f !important; background: #e1f5fc; }
.user-role.is-expired { color: #a62f43; background: #ffe7eb; }
.user-actions { grid-template-columns: 1.25fr .75fr .75fr; }
.user-actions form[data-action="expiry"] { grid-template-columns: 1fr auto; }
@media (max-width: 1100px) { .create-card .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.user-actions { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .create-card .form-grid { grid-template-columns: 1fr; } }