:root {
    --creka-navy: #17233b;
    --creka-blue: #275efe;
    --creka-cyan: #58c7d4;
    --creka-bg: #f4f7fb;
    --creka-border: #dfe6ef;
    --creka-text: #1e293b;
    --creka-muted: #64748b;
    --creka-danger: #dc3f52;
}

body.login-page {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 16% 20%, rgba(88,199,212,.22), transparent 32%), linear-gradient(135deg, #101a2e, #213b67);
    color: #fff;
}
.login-layout { width: min(100% - 40px, 1040px); display: grid; grid-template-columns: minmax(0, 1.15fr) 410px; align-items: center; gap: 80px; }
.login-intro h1 { margin: 18px 0; font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 850; line-height: 1.08; letter-spacing: -.055em; }
.login-intro p { max-width: 540px; margin: 0; color: #c6d3e8; font-size: 1.05rem; line-height: 1.7; }
.login-badge { display: inline-flex; padding: 7px 11px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #8fe0e9; font-size: .72rem; font-weight: 900; letter-spacing: .14em; }
.login-card { width: 100% !important; max-width: none !important; margin: 0 !important; border: 0; border-radius: 22px; box-shadow: 0 28px 80px rgba(3,10,24,.35); color: var(--creka-text); }
.login-card .card-header { display: flex; align-items: center; gap: 13px; padding: 27px 30px 10px; }
.login-card .card-header div { display: flex; flex-direction: column; }
.login-card .card-header strong { font-size: 1.2rem; }
.login-card .card-header small { margin-top: 2px; color: var(--creka-muted); font-weight: 600; }
.login-card .card-body { padding: 20px 30px 30px; }
.login-logo { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(145deg, var(--creka-blue), #54b9d0); color: #fff; font-size: 1.35rem; font-weight: 900; box-shadow: 0 9px 24px rgba(39,94,254,.25); }
.login-card .form-control { height: 52px; padding: .75rem 1rem; }
.login-button { height: 50px; margin-top: 8px; }
.login-help { margin: 17px 0 0; color: #94a3b8; font-size: .78rem; text-align: center; }

body.creka-admin,
body#page-top { background: var(--creka-bg); color: var(--creka-text); }
.navbar.bg-dark { background: linear-gradient(112deg, #111b30, #233962) !important; min-height: 64px; box-shadow: 0 8px 30px rgba(15, 23, 42, .16); }
.navbar-brand { font-weight: 800; letter-spacing: -.02em; }
.navbar .nav-link { border-radius: 9px; margin: 0 2px; padding: .65rem .8rem !important; }
.navbar .nav-item.active .nav-link, .navbar .nav-link:hover { background: rgba(255,255,255,.12); }
.sidebar { background: #fff !important; border-right: 1px solid var(--creka-border); box-shadow: 6px 0 24px rgba(15,23,42,.03); }
.sidebar .nav-link { color: #526176 !important; }
.sidebar .nav-item.active .nav-link { color: var(--creka-blue) !important; font-weight: 700; }
#content-wrapper { background: var(--creka-bg); }
.container-fluid { padding: 28px 32px; }
.card, .panel { border: 1px solid var(--creka-border); border-radius: 16px; box-shadow: 0 10px 28px rgba(15,23,42,.05); background: #fff; overflow: hidden; }
.card-header { border: 0; background: #fff; font-size: 1rem; font-weight: 800; padding: 1.2rem 1.4rem; }
.table { color: var(--creka-text); }
.table thead th { border-top: 0; border-bottom: 1px solid var(--creka-border); background: #f8fafc; color: #475569; font-size: .78rem; letter-spacing: .02em; }
.table td { vertical-align: middle; border-color: #edf2f7; }
.btn { border-radius: 9px; font-weight: 700; }
.btn-primary { background: var(--creka-blue); border-color: var(--creka-blue); }
.form-control { border-color: #d5deea; border-radius: 9px; }
.form-control:focus { border-color: var(--creka-blue); box-shadow: 0 0 0 3px rgba(39,94,254,.12); }
.modal-content { border: 0; border-radius: 18px; box-shadow: 0 22px 70px rgba(15,23,42,.28); }
.modal-header, .modal-footer { border-color: var(--creka-border); }

.app-shell { min-height: calc(100vh - 64px); background: radial-gradient(circle at 95% 0, rgba(88,199,212,.13), transparent 32%), var(--creka-bg); }
.admin-main { max-width: 1500px; margin: 0 auto; padding-top: 36px; padding-bottom: 72px; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.page-heading h1 { margin: 2px 0 8px; font-size: 2rem; font-weight: 850; letter-spacing: -.04em; }
.page-heading p { margin: 0; color: var(--creka-muted); }
.eyebrow { font-size: .72rem; font-weight: 900; color: var(--creka-blue); letter-spacing: .14em; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.metric-card { padding: 20px 22px; border: 1px solid var(--creka-border); border-radius: 15px; background: linear-gradient(145deg, #fff, #f8fbff); }
.metric-card span { display: block; color: var(--creka-muted); font-size: .82rem; font-weight: 700; }
.metric-card strong { display: block; margin-top: 5px; font-size: 1.85rem; line-height: 1; }
.metric-card.warning strong { color: #e07137; }
.filter-panel { padding: 16px; margin-bottom: 18px; }
.device-filter { display: grid; grid-template-columns: minmax(280px, 1fr) 180px auto auto; gap: 10px; }
.search-field { display: flex; align-items: center; gap: 9px; margin: 0; padding: 0 13px; border: 1px solid #d5deea; border-radius: 9px; color: #94a3b8; }
.search-field input { width: 100%; height: 38px; border: 0; outline: 0; background: transparent; }
.device-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.device-card { border: 1px solid var(--creka-border); border-radius: 17px; background: #fff; box-shadow: 0 10px 25px rgba(15,23,42,.05); overflow: hidden; }
.device-card > header { display: flex; justify-content: space-between; gap: 18px; padding: 20px 20px 16px; border-bottom: 1px solid #edf2f7; }
.account-line { display: flex; align-items: center; gap: 9px; }
.account-line strong { font-size: 1.05rem; }
.device-card header p { margin: 6px 0 3px; color: #475569; }
.device-card header small { color: #94a3b8; }
.badge-soft { background: #edf2ff; color: #3456c8; font-weight: 700; }
.capacity { min-width: 68px; height: 48px; display: flex; align-items: baseline; justify-content: center; gap: 3px; padding: 10px; border-radius: 13px; background: #eafbf7; color: #087a65; }
.capacity.full { background: #fff1ee; color: #cf482f; }
.capacity strong { font-size: 1.35rem; }
.capacity span { font-size: .78rem; }
.device-list { min-height: 76px; padding: 12px 20px; }
.device-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 9px; border-radius: 9px; }
.device-row:hover { background: #f7f9fc; }
.device-row i { width: 25px; color: var(--creka-blue); }
.device-row code { color: #334155; font-size: .84rem; }
.icon-button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: #94a3b8; cursor: pointer; }
.icon-button:hover { background: #fff0f2; color: var(--creka-danger); }
.empty-device { padding: 15px 4px; color: #94a3b8; text-align: center; }
.device-card > footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px 20px; background: #f8fafc; border-top: 1px solid #edf2f7; }
.device-card footer label { display: flex; align-items: center; gap: 10px; margin: 0; color: #64748b; font-size: .8rem; font-weight: 700; }
.device-card footer select { width: 78px; }
.empty-result { grid-column: 1/-1; padding: 60px; color: #94a3b8; text-align: center; }
.password-panel { max-width: 620px; padding: 26px; }
.admin-toast { position: fixed; z-index: 2000; right: 24px; bottom: 24px; transform: translateY(20px); opacity: 0; padding: 13px 18px; border-radius: 11px; background: #12213c; color: #fff; box-shadow: 0 15px 40px rgba(15,23,42,.25); pointer-events: none; transition: .2s ease; }
.admin-toast.show { transform: translateY(0); opacity: 1; }
.admin-toast.error { background: #b82f43; }

@media (max-width: 980px) {
    .device-grid { grid-template-columns: 1fr; }
    .device-filter { grid-template-columns: 1fr 160px; }
    .device-filter .btn { width: 100%; }
}
@media (max-width: 640px) {
    .container-fluid, .admin-main { padding-left: 16px; padding-right: 16px; }
    .page-heading { flex-direction: column; }
    .metric-grid { grid-template-columns: 1fr; }
    .device-filter { grid-template-columns: 1fr; }
    .device-card > header { flex-direction: column; }
    .capacity { align-self: flex-start; }
    .login-layout { grid-template-columns: 1fr; gap: 28px; padding: 28px 0; }
    .login-intro h1 { font-size: 2.3rem; }
    .login-intro p { display: none; }
}