:root {
    --ink: #17253d;
    --muted: #68758a;
    --line: #dce3ec;
    --paper: #f7f9fc;
    --white: #ffffff;
    --blue: #1769e0;
    --blue-dark: #0d4faf;
    --blue-soft: #eaf2ff;
    --coral: #ef775e;
    --shadow: 0 24px 70px rgba(28, 52, 87, .12);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'DM Sans', sans-serif; }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: 'Manrope', sans-serif; letter-spacing: 0; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 480px) 1fr; }
.login-panel { align-self: center; width: min(100% - 48px, 380px); margin: auto; padding: 48px 0; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 26px; border-radius: 12px; background: var(--ink); color: var(--white); font: 800 14px 'Manrope', sans-serif; letter-spacing: .04em; }
.eyebrow, .aside-label, .welcome-kicker { margin-bottom: 10px; color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.login-panel h1 { max-width: 310px; margin-bottom: 12px; font-size: clamp(28px, 4vw, 38px); line-height: 1.1; }
.login-intro { color: var(--muted); font-size: 15px; line-height: 1.6; }
.login-form { display: grid; gap: 9px; margin-top: 32px; }
.login-form label { margin-top: 8px; color: var(--ink); font-size: 13px; font-weight: 700; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-icon { position: absolute; left: 16px; color: #8c9ab0; font-weight: 700; }
.input-wrap input { width: 100%; min-height: 52px; border: 1px solid var(--line); border-radius: 9px; padding: 0 16px 0 42px; outline: none; background: var(--white); color: var(--ink); transition: border-color .18s, box-shadow .18s; }
.input-wrap input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(23, 105, 224, .12); }
.password-toggle { position: absolute; right: 10px; border: 0; padding: 8px; background: transparent; color: var(--blue-dark); cursor: pointer; font-size: 12px; font-weight: 700; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; border: 0; border-radius: 9px; cursor: pointer; font-weight: 700; transition: background .18s, transform .18s, opacity .18s; }
.button-primary { margin-top: 15px; background: var(--blue); color: var(--white); }
.button-primary:hover { background: var(--blue-dark); transform: translateY(-1px); }
.button:disabled { cursor: wait; opacity: .8; }
.button-spinner { display: none; width: 16px; height: 16px; margin-left: 8px; border: 2px solid rgba(255,255,255,.4); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; }
.is-loading .button-spinner { display: inline-block; }
.alert { margin-top: 22px; border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.45; }
.alert-error { border: 1px solid #f1c6bd; background: #fff4f1; color: #9b3d2b; }
.forgot-placeholder { margin: 22px 0 0; color: var(--muted); font-size: 12px; }
.login-footer { margin-top: 48px; color: #9aa6b8; font-size: 12px; }
.login-aside { position: relative; display: flex; min-height: 100vh; align-items: flex-end; overflow: hidden; padding: 10vw; background: var(--ink); color: var(--white); }
.login-aside::before { position: absolute; inset: 0; background: radial-gradient(circle at 75% 18%, rgba(23,105,224,.5), transparent 38%), linear-gradient(135deg, #17253d 0%, #102746 55%, #0c1b32 100%); content: ''; }
.aside-content { position: relative; z-index: 1; max-width: 460px; }
.aside-label { color: #8db7ff; }
.aside-content h2 { max-width: 450px; margin-bottom: 18px; font-size: clamp(38px, 5vw, 72px); line-height: 1.03; }
.aside-content p { max-width: 360px; color: #b6c4d9; font-size: 16px; line-height: 1.7; }
.aside-orbit { position: absolute; top: 15%; right: 12%; width: min(30vw, 360px); aspect-ratio: 1; border: 1px solid rgba(141,183,255,.28); border-radius: 50%; }
.aside-orbit::before, .aside-orbit::after { position: absolute; inset: 14%; border: 1px solid rgba(141,183,255,.18); border-radius: 50%; content: ''; }
.aside-orbit::after { inset: 29%; border-color: rgba(239,119,94,.35); }
.aside-orbit span { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 20px rgba(239,119,94,.7); }
.aside-orbit span:first-child { top: 12%; left: 18%; }.aside-orbit span:nth-child(2) { right: 9%; bottom: 25%; background: #8db7ff; }.aside-orbit span:last-child { bottom: 12%; left: 32%; width: 7px; height: 7px; }
.dashboard-shell, .status-shell { width: min(100% - 40px, 1060px); margin: 0 auto; padding: 48px 0; }
.dashboard-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dashboard-header h1 { margin-bottom: 0; font-size: clamp(27px, 5vw, 44px); }
.logout-link { color: var(--blue-dark); font-size: 14px; font-weight: 700; text-decoration: none; }
.welcome-card, .status-card { margin-top: 56px; border: 1px solid var(--line); border-radius: 14px; padding: clamp(26px, 6vw, 64px); background: var(--white); box-shadow: var(--shadow); }
.welcome-card h2 { margin-bottom: 12px; font-size: clamp(24px, 4vw, 38px); }.welcome-card p { color: var(--muted); }.welcome-card strong { color: var(--ink); }.muted { line-height: 1.6; }
.status-shell { display: grid; min-height: 100vh; place-items: center; }.status-card { width: min(100%, 620px); margin: 0; }.status-code { color: var(--coral); font: 800 clamp(48px, 10vw, 90px) 'Manrope', sans-serif; }.status-card h1 { font-size: clamp(26px, 5vw, 42px); }.status-card p { color: var(--muted); line-height: 1.6; }.status-card .button { padding: 0 22px; color: var(--white); text-decoration: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.app-shell { min-height: 100vh; background: radial-gradient(circle at 90% 0%, rgba(197, 224, 255, .65), transparent 34%), linear-gradient(145deg, #f7fbff 0%, #eef4f8 55%, #f8fafc 100%); }
.app-content { min-height: 100vh; padding: 22px clamp(16px, 4vw, 54px) 54px; }
.glass-panel { border: 1px solid rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .68); box-shadow: 0 18px 55px rgba(36, 63, 91, .08); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.app-header { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 16px; border-radius: 20px; padding: 12px 16px; }
.menu-button, .icon-button { border: 0; cursor: pointer; color: var(--ink); background: transparent; }
.menu-button { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: rgba(255,255,255,.65); font-size: 13px; font-weight: 700; }
.menu-lines { color: var(--blue); font-size: 20px; line-height: 1; }
.header-brand, .drawer-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 13px; letter-spacing: .08em; }
.header-brand strong { color: var(--blue); }.brand-symbol { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: var(--ink); color: white; font: 800 12px Manrope, sans-serif; letter-spacing: .03em; }
.header-actions { display: flex; align-items: center; gap: 12px; }.notification-button { position: relative; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.64); font-size: 22px; }.notification-button i { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }.user-summary { display: grid; gap: 3px; text-align: right; }.user-summary strong { font-size: 13px; }.user-summary span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue-dark); font-weight: 800; }
.dashboard-main, .module-main { width: min(100%, 1180px); margin: 0 auto; }.dashboard-main { padding-top: clamp(38px, 7vw, 82px); }.dashboard-intro { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }.dashboard-intro h1, .module-main h1 { margin-bottom: 10px; font-size: clamp(28px, 4vw, 46px); line-height: 1.08; }.intro-copy { margin: 0; color: var(--muted); }.status-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #cde9da; border-radius: 20px; padding: 9px 13px; background: #f0fbf4; color: #267447; font-size: 12px; font-weight: 700; white-space: nowrap; }.status-chip span { width: 7px; height: 7px; border-radius: 50%; background: #42ae68; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }.summary-card { min-height: 176px; border-radius: 18px; padding: 20px; transition: transform .2s ease, box-shadow .2s ease; }.summary-card:hover { transform: translateY(-3px); box-shadow: 0 22px 55px rgba(36, 63, 91, .13); }.card-heading { display: flex; align-items: start; justify-content: space-between; }.metric-icon, .module-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; }.metric-icon svg { width: 20px; height: 20px; }.metric-status { color: #9ba9b8; font-size: 10px; font-weight: 700; text-transform: uppercase; }.summary-card p { margin: 22px 0 4px; color: var(--muted); font-size: 13px; font-weight: 600; }.summary-card > strong { display: block; font: 800 29px Manrope, sans-serif; }.summary-card small { display: block; margin-top: 6px; color: #97a4b3; font-size: 11px; }.tone-blue { background: #e9f1ff; color: #3b72d8; }.tone-green { background: #e8f7ef; color: #399661; }.tone-orange { background: #fff1e4; color: #d77a27; }.tone-violet { background: #f0ecff; color: #7a62cd; }.tone-rose { background: #ffedf0; color: #d65f76; }.tone-teal { background: #e5f7f5; color: #319b92; }.tone-gold { background: #fff7db; color: #bb8b19; }.tone-slate { background: #eaf0f5; color: #60778e; }
.drawer-backdrop { position: fixed; z-index: 20; inset: 0; visibility: hidden; background: rgba(17, 35, 57, .34); opacity: 0; transition: opacity .25s ease, visibility .25s ease; }.navigation-drawer { position: fixed; z-index: 21; inset: 0 auto 0 0; display: flex; width: min(360px, 88vw); flex-direction: column; transform: translateX(-104%); border-right: 1px solid rgba(255,255,255,.7); padding: 24px 16px 20px; background: rgba(247, 251, 255, .86); box-shadow: 20px 0 60px rgba(25, 50, 80, .16); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); transition: transform .28s cubic-bezier(.2,.8,.2,1); }.menu-is-open .drawer-backdrop { visibility: visible; opacity: 1; }.menu-is-open .navigation-drawer { transform: translateX(0); }.drawer-topline { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 26px; }.drawer-brand { letter-spacing: 0; }.drawer-brand small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; letter-spacing: .04em; }.drawer-close { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.7); font-size: 25px; line-height: 1; }.drawer-label { margin: 0 12px 10px; color: #9aa8b7; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.drawer-nav { overflow-y: auto; }.nav-item, .drawer-account { display: flex; min-height: 50px; align-items: center; gap: 13px; border-radius: 13px; padding: 0 12px; color: #58697d; font-size: 14px; font-weight: 700; text-decoration: none; transition: color .18s, background .18s, transform .18s; }.nav-item:hover { transform: translateX(3px); color: var(--blue-dark); background: rgba(255,255,255,.7); }.nav-item.is-active { color: var(--blue-dark); background: var(--blue-soft); box-shadow: inset 3px 0 var(--blue); }.nav-icon { display: grid; width: 22px; height: 22px; place-items: center; flex: 0 0 22px; }.nav-icon svg { width: 20px; height: 20px; }.drawer-account { margin-top: auto; border-top: 1px solid rgba(220,227,236,.7); border-radius: 0; padding-top: 18px; color: var(--coral); }
.module-main { padding: clamp(40px, 7vw, 82px) 0; }.breadcrumb { display: inline-block; margin-bottom: 40px; color: var(--blue-dark); font-size: 13px; font-weight: 700; text-decoration: none; }.module-card { width: min(100%, 650px); margin-top: 34px; border-radius: 22px; padding: clamp(28px, 5vw, 56px); }.module-icon { margin-bottom: 24px; background: var(--blue-soft); color: var(--blue); font-size: 28px; }.module-card h2 { margin-bottom: 12px; font-size: clamp(22px, 4vw, 30px); }.module-card p { max-width: 520px; color: var(--muted); line-height: 1.7; }.module-card .button { padding: 0 20px; color: white; text-decoration: none; }
body:has(.app-shell) { background: #eef4f8; } body.menu-is-open { overflow: hidden; }
@media (max-width: 760px) { .login-shell { display: block; }.login-panel { width: min(100% - 40px, 420px); padding: 48px 0 38px; }.login-aside { min-height: 260px; padding: 44px 20px 40px; }.aside-content h2 { font-size: 34px; }.aside-content p { margin-bottom: 0; font-size: 14px; }.aside-orbit { top: -100px; right: -70px; width: 260px; opacity: .75; }.login-footer { margin-top: 36px; }.dashboard-shell, .status-shell { width: min(100% - 32px, 1060px); padding: 32px 0; }.dashboard-header { align-items: center; }.welcome-card { margin-top: 34px; } }
@media (max-width: 760px) { .app-content { padding: 12px 12px 34px; }.app-header { min-height: 64px; padding: 10px; border-radius: 16px; }.header-brand { font-size: 11px; }.header-brand .brand-symbol { width: 32px; height: 32px; }.user-summary { display: none; }.dashboard-intro { display: block; padding-top: 26px; }.dashboard-intro h1 { font-size: 30px; }.status-chip { margin-top: 20px; }.summary-grid { grid-template-columns: repeat(2, 1fr); gap: 11px; }.summary-card { min-height: 155px; padding: 15px; }.summary-card p { margin-top: 18px; font-size: 12px; }.summary-card > strong { font-size: 25px; }.metric-status { display: none; }.module-main { padding: 42px 6px; }.module-main h1 { font-size: 32px; }.module-card { padding: 28px 22px; } }
@media (max-width: 390px) { .menu-button { padding: 0 10px; }.header-brand { display: none; }.summary-grid { grid-template-columns: 1fr; }.summary-card { min-height: 138px; } }
.customer-main { width: min(100%, 1240px); margin: 0 auto; padding: 38px 0; }.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }.page-heading .breadcrumb { margin-bottom: 24px; }.page-heading h1 { margin-bottom: 8px; font-size: clamp(30px, 5vw, 46px); }.add-customer-button { padding: 0 18px; color: white; text-decoration: none; white-space: nowrap; }.customer-alert, .form-errors { border: 1px solid #bfe4cb; border-radius: 12px; margin-bottom: 16px; padding: 13px 16px; background: #effbf2; color: #287245; font-size: 13px; }.form-errors { display: grid; gap: 5px; border-color: #f0c8bf; background: #fff5f2; color: #a74632; }.customer-panel { overflow: hidden; border-radius: 20px; }.customer-toolbar { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(220,227,236,.7); padding: 18px; }.search-field { display: flex; min-height: 44px; flex: 1; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 11px; padding: 0 12px; background: rgba(255,255,255,.75); color: #8594a5; }.search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }.customer-toolbar select, .form-field select { min-height: 44px; border: 1px solid var(--line); border-radius: 11px; padding: 0 12px; background: rgba(255,255,255,.75); color: var(--ink); }.toolbar-button { min-height: 44px; padding: 0 16px; background: var(--ink); color: white; }.refresh-link { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 11px; color: var(--blue-dark); font-size: 22px; text-decoration: none; }.list-meta { display: flex; justify-content: space-between; padding: 18px 20px 8px; color: var(--muted); font-size: 12px; }.list-meta strong { color: var(--ink); font-size: 14px; }.wifi-registration-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(220,227,236,.
.wifi-profile-main { width: min(100%, 1160px); margin: 0 auto; padding: 18px 0 34px; }
.wifi-profile-shell { border: 1px solid rgba(220,227,236,.7); border-radius: 22px; padding: 22px; background: rgba(255,255,255,.72); box-shadow: 0 18px 55px rgba(36, 63, 91, .08); }
.wifi-profile-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-bottom: 20px; border: 1px solid rgba(220,227,236,.7); border-radius: 20px; padding: 20px 22px; background: rgba(244,247,252,.9); }
.wifi-profile-avatar { display: grid; width: 108px; height: 108px; overflow: hidden; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue-dark); font: 800 34px Manrope, sans-serif; box-shadow: inset 0 0 0 3px rgba(23,105,224,.08); }
.wifi-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wifi-profile-headline { min-width: 0; }
.wifi-profile-headline h1 { margin: 0 0 8px; font-size: clamp(25px, 3vw, 36px); line-height: 1.1; }
.profile-meta { margin: 0; color: var(--muted); font-size: 13px; }
.wifi-profile-actions { display: flex; grid-column: 2 / -1; justify-self: start; gap: 10px; margin-top: 8px; }
.wifi-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.wifi-profile-card { display: block; border: 1px solid rgba(220,227,236,.7); border-radius: 18px; padding: 22px; background: rgba(255,255,255,.68); }
.wifi-profile-card h2 { margin-bottom: 18px; font-size: 17px; }
.wifi-profile-detail-list { display: grid; gap: 0; margin: 0; }
.wifi-profile-detail-list div { display: grid; grid-template-columns: minmax(140px, 190px) minmax(0, 1fr); gap: 16px; border-top: 1px solid rgba(220,227,236,.7); padding: 11px 0; }
.wifi-profile-detail-list div:first-child { border-top: 0; }
.wifi-profile-detail-list dt { color: var(--muted); font-size: 12px; font-weight: 700; }
.wifi-profile-detail-list dd { margin: 0; color: var(--ink); font-weight: 600; line-height: 1.6; word-break: break-word; }
.wifi-gallery-section { margin-top: 22px; border-top: 1px solid rgba(220,227,236,.7); padding-top: 24px; }
.wifi-gallery-header { margin-bottom: 16px; }
.wifi-gallery-header h2 { margin: 0 0 4px; font-size: clamp(20px, 2vw, 26px); }
.wifi-photo-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.wifi-photo-card { overflow: hidden; margin: 0; border: 1px solid rgba(220,227,236,.7); border-radius: 16px; background: rgba(255,255,255,.8); }
.wifi-photo-card img { display: block; width: 100%; height: 190px; object-fit: cover; }
.wifi-empty-gallery { border: 1px dashed rgba(220,227,236,.8); border-radius: 16px; padding: 28px 18px; color: var(--muted); background: rgba(248,250,253,.7); text-align: center; }
.customer-photo-preview { display: grid; width: min(100%, 240px); overflow: hidden; border: 1px solid rgba(220,227,236,.8); border-radius: 14px; background: rgba(234,242,255,.7); }
.customer-photo-preview img { display: block; width: 100%; height: 180px; object-fit: cover; }
@media (max-width: 760px) { .wifi-profile-hero { grid-template-columns: auto minmax(0, 1fr); }.wifi-profile-shell { padding: 18px; }.wifi-profile-grid { grid-template-columns: 1fr; }.wifi-profile-card { padding: 18px; }.wifi-profile-detail-list div { grid-template-columns: 1fr; gap: 6px; }.wifi-profile-actions { grid-column: 1 / -1; }.wifi-profile-avatar { width: 82px; height: 82px; font-size: 28px; }.wifi-photo-card img { height: 150px; } }
.customer-main { width: min(100%, 1240px); margin: 0 auto; padding: 38px 0; }.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }.page-heading .breadcrumb { margin-bottom: 24px; }.page-heading h1 { margin-bottom: 8px; font-size: clamp(30px, 5vw, 46px); }.add-customer-button { padding: 0 18px; color: white; text-decoration: none; white-space: nowrap; }.customer-alert, .form-errors { border: 1px solid #bfe4cb; border-radius: 12px; margin-bottom: 16px; padding: 13px 16px; background: #effbf2; color: #287245; font-size: 13px; }.form-errors { display: grid; gap: 5px; border-color: #f0c8bf; background: #fff5f2; color: #a74632; }.customer-panel { overflow: hidden; border-radius: 20px; }.customer-toolbar { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(220,227,236,.7); padding: 18px; }.search-field { display: flex; min-height: 44px; flex: 1; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 11px; padding: 0 12px; background: rgba(255,255,255,.75); color: #8594a5; }.search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }.customer-toolbar select, .form-field select { min-height: 44px; border: 1px solid var(--line); border-radius: 11px; padding: 0 12px; background: rgba(255,255,255,.75); color: var(--ink); }.toolbar-button { min-height: 44px; padding: 0 16px; background: var(--ink); color: white; }.refresh-link { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 11px; color: var(--blue-dark); font-size: 22px; text-decoration: none; }.list-meta { display: flex; justify-content: space-between; padding: 18px 20px 8px; color: var(--muted); font-size: 12px; }.list-meta strong { color: var(--ink); font-size: 14px; }.wifi-registration-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(220,227,236,.7); padding: 20px 22px 16px; }.wifi-registration-panel h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); }.wifi-registration-panel .eyebrow { margin-bottom: 8px; }.wifi-customer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 18px 20px 10px; }.wifi-customer-card { display: grid; gap: 16px; min-height: 210px; padding: 18px 16px; border: 1px solid rgba(220,227,236,.8); border-radius: 18px; background: rgba(255,255,255,.55); box-shadow: 0 10px 26px rgba(29,52,83,.06); color: var(--ink); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }.wifi-customer-card:hover { transform: translateY(-2px); border-color: rgba(23,105,224,.28); box-shadow: 0 15px 34px rgba(29,52,83,.1); }.wifi-customer-photo { display: grid; place-items: center; width: 68px; height: 68px; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, #edf4ff, #dfeeff); margin: 0 auto; border: 3px solid rgba(255,255,255,.9); box-shadow: 0 10px 22px rgba(23,105,224,.12); }.wifi-customer-photo img { width: 100%; height: 100%; object-fit: cover; }.wifi-customer-photo span { display: grid; place-items: center; width: 100%; height: 100%; color: var(--blue-dark); font: 800 22px Manrope, sans-serif; }.wifi-customer-info { text-align: center; }.wifi-customer-info h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; }.wifi-customer-info p { margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 600; }.wifi-profile-main { width: min(100%, 1160px); margin: 0 auto; padding: 18px 0 34px; }.wifi-profile-shell { border-radius: 22px; padding: 22px; }.wifi-profile-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid rgba(220,227,236,.7); }.wifi-profile-avatar { display: grid; place-items: center; width: 92px; height: 92px; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, #edf4ff, #dfeeff); border: 4px solid rgba(255,255,255,.9); box-shadow: 0 14px 30px rgba(23,105,224,.12); }.wifi-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }.wifi-profile-avatar span { display: grid; place-items: center; width: 100%; height: 100%; color: var(--blue-dark); font: 800 30px Manrope, sans-serif; }.wifi-profile-headline { min-width: 0; }.wifi-profile-headline h1 { margin: 0 0 6px; font-size: clamp(26px, 4vw, 38px); }.profile-meta { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }.wifi-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }.wifi-profile-card { border: 1px solid rgba(220,227,236,.8); border-radius: 18px; padding: 20px; background: rgba(255,255,255,.56); }.wifi-profile-card h2 { margin: 0 0 16px; font-size: 17px; }.wifi-profile-detail-list { display: grid; gap: 10px; margin: 0; }.wifi-profile-detail-list div { display: flex; justify-content: space-between; gap: 18px; padding-top: 10px; border-top: 1px solid rgba(220,227,236,.6); }.wifi-profile-detail-list dt { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.wifi-profile-detail-list dd { margin: 0; max-width: 60%; text-align: right; font-weight: 700; color: var(--ink); }.wifi-gallery-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(220,227,236,.7); }.wifi-gallery-header { margin-bottom: 16px; }.wifi-gallery-header h2 { margin: 0; font-size: 22px; }.wifi-photo-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }.wifi-photo-card { margin: 0; overflow: hidden; border: 1px solid rgba(220,227,236,.8); border-radius: 18px; background: rgba(255,255,255,.7); box-shadow: 0 12px 26px rgba(29,52,83,.06); }.wifi-photo-card img { display: block; width: 100%; height: 180px; object-fit: cover; }.wifi-empty-gallery { border: 1px dashed rgba(23,105,224,.3); border-radius: 16px; background: rgba(234,242,255,.45); padding: 28px; color: var(--muted); text-align: center; font-weight: 600; }.customer-table-wrap { overflow-x: auto; padding: 0 12px 10px; }.customer-table { width: 100%; border-collapse: collapse; min-width: 920px; }.customer-table th { padding: 13px 9px; color: #8b99a9; font-size: 10px; letter-spacing: .08em; text-align: left; text-transform: uppercase; }.customer-table td { border-top: 1px solid rgba(220,227,236,.68); padding: 16px 9px; color: #536579; font-size: 12px; }.customer-table td strong { display: block; color: var(--ink); font-size: 13px; }.customer-table td small { display: block; margin-top: 4px; color: #9aa7b5; }.customer-status { display: inline-flex; border-radius: 20px; padding: 6px 9px; font-size: 10px; font-weight: 800; letter-spacing: .04em; }.status-active { background: #e7f7ed; color: #29844d; }.status-inactive { background: #edf1f4; color: #687a8b; }.status-suspended { background: #fff0e9; color: #b45b37; }.customer-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }.customer-actions a, .customer-actions button { border: 0; padding: 5px; background: none; color: var(--blue-dark); cursor: pointer; font: 700 11px inherit; text-decoration: none; }.customer-actions .action-view { color: #2d8b59; }.customer-actions button { color: #c75c4a; }.customer-actions form { display: inline; }.empty-state { padding: 60px !important; text-align: center; }.empty-state span { display: block; color: var(--blue); font-size: 30px; }.empty-state strong { display: block; margin-top: 10px; color: var(--ink); }.empty-state p { color: var(--muted); }.pagination { display: flex; justify-content: center; gap: 7px; padding: 20px; }.pagination a { display: grid; min-width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--blue-dark); font-size: 12px; font-weight: 700; text-decoration: none; }.pagination a.is-current { border-color: var(--blue); background: var(--blue); color: white; }
.form-panel { padding: clamp(20px, 4vw, 38px); }.customer-form { max-width: 1000px; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.form-field { display: grid; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 700; }.form-field input, .form-field textarea, .form-field select { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; outline: 0; background: rgba(255,255,255,.78); color: var(--ink); }.form-field textarea { resize: vertical; }.form-field small { color: var(--muted); font-weight: 400; }.form-field-wide { grid-column: 1 / -1; }.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; }.button-secondary { border: 1px solid var(--line); padding: 0 18px; background: rgba(255,255,255,.65); color: var(--ink); text-decoration: none; }.form-actions .button { min-height: 46px; }.profile-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin-bottom: 20px; border-radius: 20px; padding: 25px; }.profile-hero h1 { margin-bottom: 5px; font-size: clamp(26px, 4vw, 38px); }.profile-id { margin: 0; color: var(--muted); font-size: 13px; }.profile-avatar { display: grid; width: 74px; height: 74px; place-items: center; overflow: hidden; border-radius: 22px; background: var(--blue-soft); color: var(--blue-dark); font: 800 29px Manrope, sans-serif; }.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }.profile-actions { display: flex; grid-column: 2 / -1; gap: 9px; }.profile-actions .button { min-height: 40px; padding: 0 14px; font-size: 12px; }.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.profile-card { border-radius: 18px; padding: 22px; }.profile-card h2 { margin-bottom: 18px; font-size: 17px; }.profile-card dl { display: grid; gap: 0; margin: 0; }.profile-card dl div { display: flex; justify-content: space-between; gap: 15px; border-top: 1px solid rgba(220,227,236,.65); padding: 11px 0; }.profile-card dt { color: var(--muted); font-size: 12px; }.profile-card dd { margin: 0; color: var(--ink); font-size: 12px; font-weight: 700; text-align: right; }.bill-summary strong { display: block; font: 800 30px Manrope, sans-serif; }.bill-summary span, .profile-placeholder, .notes-content { color: var(--muted); font-size: 12px; line-height: 1.65; }.notes-content { white-space: normal; }
@media (max-width: 760px) { .customer-main { padding: 28px 0; }.page-heading { display: block; }.add-customer-button { display: inline-flex; margin-top: 18px; }.customer-toolbar { flex-wrap: wrap; padding: 13px; }.search-field { flex-basis: 100%; }.customer-toolbar select { flex: 1; min-width: 0; }.customer-table-wrap { padding: 0 13px 12px; }.customer-table { min-width: 0; }.customer-table thead { display: none; }.customer-table, .customer-table tbody, .customer-table tr, .customer-table td { display: block; width: 100%; }.customer-table tr { margin: 12px 0; border: 1px solid rgba(220,227,236,.8); border-radius: 15px; padding: 8px 12px; background: rgba(255,255,255,.5); }.customer-table td { display: flex; justify-content: space-between; gap: 16px; border: 0; padding: 8px 0; text-align: right; }.customer-table td::before { color: #94a1af; content: attr(data-label); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; }.customer-table td[data-label="Customer"] { display: block; text-align: left; }.customer-table td[data-label="Customer"]::before { display: none; }.customer-actions { justify-content: flex-end; }.empty-state { padding: 35px 10px !important; }.form-grid, .profile-grid { grid-template-columns: 1fr; }.form-field-wide { grid-column: auto; }.profile-hero { grid-template-columns: auto 1fr; align-items: start; }.profile-hero > .customer-status { grid-column: 2; justify-self: start; }.profile-actions { grid-column: 1 / -1; }.profile-card dl div { display: block; }.profile-card dd { margin-top: 4px; text-align: left; } }
.staff-list-avatar { display: inline-grid; width: 32px; height: 32px; float: left; margin: -2px 9px 0 0; place-items: center; overflow: hidden; border-radius: 10px; background: var(--blue-soft); color: var(--blue-dark); font-weight: 800; }.staff-list-avatar img { width: 100%; height: 100%; object-fit: cover; }.staff-table td:first-child { min-width: 180px; }.staff-form fieldset { margin: 0 0 24px; border: 0; border-top: 1px solid rgba(220,227,236,.75); padding: 22px 0 0; }.staff-form legend { margin-bottom: 15px; color: var(--ink); font: 800 17px Manrope, sans-serif; }.permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.permission-card { border-radius: 18px; padding: 20px; }.permission-card h2 { margin-bottom: 10px; font-size: 16px; }.permission-row { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(220,227,236,.65); color: var(--ink); cursor: pointer; font-size: 12px; }.permission-row span { display: grid; gap: 4px; }.permission-row small { color: #9aa7b5; font-size: 10px; }.permission-row input { position: absolute; opacity: 0; }.permission-row i { position: relative; width: 42px; height: 23px; flex: 0 0 42px; border-radius: 20px; background: #d6dee7; transition: background .18s; }.permission-row i::after { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(0,0,0,.18); content: ''; transition: transform .18s; }.permission-row input:checked + i { background: #3f9c6a; }.permission-row input:checked + i::after { transform: translateX(19px); }.permission-row input:focus-visible + i { outline: 3px solid rgba(23,105,224,.2); }.permission-summary-row { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(220,227,236,.65); padding: 9px 0; color: var(--muted); font-size: 12px; }.permission-summary-row strong { font-size: 10px; }.permission-on { color: #29844d; }.permission-off { color: #9aa7b5; }
@media (max-width: 760px) { .permission-grid { grid-template-columns: 1fr; }.staff-form fieldset { padding-top: 18px; }.staff-table td:first-child { min-width: 0; } }
.stock-main { width: min(100%, 1180px); margin: 0 auto; padding: 38px 0; }.stock-main .breadcrumb { margin-bottom: 28px; }.stock-heading { margin-bottom: 30px; }.stock-heading h1 { margin-bottom: 9px; font-size: clamp(30px, 5vw, 46px); }.stock-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }.stock-category-card { display: flex; min-height: 150px; align-items: flex-start; gap: 13px; border-radius: 18px; padding: 20px; color: var(--ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }.stock-category-card:hover, .stock-category-card.is-active { transform: translateY(-3px); border-color: rgba(23,105,224,.35); box-shadow: 0 22px 55px rgba(36,63,91,.13); }.stock-category-card > span:nth-child(2) { display: grid; gap: 7px; }.stock-category-card strong { font: 800 16px Manrope, sans-serif; }.stock-category-card small { max-width: 170px; color: var(--muted); font-size: 11px; line-height: 1.5; }.stock-category-icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 13px; background: var(--blue-soft); color: var(--blue-dark); font: 800 14px Manrope, sans-serif; }.stock-card-arrow { margin-left: auto; color: #9aa8b7; font-size: 20px; }.stock-placeholder { width: min(100%, 680px); margin-top: 30px; border-radius: 20px; padding: clamp(26px, 5vw, 50px); }.stock-placeholder .module-icon { margin-bottom: 22px; }.stock-placeholder h2 { margin-bottom: 12px; font-size: clamp(22px, 4vw, 30px); }.stock-placeholder p { max-width: 520px; color: var(--muted); line-height: 1.7; }.stock-placeholder .button { min-height: 44px; padding: 0 18px; color: white; text-decoration: none; }
@media (max-width: 900px) { .stock-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stock-main { padding: 28px 0; }.stock-category-grid { grid-template-columns: 1fr; gap: 12px; }.stock-category-card { min-height: 112px; align-items: center; padding: 16px; }.stock-category-card small { max-width: none; }.stock-placeholder { padding: 26px 20px; } }
.stock-summary { margin-bottom: 18px; }.stock-summary .summary-card { min-height: 150px; }.stock-category-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }.stock-category-pill { display: grid; gap: 5px; border: 1px solid var(--line); border-radius: 13px; padding: 13px; background: rgba(255,255,255,.65); color: var(--ink); text-decoration: none; }.stock-category-pill span { color: var(--muted); font-size: 11px; }.stock-category-pill strong { font: 800 18px Manrope, sans-serif; }.stock-category-pill:hover, .stock-category-pill.is-active { border-color: rgba(23,105,224,.35); background: var(--blue-soft); }.stock-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }.stock-form { border-radius: 20px; padding: 22px; }.stock-form h2 { margin-bottom: 7px; font-size: 19px; }.stock-form p { min-height: 38px; margin-bottom: 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }.stock-form .button { min-height: 44px; padding: 0 16px; }.stock-list-panel { margin-top: 18px; border-radius: 20px; overflow: hidden; }.stock-history-link { min-height: 34px !important; padding: 0 11px !important; font-size: 11px; }.stock-core-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }.stock-core-card { display: grid; gap: 8px; border-radius: 17px; padding: 18px; color: var(--ink); text-decoration: none; }.stock-core-card:hover, .stock-core-card.is-active { border-color: rgba(23,105,224,.35); transform: translateY(-2px); }.stock-core-card strong { font: 800 16px Manrope, sans-serif; }.stock-core-card span { color: var(--blue-dark); font: 800 19px Manrope, sans-serif; }.stock-core-card small { color: var(--muted); font-size: 11px; }.fiber-form { margin-bottom: 18px; }.fiber-form form { margin-top: 20px; }
@media (max-width: 900px) { .stock-category-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }.stock-core-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .stock-action-grid { grid-template-columns: 1fr; }.stock-category-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }.stock-core-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.stock-summary { grid-template-columns: repeat(2, 1fr); } }
.sms-main { width: min(100%, 1240px); margin: 0 auto; padding: 38px 0; }.sms-source-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; }.sms-source-group { margin-left: 10px; color: #91a0b0; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.sms-source-tab { border: 1px solid var(--line); border-radius: 20px; padding: 9px 13px; background: rgba(255,255,255,.65); color: var(--ink); font-size: 12px; font-weight: 700; text-decoration: none; }.sms-source-tab:hover, .sms-source-tab.is-active { border-color: rgba(23,105,224,.35); background: var(--blue-soft); color: var(--blue-dark); }.sms-summary { grid-template-columns: repeat(5, 1fr); margin-bottom: 22px; }.sms-summary .summary-card { min-height: 146px; }.sms-inbox { border-radius: 20px; overflow: hidden; }.sms-inbox-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 22px 10px; }.sms-inbox-heading h2 { margin: 0; font-size: 22px; }.sms-inbox-heading .eyebrow { margin-bottom: 6px; }.sms-inbox-heading .button { min-height: 40px; padding: 0 16px; text-decoration: none; }.sms-filters { flex-wrap: wrap; }.sms-filters input:not([type="search"]), .sms-filters select { min-height: 44px; max-width: 180px; border: 1px solid var(--line); border-radius: 11px; padding: 0 10px; background: rgba(255,255,255,.75); color: var(--ink); }.sms-filters .search-field { min-width: 220px; }.sms-card-list { display: grid; gap: 12px; padding: 12px 18px 20px; }.sms-card { border: 1px solid rgba(220,227,236,.85); border-radius: 16px; padding: 18px; background: rgba(255,255,255,.58); }.sms-card-top { display: flex; align-items: start; justify-content: space-between; gap: 16px; }.sms-source-label { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.sms-card h3 { margin: 5px 0 0; font: 800 17px Manrope, sans-serif; }.sms-status { border-radius: 18px; padding: 7px 10px; font-size: 10px; font-weight: 800; }.sms-status-new { background: #fff7db; color: #9b7410; }.sms-status-read, .sms-status-duplicate { background: #edf1f4; color: #687a8b; }.sms-status-matched { background: #e7f7ed; color: #29844d; }.sms-status-unmatched, .sms-status-failed { background: #fff0e9; color: #b45b37; }.sms-detail-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 18px; }.sms-detail-grid div { display: grid; gap: 5px; }.sms-detail-grid small, .sms-full-text small { color: #94a1af; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.sms-detail-grid strong { color: var(--ink); font-size: 12px; overflow-wrap: anywhere; }.sms-full-text { margin-top: 18px; border-top: 1px solid rgba(220,227,236,.72); padding-top: 14px; }.sms-full-text p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
@media (max-width: 900px) { .sms-summary { grid-template-columns: repeat(3, 1fr); }.sms-detail-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .sms-main { padding: 28px 0; }.sms-source-group { width: 100%; margin: 8px 0 0; }.sms-summary { grid-template-columns: repeat(2, 1fr); }.sms-inbox-heading { align-items: start; padding: 20px 14px 8px; }.sms-card-list { padding: 10px 12px 16px; }.sms-card { padding: 15px; }.sms-detail-grid { grid-template-columns: repeat(2, 1fr); gap: 13px; }.sms-filters input:not([type="search"]), .sms-filters select, .sms-filters .search-field { max-width: none; min-width: 0; flex: 1 1 calc(50% - 6px); }.sms-filters .search-field { flex-basis: 100%; } }
.account-main { width: min(100%, 1240px); margin: 0 auto; padding: 38px 0; }.account-main .page-heading { margin-bottom: 20px; }.account-main .page-heading .button { color: white; text-decoration: none; white-space: nowrap; }.account-toolbar { display: flex; justify-content: flex-end; margin-bottom: 18px; }.account-toolbar .button { min-height: 40px; padding: 0 15px; text-decoration: none; }.account-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }.account-card { display: block; border-radius: 20px; padding: 22px; color: var(--ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }.account-card:hover { transform: translateY(-3px); box-shadow: 0 22px 55px rgba(36,63,91,.13); }.account-card-heading, .pending-card-heading, .section-heading, .account-detail-hero { display: flex; align-items: start; justify-content: space-between; gap: 16px; }.account-type-label { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.account-card h2 { margin: 5px 0 4px; font-size: 19px; }.account-card small { color: var(--muted); font-size: 11px; }.account-status { display: inline-flex; border-radius: 18px; padding: 7px 10px; font-size: 10px; font-weight: 800; white-space: nowrap; }.account-status-active { background: #e7f7ed; color: #29844d; }.account-status-inactive { background: #edf1f4; color: #687a8b; }.account-balance { display: block; margin-top: 27px; font: 800 29px Manrope, sans-serif; }.account-balance-label { color: var(--muted); font-size: 11px; }.account-card-stats { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: 22px; color: var(--muted); font-size: 11px; }.account-card-stats strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 13px; }.account-form-panel { border-radius: 20px; padding: clamp(20px, 4vw, 38px); }.account-detail-hero { margin-bottom: 18px; border-radius: 20px; padding: 25px; }.account-detail-hero h1 { margin: 5px 0 8px; font-size: clamp(28px, 4vw, 42px); }.account-detail-hero p { margin: 0; color: var(--muted); font-size: 13px; }.account-detail-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }.account-detail-summary .summary-card { min-height: 135px; }.account-section { margin-top: 28px; }.section-heading { align-items: end; margin-bottom: 13px; }.section-heading h2 { margin: 0; font-size: 22px; }.section-heading > strong { color: var(--muted); font-size: 12px; }.pending-list { display: grid; gap: 13px; }.pending-card { border-radius: 18px; padding: 20px; }.pending-card h3 { margin: 6px 0 0; font: 800 25px Manrope, sans-serif; }.pending-card .button { min-height: 40px; padding: 0 14px; color: white; text-decoration: none; }.pending-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 16px 0 10px; color: var(--muted); font-size: 11px; }.pending-card > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; white-space: pre-wrap; }.confirm-source { display: block; margin-bottom: 18px; }.confirm-source p { margin: 12px 0; color: var(--muted); line-height: 1.6; white-space: pre-wrap; }.confirm-source small { color: var(--muted); font-size: 11px; }.account-filters { flex-wrap: wrap; }.account-filters input, .account-filters select { min-height: 44px; max-width: 180px; border: 1px solid var(--line); border-radius: 11px; padding: 0 10px; background: rgba(255,255,255,.75); color: var(--ink); }.account-filters .search-field { min-width: 240px; }.account-history-table { min-width: 1100px; }
@media (max-width: 900px) { .account-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.account-detail-summary { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .account-main { padding: 28px 0; }.account-main .page-heading { display: block; }.account-main .page-heading > .button { display: inline-flex; margin-top: 17px; }.account-card-grid { grid-template-columns: 1fr; }.account-detail-summary { grid-template-columns: 1fr; gap: 11px; }.account-detail-summary .summary-card { min-height: 110px; }.account-detail-hero { padding: 20px 16px; }.account-detail-hero .account-status { align-self: start; }.pending-card-heading { display: block; }.pending-card-heading .button { margin-top: 15px; }.account-filters input, .account-filters select, .account-filters .search-field { max-width: none; min-width: 0; flex: 1 1 calc(50% - 6px); }.account-filters .search-field { flex-basis: 100%; } }

.nav-badge { display: inline-grid; min-width: 21px; height: 21px; margin-left: auto; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 0 6px; background: #d92f43; color: #fff; font-size: 10px; font-weight: 800; line-height: 1; }
.nav-badge[hidden] { display: none; }
.fm-wifi-profile-main { width: min(100%, 1180px); margin: 0 auto; padding: 18px 0 32px; }
.fm-wifi-profile {
    overflow: hidden;
    border: 1px solid rgba(143, 178, 210, 0.4);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(10, 22, 31, 0.9) 0%, rgba(11, 27, 33, 0.92) 100%);
    box-shadow: 0 24px 60px rgba(4, 12, 20, 0.28);
}
.fm-wifi-profile__hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid rgba(148, 186, 208, 0.2);
    padding: 26px 28px;
    background: linear-gradient(135deg, rgba(17, 31, 39, 0.9), rgba(10, 27, 35, 0.8));
}
.fm-wifi-profile__identity {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}
.fm-wifi-profile__avatar {
    display: grid;
    width: 134px;
    height: 134px;
    overflow: hidden;
    place-items: center;
    border: 3px solid rgba(142, 221, 249, 0.55);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(18, 125, 118, 0.38), rgba(36, 92, 188, 0.3));
    box-shadow: 0 0 0 8px rgba(88, 197, 214, 0.12), 0 18px 32px rgba(5, 14, 18, 0.3);
}
.fm-wifi-profile__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fm-wifi-profile__avatar span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #e9f9ff;
    font: 800 44px/1 'Manrope', sans-serif;
}
.fm-wifi-profile__headline {
    min-width: 0;
}
.fm-wifi-profile__eyebrow {
    margin: 0 0 8px;
    color: #7fe3d9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.fm-wifi-profile__headline h1 {
    margin: 0 0 10px;
    color: #f3fbff;
    font-size: clamp(28px, 3.8vw, 42px);
    line-height: 1.1;
    word-break: break-word;
}
.fm-wifi-profile__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    color: rgba(207, 227, 238, 0.8);
    font-size: 13px;
}
.fm-wifi-profile__status-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
}
.fm-wifi-profile__status {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    border: 1px solid rgba(123, 214, 178, 0.34);
    border-radius: 999px;
    padding: 0 14px;
    background: rgba(26, 84, 67, 0.42);
    color: #bfeed9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.fm-wifi-profile__status--inactive {
    border-color: rgba(165, 175, 195, 0.38);
    background: rgba(84, 96, 111, 0.3);
    color: #dfeaf2;
}
.fm-wifi-profile__status--suspended {
    border-color: rgba(232, 169, 88, 0.34);
    background: rgba(133, 88, 30, 0.28);
    color: #f7d797;
}
.fm-wifi-profile__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}
.fm-wifi-profile__actions .button {
    min-height: 42px;
    border-radius: 12px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.fm-wifi-profile__actions .button-secondary {
    border: 1px solid rgba(152, 184, 213, 0.28);
    background: rgba(16, 35, 46, 0.7);
    color: #edf8ff;
}
.fm-wifi-profile__actions .button-primary {
    background: linear-gradient(135deg, #4dcbdd 0%, #3a7cff 100%);
    color: #fff;
}
.fm-wifi-profile__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 24px 28px 0;
}
.fm-wifi-profile__card {
    border: 1px solid rgba(150, 184, 211, 0.2);
    border-radius: 20px;
    padding: 22px 22px 18px;
    background: linear-gradient(180deg, rgba(11, 29, 38, 0.82), rgba(12, 23, 30, 0.8));
}
.fm-wifi-profile__card-header {
    margin-bottom: 18px;
}
.fm-wifi-profile__card-header span {
    display: inline-flex;
    margin-bottom: 10px;
    color: #7fe3d9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.fm-wifi-profile__card-header h2 {
    margin: 0;
    color: #edf9ff;
    font-size: clamp(20px, 2vw, 28px);
}
.fm-wifi-profile__list {
    display: grid;
    margin: 0;
    gap: 0;
}
.fm-wifi-profile__list-item {
    display: grid;
    grid-template-columns: minmax(155px, 190px) minmax(0, 1fr);
    gap: 16px;
    border-top: 1px solid rgba(156, 184, 206, 0.18);
    padding: 12px 0;
}
.fm-wifi-profile__list-item:first-child {
    border-top: 0;
}
.fm-wifi-profile__list-item dt {
    margin: 0;
    color: rgba(187, 214, 227, 0.8);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.fm-wifi-profile__list-item dd {
    margin: 0;
    color: #f6fbff;
    font-size: 14px;
    line-height: 1.6;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.fm-wifi-profile__location {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
    color: rgba(217, 233, 243, 0.85);
    font-size: 14px;
}
.fm-wifi-profile__location p {
    margin: 0;
    line-height: 1.6;
}
.fm-wifi-profile__button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(151, 182, 208, 0.3);
    border-radius: 12px;
    padding: 0 16px;
    background: rgba(16, 34, 47, 0.7);
    color: #edf8ff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.fm-wifi-profile__button:hover,
.fm-wifi-profile__button:focus-visible {
    border-color: rgba(115, 217, 255, 0.7);
    transform: translateY(-1px);
}
.fm-wifi-profile__empty {
    border: 1px dashed rgba(154, 191, 212, 0.28);
    border-radius: 14px;
    padding: 18px 16px;
    background: rgba(18, 33, 42, 0.42);
    color: rgba(203, 227, 239, 0.82);
    line-height: 1.6;
}
@media (max-width: 960px) {
    .fm-wifi-profile__hero { flex-direction: column; align-items: flex-start; }
    .fm-wifi-profile__status-wrap { width: 100%; align-items: flex-start; }
    .fm-wifi-profile__actions { justify-content: flex-start; }
    .fm-wifi-profile__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .fm-wifi-profile-main { padding-top: 10px; }
    .fm-wifi-profile__hero, .fm-wifi-profile__grid { padding-left: 16px; padding-right: 16px; }
    .fm-wifi-profile__hero { padding-top: 18px; padding-bottom: 18px; }
    .fm-wifi-profile__identity { width: 100%; align-items: flex-start; }
    .fm-wifi-profile__avatar { width: 96px; height: 96px; }
    .fm-wifi-profile__meta { flex-direction: column; gap: 6px; }
    .fm-wifi-profile__status-wrap { gap: 12px; }
    .fm-wifi-profile__list-item { grid-template-columns: 1fr; gap: 6px; }
    .fm-wifi-profile__actions { width: 100%; }
    .fm-wifi-profile__actions .button { flex: 1 1 100%; }
}

/* SMS Gateway workspace */
body:has(.sms-gateway-main) { background: #0a0b1c; color: #edf0ff; }
.sms-app { min-height: 100vh; background: radial-gradient(circle at 82% 0%, rgba(83, 60, 168, .42), transparent 31%), radial-gradient(circle at 15% 40%, rgba(26, 57, 137, .23), transparent 32%), linear-gradient(145deg, #0b1026 0%, #11102b 46%, #0c1225 100%); }
.sms-app .app-content { padding: 0 clamp(16px, 4vw, 58px) 64px; }.sms-app .navigation-drawer { border-color: rgba(147,124,255,.2); background: rgba(14,17,39,.95); color: #f0f2ff; }.sms-app .drawer-brand, .sms-app .nav-item, .sms-app .drawer-account { color: #b9b8d1; }.sms-app .drawer-brand strong { color: #fff; }.sms-app .drawer-brand small, .sms-app .drawer-label { color: #777796; }.sms-app .nav-item:hover { background: #211d4d; color: #fff; }.sms-app .nav-item.is-active { background: #2a245a; box-shadow: inset 3px 0 #927dff; color: #bcaeff; }.sms-app .drawer-close { border-color: #3c3863; background: #1c1b3d; color: #d8d3ff; }
.sms-gateway-header { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid rgba(132,125,201,.17); }.sms-gateway-header .menu-button { border-color: rgba(146,137,215,.22); background: rgba(20,23,55,.48); color: #c7c9e3; }.sms-gateway-header .menu-lines { color: #a890ff; }.sms-gateway-brand { color: #f5f3ff; letter-spacing: .04em; }.sms-gateway-brand strong { display: block; color: #f5f3ff; font-size: 12px; }.sms-gateway-brand small { display: block; margin-top: 3px; color: #8685a4; font-size: 10px; letter-spacing: .02em; }.sms-gateway-header .header-actions { gap: 12px; }.sms-gateway-header .user-summary strong { color: #eae8ff; }.sms-gateway-header .user-summary span { color: #8987a7; }.sms-gateway-header .avatar { background: #443981; color: #d6cbff; }
.sms-gateway-main { width: min(100%, 1240px); margin: 0 auto; padding: clamp(38px, 6vw, 74px) 0; }.sms-gateway-flash { margin-bottom: 18px; border: 1px solid rgba(104,221,169,.32); border-radius: 12px; padding: 13px 16px; background: rgba(39,142,107,.18); color: #91ebc5; font-size: 12px; }.sms-gateway-hero { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }.sms-gateway-kicker, .sms-gateway-list-head .sms-gateway-kicker { margin: 0 0 10px; color: #a591ff; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }.sms-gateway-hero h1 { margin: 0 0 10px; color: #faf9ff; font: 800 clamp(29px, 4vw, 46px) Manrope, sans-serif; letter-spacing: -.02em; }.sms-gateway-hero > div > p:last-child { margin: 0; color: #a3a5c1; font-size: 13px; }.sms-gateway-clear { border: 1px solid rgba(245,123,143,.35); border-radius: 8px; padding: 10px 13px; background: rgba(111,34,62,.28); color: #ffabb9; cursor: pointer; font-size: 11px; font-weight: 800; }.sms-gateway-clear:hover { background: rgba(147,45,77,.4); }
.sms-gateway-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }.sms-gateway-stat { position: relative; overflow: hidden; min-height: 110px; border: 1px solid rgba(144,130,218,.22); border-radius: 14px; padding: 18px; background: rgba(29,29,66,.64); box-shadow: 0 16px 36px rgba(0,0,0,.2); }.sms-gateway-stat::after { position: absolute; right: -24px; bottom: -32px; width: 92px; height: 92px; border: 1px solid currentColor; border-radius: 50%; opacity: .12; content: ''; }.sms-gateway-stat span { display: block; color: #a3a4c1; font-size: 11px; font-weight: 700; }.sms-gateway-stat strong { display: block; margin-top: 13px; color: #fff; font: 800 28px Manrope, sans-serif; }.sms-gateway-stat.violet { color: #b69eff; }.sms-gateway-stat.blue { color: #78b6ff; }.sms-gateway-stat.amber { color: #f5c86c; }.sms-gateway-stat.green { color: #68dca8; }.sms-gateway-stat.rose { color: #f5829b; }
.sms-gateway-sources { display: flex; align-items: center; gap: 9px; margin: 26px 0 13px; overflow-x: auto; padding-bottom: 3px; }.sms-gateway-sources > span { flex: 0 0 auto; color: #747494; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.sms-gateway-source { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; border: 1px solid rgba(145,132,216,.2); border-radius: 20px; padding: 8px 10px; background: rgba(27,27,63,.6); color: #c5c5e0; font-size: 10px; font-weight: 800; text-decoration: none; }.sms-gateway-source i { width: 6px; height: 6px; border-radius: 50%; background: #69d9a4; box-shadow: 0 0 10px rgba(105,217,164,.7); }.sms-gateway-source b { color: #8e83cf; }
.sms-gateway-filter { margin-bottom: 15px; border: 1px solid rgba(143,130,214,.19); border-radius: 13px; padding: 13px; background: rgba(23,24,57,.65); }.sms-gateway-filter form { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }.sms-gateway-search { display: flex; min-height: 42px; flex: 1 1 260px; align-items: center; gap: 8px; border: 1px solid #383761; border-radius: 8px; padding: 0 12px; background: #171833; color: #77779c; }.sms-gateway-search input, .sms-gateway-filter select, .sms-gateway-filter input[type='date'] { min-height: 42px; border: 1px solid #383761; border-radius: 8px; outline: 0; background: #171833; color: #dfe0f5; font: 11px 'DM Sans', sans-serif; }.sms-gateway-search input { width: 100%; border: 0; background: transparent; }.sms-gateway-filter select, .sms-gateway-filter input[type='date'] { padding: 0 11px; }.sms-gateway-filter select { min-width: 130px; }.sms-gateway-filter-button { min-height: 42px; border: 0; border-radius: 8px; padding: 0 15px; background: #8068e9; color: #fff; cursor: pointer; font-size: 11px; font-weight: 800; }.sms-gateway-filter form > a { color: #9998bd; font-size: 11px; font-weight: 700; text-decoration: none; }
.sms-gateway-list { overflow: hidden; border: 1px solid rgba(143,130,214,.21); border-radius: 15px; background: rgba(19,20,48,.7); box-shadow: 0 22px 55px rgba(0,0,0,.22); }.sms-gateway-list-head { display: flex; align-items: end; justify-content: space-between; gap: 15px; border-bottom: 1px solid rgba(143,130,214,.15); padding: 20px 20px 15px; }.sms-gateway-list-head .sms-gateway-kicker { margin-bottom: 6px; }.sms-gateway-list-head h2 { margin: 0; color: #f5f4ff; font: 800 19px Manrope, sans-serif; }.sms-gateway-list-head > span { color: #767895; font-size: 11px; }.sms-gateway-cards { display: grid; gap: 10px; padding: 12px; }.sms-gateway-card { border: 1px solid rgba(142,130,209,.17); border-radius: 11px; padding: 15px; background: rgba(27,28,62,.72); }.sms-gateway-card:hover { border-color: rgba(159,139,241,.42); background: rgba(33,33,74,.8); }.sms-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.sms-card-top time { color: #8586a5; font-size: 10px; }.sms-gateway-status { border-radius: 20px; padding: 5px 8px; font-size: 9px; font-weight: 800; letter-spacing: .05em; }.sms-gateway-status.new, .sms-gateway-status.read { background: rgba(239,190,83,.15); color: #f5ca72; }.sms-gateway-status.matched { background: rgba(77,207,145,.14); color: #6ee0a9; }.sms-gateway-status.unmatched, .sms-gateway-status.failed { background: rgba(244,105,133,.14); color: #ff91a7; }.sms-gateway-card > p { margin: 14px 0; color: #d3d4e7; font-size: 12px; line-height: 1.65; white-space: normal; overflow-wrap: anywhere; }.sms-card-sender { display: flex; align-items: center; gap: 10px; margin-top: 13px; }.sms-gateway-sender-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: linear-gradient(135deg, #4d3c99, #765ed0); color: #eeeaff; font-size: 10px; font-weight: 800; }.sms-card-sender strong { display: block; color: #f0effb; font-size: 12px; }.sms-card-sender small { display: block; margin-top: 3px; color: #777895; font-size: 10px; }.sms-card-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; border-top: 1px solid rgba(143,130,214,.13); padding-top: 11px; color: #8586a5; font-size: 10px; }.sms-card-note { margin-top: 10px; border-left: 2px solid #e5b85f; padding-left: 9px; color: #e6bf75; font-size: 10px; line-height: 1.5; }.sms-gateway-empty { padding: 46px 20px; color: #8989a7; text-align: center; font-size: 12px; }.sms-gateway-pagination { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid rgba(143,130,214,.15); padding: 13px 15px; }.sms-gateway-pagination a { display: grid; min-width: 29px; height: 29px; place-items: center; border: 1px solid #383761; border-radius: 7px; color: #a9a7c8; font-size: 10px; text-decoration: none; }.sms-gateway-pagination a.active { border-color: #8e79ed; background: #705bd1; color: #fff; }
@media (max-width: 900px) { .sms-gateway-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .sms-app .app-content { padding: 0 12px 38px; }.sms-gateway-header { min-height: 68px; gap: 10px; }.sms-gateway-header .user-summary { display: none; }.sms-gateway-brand { font-size: 11px; }.sms-gateway-main { padding: 34px 0 50px; }.sms-gateway-hero { display: block; margin-bottom: 28px; }.sms-gateway-hero h1 { font-size: 30px; }.sms-gateway-clear { margin-top: 18px; }.sms-gateway-stats { grid-template-columns: repeat(2, 1fr); gap: 9px; }.sms-gateway-stat { min-height: 94px; padding: 14px; }.sms-gateway-stat strong { margin-top: 9px; font-size: 23px; }.sms-gateway-sources { margin-top: 20px; }.sms-gateway-sources > span { display: none; }.sms-gateway-filter form { align-items: stretch; }.sms-gateway-search { flex-basis: 100%; }.sms-gateway-filter select, .sms-gateway-filter input[type='date'], .sms-gateway-filter-button { flex: 1 1 calc(50% - 6px); min-width: 0; }.sms-gateway-list-head { align-items: start; padding: 17px 14px 13px; }.sms-gateway-list-head > span { white-space: nowrap; }.sms-gateway-cards { padding: 9px; }.sms-gateway-card { padding: 13px; } }

/* Stock workspace */
body:has(.stock-app) { background: #0b0f16; color: #e7edf7; }
.stock-app { min-height: 100vh; background: #0b0f16; }
.stock-app .app-content { padding: 0 clamp(18px, 3vw, 48px) 64px; }
.stock-app .navigation-drawer { background: #111722; border-color: #283343; color: #e7edf7; }
.stock-app .drawer-brand, .stock-app .nav-item, .stock-app .drawer-account { color: #a9b5c7; }
.stock-app .drawer-brand strong { color: #f5f8ff; }
.stock-app .drawer-brand small, .stock-app .drawer-label { color: #657286; }
.stock-app .nav-item:hover { color: #fff; background: #1a2432; }
.stock-app .nav-item.is-active { color: #8fb9ff; background: #172943; box-shadow: inset 3px 0 #5c9dff; }
.stock-app .drawer-close { color: #a9b5c7; border-color: #2a3748; background: #18212d; }
.stock-topbar { display: flex; min-height: 78px; align-items: center; gap: 24px; border-bottom: 1px solid #202a38; }
.stock-menu-button { display: inline-flex; min-height: 40px; align-items: center; gap: 10px; border: 1px solid #2b3849; border-radius: 9px; padding: 0 13px; background: #121a25; color: #b9c5d4; cursor: pointer; font-size: 12px; font-weight: 700; }
.stock-menu-icon { color: #76aaff; font-size: 17px; line-height: 1; }
.stock-workspace { display: flex; align-items: center; gap: 10px; min-width: 180px; color: #f3f6fb; font-size: 12px; letter-spacing: .06em; }
.stock-workspace strong { display: block; font-size: 12px; }
.stock-workspace small { display: block; margin-top: 3px; color: #718096; font-size: 10px; letter-spacing: .02em; }
.stock-brand-mark { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #4e8ff4; border-radius: 9px; color: #8db9ff; font: 800 11px Manrope, sans-serif; }
.stock-topbar .header-actions { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: flex-end; gap: 18px; }
.stock-search { width: min(100%, 330px); }
.stock-search form { display: flex; min-height: 40px; align-items: center; gap: 9px; border: 1px solid #2a3748; border-radius: 9px; padding: 0 12px; background: #111925; color: #68788d; }
.stock-search input { width: 100%; border: 0; outline: 0; background: transparent; color: #ecf2fb; font-size: 12px; }
.stock-search input::placeholder { color: #69778a; }
.stock-notification { width: 38px; height: 38px; border: 1px solid #2a3748; border-radius: 9px; background: #111925; color: #b2bfd0; cursor: pointer; font-size: 20px; }
.stock-user { display: flex; align-items: center; gap: 9px; color: #e8eef7; }
.stock-user > span:nth-child(2) { display: grid; gap: 3px; }
.stock-user strong { font-size: 12px; white-space: nowrap; }
.stock-user small { color: #6f7e92; font-size: 10px; text-transform: uppercase; }
.stock-user b { color: #758399; font-size: 15px; }
.stock-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #273e64; color: #9cc2ff; font-size: 12px; font-weight: 800; }
.stock-main { width: min(100%, 1380px); padding: 54px 0 80px; }
.stock-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; margin-bottom: 38px; }
.stock-kicker { margin: 0 0 10px; color: #6e9ee9; font-size: 10px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.stock-hero h1 { margin: 0 0 10px; color: #f5f7fb; font: 800 clamp(32px, 4vw, 48px) Manrope, sans-serif; letter-spacing: -.02em; }
.stock-hero p:not(.stock-kicker) { margin: 0; color: #78869a; font-size: 13px; }
.stock-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.stock-button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; padding: 0 14px; font-size: 12px; font-weight: 800; text-decoration: none; transition: transform .18s, background .18s, border-color .18s; }
.stock-button:hover { transform: translateY(-1px); }
.stock-button-primary { border: 1px solid #4b94fa; background: #4d96f7; color: #08111e; }
.stock-button-primary:hover { background: #72adff; }
.stock-button-ghost { border: 1px solid #344457; background: #141d29; color: #c5d1e1; }
.stock-button-ghost:hover { border-color: #5a7ea9; background: #1b293a; }
.stock-kpi-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.stock-kpi { min-width: 0; min-height: 155px; border: 1px solid #263342; border-radius: 12px; padding: 16px; background: #141c27; box-shadow: 0 14px 35px rgba(0,0,0,.16); transition: border-color .18s, transform .18s, background .18s; }
.stock-kpi:hover { border-color: #456382; background: #182331; transform: translateY(-2px); }
.stock-kpi-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; font-size: 18px; }
.stock-kpi-icon.blue { background: #1a3458; color: #76adff; }.stock-kpi-icon.cyan { background: #163c4a; color: #69c9e6; }.stock-kpi-icon.amber { background: #47381a; color: #f1be59; }.stock-kpi-icon.red { background: #48242b; color: #f18491; }.stock-kpi-icon.violet { background: #342b52; color: #b7a1ff; }.stock-kpi-icon.green { background: #1b4435; color: #72d3a2; }
.stock-kpi > span { display: block; margin-top: 19px; overflow: hidden; color: #8795a8; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.stock-kpi strong { display: block; margin-top: 7px; overflow: hidden; color: #f1f5fb; font: 800 clamp(20px, 2vw, 25px) Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.stock-kpi small { display: block; margin-top: 7px; color: #5e6d80; font-size: 10px; }
.stock-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 34px 0 14px; }
.stock-filter-form { display: flex; align-items: end; gap: 10px; }
.stock-filter-form label { display: grid; gap: 7px; color: #718096; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.stock-filter-form select { min-width: 210px; min-height: 40px; border: 1px solid #2d3b4c; border-radius: 8px; padding: 0 12px; outline: 0; background: #141c27; color: #dce5f1; font-size: 12px; }
.stock-filter-form .stock-button { min-height: 40px; }
.stock-result-count { color: #657387; font-size: 11px; }.stock-result-count strong { color: #cbd7e5; }
.stock-table-panel { overflow: hidden; border: 1px solid #263342; border-radius: 13px; background: #111923; box-shadow: 0 18px 50px rgba(0,0,0,.2); }
.stock-table-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid #253141; padding: 21px 22px 18px; }
.stock-table-heading .stock-kicker { margin-bottom: 5px; }.stock-table-heading h2 { margin: 0; color: #f1f5fb; font: 800 18px Manrope, sans-serif; }.stock-table-heading > a { color: #75aaff; font-size: 11px; font-weight: 800; text-decoration: none; }.stock-table-heading > a span { margin-left: 4px; font-size: 16px; }
.stock-table-panel .customer-table-wrap { padding: 0; }.stock-table { min-width: 1030px; }.stock-table th { border-bottom: 1px solid #253141; padding: 15px 14px; color: #637287; font-size: 9px; letter-spacing: .1em; }.stock-table th em { display: block; margin-top: 3px; color: #4c5b6d; font-style: normal; font-size: 8px; letter-spacing: .03em; text-transform: none; }.stock-table td { border-top: 1px solid #202b39; padding: 14px; color: #aebaca; font-size: 11px; }.stock-table tbody tr:nth-child(even) { background: #141d28; }.stock-table tbody tr:hover { background: #1a2736; }.stock-table td strong { color: #e9eff8; font-size: 12px; }.stock-table td small { display: block; margin-top: 4px; color: #637287; font-size: 9px; }.stock-table td code { color: #8da5c1; font-family: 'DM Sans', sans-serif; font-size: 10px; }.stock-thumb { display: grid; width: 36px; height: 36px; place-items: center; overflow: hidden; border: 1px solid #2f4053; border-radius: 7px; background: #1a2735; color: #65778d; font-size: 8px; }.stock-thumb img { width: 100%; height: 100%; object-fit: cover; }.stock-quantity { color: #dce7f6 !important; }.stock-status { display: inline-flex; align-items: center; gap: 6px; border-radius: 20px; padding: 6px 8px; font-size: 9px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }.stock-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.stock-status.success { background: #173829; color: #65ce91; }.stock-status.warning { background: #44371b; color: #edbd5d; }.stock-status.danger { background: #46232b; color: #f1818c; }.stock-row-actions { display: flex; align-items: center; gap: 6px; }.stock-row-actions a { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #2b394a; border-radius: 6px; color: #7fa9de; font-size: 14px; text-decoration: none; }.stock-row-actions a:hover { border-color: #5b88bd; background: #1c2a3b; }.stock-row-actions a.delete { color: #d87d88; }.stock-table .empty-state { color: #8290a2; }
@media (max-width: 1100px) { .stock-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .stock-app .app-content { padding: 0 12px 40px; }.stock-topbar { min-height: 68px; gap: 10px; }.stock-workspace { min-width: auto; }.stock-workspace > span:last-child, .stock-notification, .stock-user > span:nth-child(2), .stock-user b { display: none; }.stock-search { max-width: 180px; }.stock-main { padding: 36px 0 55px; }.stock-hero { display: block; margin-bottom: 28px; }.stock-hero h1 { font-size: 32px; }.stock-actions { justify-content: flex-start; margin-top: 22px; }.stock-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.stock-kpi { min-height: 143px; padding: 13px; }.stock-kpi strong { font-size: 22px; }.stock-toolbar { display: block; margin-top: 27px; }.stock-filter-form { align-items: stretch; }.stock-filter-form label { flex: 1; }.stock-filter-form select { min-width: 0; width: 100%; }.stock-result-count { display: block; margin-top: 12px; }.stock-table-heading { padding: 17px 14px; }.stock-table-heading > a { white-space: nowrap; }.stock-table-panel .customer-table-wrap { overflow-x: auto; }.stock-table { min-width: 1030px; } }