:root { --psm-accent: var(--bs-primary, #3a57e8); --psm-sidebar-width: 16.25rem; --psm-surface: var(--bs-card-bg, #fff); --psm-border: var(--bs-border-color, #e9ecef); }
html { scroll-behavior: smooth; max-width: 100%; }
body { min-height: 100vh; max-width: 100%; }
.hope-icon { display: inline-block; flex: 0 0 auto; vertical-align: -.2em; }
.hope-icon-lg { width: 2rem; height: 2rem; }
a { color: var(--psm-accent); }
.skip-link { position: fixed; z-index: 1200; top: .75rem; left: .75rem; padding: .75rem 1rem; background: #fff; color: #111; border-radius: .5rem; }
.place-items-center { place-items: center; }

.sidebar.sidebar-base { z-index: 1040; }
.sidebar .sidebar-header { min-height: 4.75rem; }
.brand-mark { width: 2.4rem; height: 2.4rem; flex: 0 0 2.4rem; border-radius: .75rem; display: inline-grid; place-items: center; color: #fff; background: var(--bs-primary); font-weight: 700; }
.brand-logo{width:2.5rem;height:2.5rem;flex:0 0 2.5rem;object-fit:contain;border-radius:.65rem}.brand-logo--auth{width:3rem;height:3rem}.auth-visual-logo{width:min(12rem,60%);height:auto;max-height:8rem;object-fit:contain}.navbar-avatar,.identity-preview{object-fit:cover}.identity-preview--avatar{border-radius:50%}
.logo-title { max-width: 10.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
.sidebar .iq-main-menu .nav-link { min-height: 2.9rem; }
.sidebar .iq-main-menu .icon { width: 1.5rem; display: inline-grid; place-items: center; }
.sidebar .sidebar-body { min-height: 0; overflow-y: auto; }
.main-content { min-height: 100vh; display: flex; flex-direction: column; min-width: 0; }
body.no-menu .main-content { margin-inline-start: 0; }
.iq-banner { flex: 0 0 auto; }
.iq-navbar { z-index: 1030; }
.iq-navbar .navbar-inner { min-height: 4rem; gap: .75rem; }
.iq-navbar.navs-sticky { position: sticky; top: 0; }
html[data-bs-theme="light"] .iq-navbar .nav-link,
html[data-bs-theme="light"] .iq-navbar .caption-title,
html[data-bs-theme="light"] .iq-navbar .caption-sub-title,
html[data-bs-theme="light"] .iq-navbar .btn-icon { color: #4b5563 !important; }
html[data-bs-theme="light"] .iq-navbar .nav-link:hover,
html[data-bs-theme="light"] .iq-navbar .nav-link:focus-visible,
html[data-bs-theme="light"] .iq-navbar .btn-icon:hover { color: var(--bs-primary) !important; }
.iq-navbar-header { min-height: 11rem; background: linear-gradient(125deg, var(--bs-primary), #0d6efd 58%, #1446b8); overflow: hidden; }
.iq-navbar-header.navs-bg-color { background: var(--bs-primary); }
.iq-header-img { position: absolute; inset: 0; opacity: .13; pointer-events: none; }
.iq-header-img img { height: 100%; object-fit: cover; }
.content-inner { flex: 1 0 auto; position: relative; z-index: 2; width: 100%; min-width: 0; padding-bottom: 2rem !important; }
.app-content, .app-content > * { min-width: 0; max-width: 100%; }
.app-content > .row, .app-content > form { width: 100%; }
.app-footer { margin-top: auto; padding: 1rem 1.5rem; border-top: 1px solid var(--psm-border); background: var(--psm-surface); }
.search-input { width: min(19rem, 32vw); }
.hope-search { min-width: 11rem; height: 2.75rem; flex-wrap: nowrap; border: 1px solid #d0d5dd; border-radius: .5rem; background: #fff; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.hope-search .input-group-text,.hope-search .form-control { min-height: 2.625rem; border: 0; background: transparent; box-shadow: none !important; color: #344054; }
.hope-search .input-group-text { width: 2.75rem; padding: 0; display: grid; place-items: center; }
.hope-search .form-control { min-width: 0; padding-inline-start: 0; }
.hope-search .form-control::placeholder { color: #667085; opacity: 1; }
.hope-search:focus-within { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .14); }
html[data-bs-theme="light"] .hope-search { border-color: #d0d5dd; background: #fff; }
html[data-bs-theme="dark"] .hope-search { border-color: #475467; background: #171a22; }
html[data-bs-theme="dark"] .hope-search .input-group-text,html[data-bs-theme="dark"] .hope-search .form-control { color: #f2f4f7; }
html[data-bs-theme="dark"] .hope-search .form-control::placeholder { color: #98a2b3; }
.navbar-list { min-width: 0; }
.navbar-list > .nav-item { display: flex; align-items: center; }
.topbar-icon-button { width: 2.75rem; height: 2.75rem; min-width: 2.75rem; padding: 0 !important; display: inline-grid !important; place-items: center; line-height: 1; border: 0; border-radius: 50%; color: #344054; }
.topbar-icon-button:hover,.topbar-icon-button:focus-visible { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .1); }
.topbar-icon-button > .hope-icon,.topbar-icon-button > span { grid-area: 1 / 1; }
.topbar-icon-button .hope-icon { width: 1.25rem; height: 1.25rem; display: block; margin: 0; vertical-align: 0; }
.topbar-action-button { min-height: 2.75rem; }
.theme-icon-dark,.theme-icon-light { width:1.25rem; height:1.25rem; align-items:center; justify-content:center; color:currentColor; line-height:1; }
html[data-bs-theme="light"] .theme-icon-dark { display:inline-grid !important; color:#344054; }
html[data-bs-theme="light"] .theme-icon-light { display:none !important; }
.dark .theme-icon-dark,html[data-bs-theme="dark"] .theme-icon-dark { display:none !important; }
.dark .theme-icon-light,html[data-bs-theme="dark"] .theme-icon-light { display:inline-grid !important; color:#f8fafc; }
[data-theme-quick-toggle] svg,[data-password-toggle] svg { width:1.25rem; height:1.25rem; display:block; stroke:currentColor; }
[data-password-toggle] { min-width:3.25rem; color:#64748b; border-color:#4b5870; }
.dark [data-password-toggle],html[data-bs-theme="dark"] [data-password-toggle] { color:#f8fafc; border-color:#4b5870; }
.btn-setting { z-index: 1050; }
.hope-settings { --bs-offcanvas-width: min(26rem, 100vw); }
.hope-settings .offcanvas-body { padding-bottom: 5rem; }
.settings-section { padding-block: .35rem; }
.setting-choice, .preview-choice, .accent-choice { cursor: pointer; }
.preview-choice { width: 100%; padding: 0; color: inherit; border: 0; background: transparent; }
.preview-choice img { display: block; width: 100%; margin-bottom: .5rem; border: 2px solid var(--psm-border); border-radius: .55rem; }
.preview-choice.active img, .preview-choice:focus-visible img { border-color: var(--bs-primary); box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .2); }
.accent-choice { display: grid; place-items: center; min-width: 0; height: 3.25rem; border: 1px solid var(--psm-border); border-radius: .55rem; background: transparent; }
.accent-choice.active { border-color: var(--bs-primary); box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .15); }
.accent-swatch { width: 2rem; height: 2rem; border-radius: 50%; background: linear-gradient(135deg, #31baf1 0 50%, #0169ca 50%); }
.accent-blue { background: linear-gradient(135deg, #00c3f9 0 50%, #573bff 50%); }.accent-gray { background: linear-gradient(135deg, #91969e 0 50%, #fd8d00 50%); }.accent-red { background: linear-gradient(135deg, #db5363 0 50%, #366af0 50%); }.accent-yellow { background: linear-gradient(135deg, #ea6a12 0 50%, #6410f1 50%); }.accent-pink { background: linear-gradient(135deg, #e586b3 0 50%, #25c799 50%); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.card { border-color: var(--psm-border); }
.form-control, .form-select, .custom-select { min-height: 2.8rem; border-color: #d7dbe7; }
.form-group { margin-bottom: 1rem; }
fieldset { --psm-fieldset-padding: 1.25rem; min-width: 0; margin-bottom: 1.25rem; padding: var(--psm-fieldset-padding); border: 0; border-radius: .85rem; background: var(--psm-surface); box-shadow: 0 0 0 1px var(--psm-border); overflow: hidden; }
legend { float: left; width: calc(100% + (2 * var(--psm-fieldset-padding))); margin: calc(-1 * var(--psm-fieldset-padding)) calc(-1 * var(--psm-fieldset-padding)) var(--psm-fieldset-padding); padding: 1rem var(--psm-fieldset-padding); border-bottom: 1px solid var(--psm-border); background: rgba(var(--bs-primary-rgb), .035); font-size: 1rem; font-weight: 700; line-height: 1.35; }
fieldset > legend + * { clear: both; }
.appearance-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: 1rem; }
.appearance-card { margin-top: 1.5rem; }
.push-device-card .card-header > .d-flex { flex-wrap: wrap; }
.push-device-card .card-header > .d-flex .btn { flex: 1 1 auto; }
.module-actions .row { margin: 0; }
.module-actions .btn { margin-inline-end: .5rem; margin-bottom: .5rem; }
.auth-page-content{min-height:100vh}.auth-messages{z-index:1090;width:min(34rem,calc(100% - 2rem))}.auth-layout{min-height:100vh;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:0;background:var(--bs-body-bg)}.auth-form-pane{display:grid;place-items:center;padding:clamp(1.5rem,4vw,4rem)}.auth-card.card{width:min(100%,30rem);overflow:visible;border:0!important;background:transparent!important;box-shadow:none!important}.auth-card.card .card-body{padding:0}.auth-card .navbar-brand,.auth-card h1,.auth-card .form-label{color:var(--bs-body-color)}.auth-visual{position:relative;overflow:hidden;background:#0865ed url('../hope/images/auth/01.png') center/cover no-repeat}.auth-visual-brand{position:absolute;inset:2rem 2rem auto auto}.auth-layout-single{place-items:stretch}html[data-bs-theme="dark"] .auth-card.card{background:transparent!important;box-shadow:none!important}
.brand-mark-lg { width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; border-radius: 1rem; font-size: 1.35rem; }
.user-card, .server-admin-card, .status-card { height: 100%; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.user-card:hover, .server-admin-card:hover, .status-card:hover { transform: translateY(-2px); box-shadow: 0 .65rem 1.5rem rgba(17,38,146,.12); }
.avatar { width: 3rem; height: 3rem; flex: 0 0 3rem; border-radius: .85rem; display: grid; place-items: center; color: #fff; background: var(--bs-primary); font-weight: 700; }
.user-contact { display: grid; gap: .5rem; color: #6c757d; }
.timeline, .timeline-list { position: relative; display: grid; gap: 1rem; }.timeline-item { position: relative; min-width: 0; }.timeline-marker { width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; display: grid; place-items: center; border-radius: .75rem; background: rgba(var(--bs-primary-rgb),.12); color: var(--bs-primary); }.timeline-item .card-body, .timeline-item .content { min-width: 0; max-width: 100%; overflow-wrap:anywhere; }
.dropzone-field { display:grid; grid-template-columns:7rem minmax(0,1fr); align-items:center; gap:1.25rem; padding:1.5rem; border:2px dashed #c8cddd; border-radius:.85rem; background:rgba(var(--bs-primary-rgb),.03); cursor:pointer; }.dropzone-field:focus-within,.dropzone-field.is-dragging { border-color:var(--bs-primary); background:rgba(var(--bs-primary-rgb),.08); }.dropzone-preview { width:7rem; height:7rem; padding:.5rem; border:1px solid var(--psm-border); border-radius:.75rem; background:var(--psm-surface); object-fit:contain; }.dropzone-copy,.min-w-0 { min-width:0; }
.server-media-frame { position:relative; height:10rem; display:grid; place-items:center; overflow:hidden; background:#f6f7fb; }.server-media { width:100%; height:100%; padding:1rem; object-fit:contain; }.server-media--compact { width:7rem; height:7rem; flex:0 0 7rem; }.status-indicator { position:absolute; inset-block-start:.75rem; inset-inline-end:.75rem; width:2rem; height:2rem; display:grid; place-items:center; border-radius:50%; color:#fff; background:#6c757d; box-shadow:0 .2rem .5rem rgba(0,0,0,.2); }.status-online .status-indicator{background:#198754}.status-warning .status-indicator{background:#f59e0b}.status-offline .status-indicator,.status-off .status-indicator{background:#dc3545}.status-online{border-top:.25rem solid #198754}.status-warning{border-top:.25rem solid #f59e0b}.status-offline,.status-off{border-top:.25rem solid #dc3545}.status-paused{border-top:.25rem solid #6c757d;opacity:.82}
.status-banner{display:flex;align-items:center;gap:.55rem;margin:-1.5rem -1.5rem 1.25rem;padding:.7rem 1rem;color:#fff;letter-spacing:.055em;font-size:.78rem}.status-banner-icon{width:1.55rem;height:1.55rem;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.2);font-size:1.05rem}.status-banner--online{background:#137a43}.status-banner--offline{background:#c03221}.status-banner--warning{background:#c56a09}.status-banner--paused{background:#596273}.status-pulse{width:.65rem;height:.65rem;margin-inline-start:auto;border-radius:50%;background:currentColor;box-shadow:0 0 0 .25rem rgba(255,255,255,.18)}.status-online .card-body{background:linear-gradient(180deg,rgba(25,135,84,.045),transparent 42%)}.status-offline .card-body{background:linear-gradient(180deg,rgba(220,53,69,.065),transparent 42%)}
.status-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(18rem,100%),1fr));gap:1.5rem}.server-image-box{width:6rem;height:6rem;flex:0 0 6rem;margin-inline:auto;display:grid;place-items:center;overflow:hidden;border-radius:1rem;background:var(--bs-tertiary-bg)}.server-image-box img{width:100%;height:100%;padding:.65rem;object-fit:contain}.status-card-title{overflow-wrap:anywhere;word-break:normal}.status-card--compact .card-body{display:grid!important;grid-template-columns:6rem minmax(0,1fr);gap:1.25rem;align-items:center}.status-card--compact .status-banner{grid-column:1/-1}.status-card--compact .server-image-box{margin:0 auto}.status-card--compact .server-facts{grid-column:2}
.dashboard-stat-card{min-height:7rem}.stat-icon{width:2.75rem;height:2.75rem;flex:0 0 2.75rem;display:grid;place-items:center;border-radius:.8rem}.dashboard-chart{min-height:19rem}.notification-count{position:absolute;inset-block-start:-.25rem;inset-inline-end:-.4rem;min-width:1.35rem}.notification-dropdown{width:min(24rem,calc(100vw - 2rem))}.notification-dropdown-list{max-height:22rem;overflow-y:auto}.notification-unread{background:rgba(var(--bs-primary-rgb),.06)}
.server-facts{display:grid;gap:.65rem}.server-facts>div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--psm-border);padding-bottom:.5rem}.server-facts dt{color:#8a92a6;font-size:.8rem;font-weight:600}.server-facts dd{margin:0;text-align:end;overflow-wrap:anywhere}.channel-chips{display:flex;flex-wrap:wrap;gap:.4rem}.channel-chip{width:2rem;height:2rem;display:inline-grid;place-items:center;border-radius:.55rem;color:var(--bs-primary);background:rgba(var(--bs-primary-rgb),.1);font-size:.82rem;font-weight:700}
.server-detail-grid,.server-detail-tabs,.history-panel,.history-graph,.chart-container{min-width:0;max-width:100%}.server-detail-image{width:8rem;height:8rem;display:grid;place-items:center;border-radius:1.25rem;background:#f6f7fb;overflow:hidden}.server-detail-image img{width:100%;height:100%;padding:.75rem;object-fit:contain}.server-detail-tabs>.card-header .nav-link{white-space:nowrap}.history-graph{margin-inline:0}.chart-container{position:relative;width:100%;overflow:hidden}.chart-container canvas{max-width:100%!important}.history-range-controls .btn{flex:1 1 auto}.output-panel-content{max-width:100%;max-height:24rem;margin:0;padding:1rem;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;border-radius:.65rem;background:#111827;color:#e5e7eb}
.config-layout{display:grid;grid-template-columns:minmax(12rem,15rem) minmax(0,1fr);gap:1.5rem;align-items:start}.config-tabs{position:sticky;top:5.75rem;display:grid;gap:.35rem;padding:.75rem;border:1px solid var(--psm-border);border-radius:.85rem;background:var(--psm-surface)}.config-tabs .nav-link{width:100%;text-align:start;border-radius:.6rem}.config-content{min-width:0}.install-shell{width:min(100%,62rem);margin-block:2rem}.install-stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;padding:1.25rem 2rem;list-style:none;border-bottom:1px solid var(--psm-border)}
.dark,html[data-bs-theme="dark"]{--psm-surface:#20242d;--psm-border:#343946;--bs-body-bg:#151824;--bs-body-color:#e4e7ef;color-scheme:dark}.dark .card,.dark fieldset,.dark .app-footer,html[data-bs-theme="dark"] .card,html[data-bs-theme="dark"] fieldset{color:#e4e7ef;background:var(--psm-surface)}.dark .form-control,.dark .form-select,.dark .custom-select{color:#f2f4f8;background-color:#171a22;border-color:#404655}.dark .server-media-frame,.dark .server-image-box{background:#171a22}

@media (max-width: 1199.98px) {
    .sidebar.sidebar-base { width: var(--psm-sidebar-width); max-width: var(--psm-sidebar-width); transform: translateX(0) !important; transition: transform .2s ease; box-shadow: 0 0 2rem rgba(17, 24, 39, .18); }
    .sidebar.sidebar-base.sidebar-mini { transform: translateX(-100%) !important; pointer-events: none; }
    [dir="rtl"] .sidebar.sidebar-base.sidebar-mini { transform: translateX(100%) !important; }
    .sidebar-default + .main-content,.sidebar-default.sidebar-mini + .main-content { width: 100%; margin: 0 !important; }
    .sidebar-backdrop { position: fixed; inset: 0; z-index: 1035; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(16, 24, 40, .48); }
    .sidebar-backdrop[hidden] { display: none !important; }
    .content-inner { padding-inline: 1rem; }
    .config-layout { grid-template-columns:1fr; }.config-tabs{position:static;display:flex;overflow-x:auto}.config-tabs .nav-link{white-space:nowrap}.auth-layout{grid-template-columns:1fr}.auth-visual{display:none}
}
@media (min-width: 1200px) { .sidebar-backdrop { display: none !important; } }
@media (max-width: 575.98px) {
    .iq-navbar .navbar-inner{gap:.4rem}.iq-navbar-header { min-height:9rem; }.iq-navbar-header .h2{font-size:1.5rem}.content-inner{padding-inline:.75rem}.app-footer{padding-inline:1rem}fieldset{--psm-fieldset-padding:1rem}.auth-card.card .card-body,.auth-brand-panel{padding:0}.server-media-frame{height:8rem}.dropzone-field{grid-template-columns:1fr;justify-items:center;text-align:center}.server-image-box{width:4.5rem;height:4.5rem}.status-card--compact{grid-template-columns:5.5rem minmax(0,1fr)}.dashboard-chart{min-height:15rem}.accent-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.install-stepper{grid-template-columns:repeat(2,1fr);row-gap:.75rem;padding:1rem}
}