body{
    font-family:Tahoma,Arial,sans-serif;
    background:#f6f7fb;
    margin:0;
    padding:0;
    color:#111827;
}

.topbar{
    background:#0f172a;
    color:#fff;
    padding:14px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.12);
}

.topbar-title{font-size:20px;font-weight:bold;}
.topbar-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.topbar-links a{
    color:#fff;
    text-decoration:none;
    padding:8px 12px;
    border-radius:8px;
    background:rgba(255,255,255,.08);
    transition:.15s;
}
.topbar-links a:hover{background:rgba(255,255,255,.18);}
.topbar-account{position:relative;}
.topbar-account summary{
    list-style:none;
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
    color:#fff;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:8px;
    padding:7px 10px;
    display:flex;
    align-items:center;
    gap:7px;
    font-size:13px;
    line-height:1.4;
    user-select:none;
}
.topbar-account summary::marker{content:"";display:none;}
.topbar-account summary::-webkit-details-marker{display:none;}
.topbar-account summary:hover{background:rgba(255,255,255,.18);}
.topbar-account-icon{
    width:22px;
    height:22px;
    min-width:22px;
    max-width:22px;
    min-height:22px;
    max-height:22px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#0f172a;
    background:#e5e7eb;
    overflow:hidden;
    flex:0 0 auto;
}
.topbar-account .topbar-account-icon img{
    width:22px;
    height:22px;
    min-width:22px;
    max-width:22px;
    min-height:22px;
    max-height:22px;
    object-fit:cover;
    display:block;
    border-radius:50%;
}
.topbar-account .topbar-account-icon svg{
    width:18px;
    height:18px;
    flex:0 0 auto;
}
.topbar-account-menu{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    z-index:50;
    min-width:190px;
    background:#fff;
    color:#111827;
    border:1px solid #e5e7eb;
    border-radius:8px;
    box-shadow:0 12px 28px rgba(15,23,42,.18);
    padding:6px;
}
.topbar-account-menu a{
    display:block;
    color:#111827;
    background:transparent;
    border-radius:6px;
    padding:9px 10px;
}
.topbar-account-menu a:hover{background:#f1f5f9;}
.topbar-account-meta{
    color:#64748b;
    font-size:12px;
    padding:7px 10px 6px;
    border-bottom:1px solid #eef2f7;
    margin-bottom:4px;
}
.account-profile-box{
    display:flex;
    align-items:center;
    gap:18px;
    padding:18px;
    border:1px solid #e5e7eb;
    border-radius:8px;
    background:#f8fafc;
    margin-bottom:18px;
}
.account-profile-form{
    display:flex;
    align-items:center;
    gap:18px;
    width:100%;
}
.account-profile-input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}
.account-profile-avatar{
    position:relative;
    width:112px;
    height:112px;
    border-radius:50%;
    overflow:visible;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e5e7eb;
    color:#64748b;
    border:3px solid #fff;
    box-shadow:0 8px 20px rgba(15,23,42,.16);
    cursor:pointer;
    flex:0 0 auto;
}
.account-profile-avatar img,
.account-profile-fallback{
    width:100%;
    height:100%;
    border-radius:50%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    object-fit:cover;
}
.account-profile-avatar img{display:block;}
.account-profile-avatar:hover .account-profile-camera{transform:scale(1.06);}
.account-profile-camera{
    position:absolute;
    left:2px;
    bottom:7px;
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:#0f172a;
    border:2px solid #fff;
    box-shadow:0 6px 14px rgba(15,23,42,.22);
    transition:.15s;
}
.account-profile-copy{
    flex:1;
    min-width:240px;
}
.account-profile-copy h2{margin:0 0 6px;font-size:18px;}
.page-container{padding:24px;}

.container{max-width:1300px;margin:0 auto;}
.container.narrow{max-width:850px;}
.card,.form-card{
    background:#fff;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    padding:20px;
    margin-bottom:16px;
}
.form-card{max-width:850px;margin:0 auto;}
.form-card.narrow{max-width:650px;}
.card h1,.form-card h1{margin-top:0;}

.page-head,.top,.top-actions{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:18px;
}
.page-head h1,.top-actions h1{margin:0 0 8px 0;}
.meta,.help,.hint,.small,.muted{color:#64748b;line-height:1.7;}
.small,.small-link{font-size:12px;}
.small-link{color:#0b74de;text-decoration:none;}

.grid,.grid-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:12px;
    margin-bottom:16px;
}
.grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.service,.stat{
    background:#fafafa;
    border:1px solid #eee;
    border-radius:12px;
    padding:14px;
}
.service{padding:18px;}
.service h3{margin-top:0;margin-bottom:8px;}
.service p{color:#666;line-height:1.7;margin-top:0;}
.stat-title{color:#6b7280;font-size:13px;margin-bottom:6px;}
.stat-value,.stat b{font-size:24px;font-weight:bold;direction:ltr;text-align:left;display:block;margin-top:4px;}

.filter-box,.actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:end;
    margin-bottom:16px;
}
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-row{margin-bottom:14px;}
label{display:block;margin:12px 0 6px;font-weight:bold;}
.form-line{
    display:grid;
    grid-template-columns:190px minmax(0,1fr);
    gap:12px;
    align-items:start;
    margin-bottom:14px;
}
.form-line > label:first-child{margin:10px 0 0;}
.form-line input,
.form-line select,
.form-line textarea{min-width:0;}
.check-label{
    display:flex;
    align-items:center;
    gap:8px;
    margin:8px 0 0;
    font-weight:normal;
}
.is-hidden{display:none!important;}

input[type="text"],input[type="password"],input[type="datetime-local"],input[type="number"],
input[type="date"],select,textarea{
    width:100%;
    box-sizing:border-box;
    padding:10px 12px;
    border:1px solid #d1d5db;
    border-radius:8px;
    font-family:Tahoma,Arial,sans-serif;
    font-size:14px;
    background:#fff;
}
.filter-box input,.filter-box select{min-width:145px;}
.filter-count{
    margin-inline-start:auto;
    align-self:center;
    color:#475569;
    white-space:nowrap;
}
textarea{min-height:90px;resize:vertical;}
input[readonly],input[disabled]{background:#f8fafc;color:#475569;}

.btn,button{
    display:inline-block;
    text-decoration:none;
    border:none;
    border-radius:8px;
    padding:10px 14px;
    cursor:pointer;
    font-size:14px;
    background:#0b74de;
    color:#fff;
}
.btn-primary{background:#0b74de;color:#fff;}
.btn-secondary{background:#edf2f7;color:#222;}
.btn-danger{background:#dc2626;color:#fff;}
.btn-warning,.btn-warn{background:#f59e0b;color:#111;}
.btn-dark{background:#0f172a;color:#fff;}
.btn-ok{background:#16a34a;color:#fff;}

.table-wrap{overflow:auto;}
table{width:100%;border-collapse:collapse;background:#fff;}
th,td{padding:10px;border-bottom:1px solid #eee;text-align:right;vertical-align:top;}
th{background:#fafafa;white-space:nowrap;}
.sort-link{
    color:#111827;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.sort-link span{
    color:#0b74de;
    font-size:13px;
}
.actions,.nowrap{white-space:nowrap;}
.row-menu{position:relative;display:inline-block;}
.row-menu summary{
    list-style:none;
    width:34px;
    height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:#edf2f7;
    cursor:pointer;
    font-size:20px;
    line-height:1;
}
.row-menu summary::-webkit-details-marker{display:none;}
.row-menu-list{
    position:absolute;
    inset-inline-end:0;
    top:38px;
    z-index:20;
    min-width:150px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:8px;
    box-shadow:0 8px 24px rgba(15,23,42,.14);
    padding:6px;
}
.row-menu-list a{
    display:block;
    padding:9px 10px;
    color:#111827;
    text-decoration:none;
    border-radius:6px;
}
.row-menu-list a:hover{background:#f3f4f6;}
.inline-form{display:inline;}
.wa-retry-form input[type="password"]{
    width:120px;
    padding:7px 8px;
    font-size:12px;
    margin-inline-start:6px;
}
.wa-retry-form button{
    padding:7px 9px;
    font-size:12px;
}
.ltr{direction:ltr;text-align:left;unicode-bidi:plaintext;}
.reason,.details,.err-text{max-width:360px;white-space:normal;}
.pager{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:8px 0}
.pager-text{margin:0}
.pager-text a{color:#0f172a;text-decoration:none;padding:2px 6px;border-radius:6px}
.pager-text a:hover{background:#edf2f7}
.pager-text .is-current{font-weight:bold;background:#0f172a;color:#fff}
.pager-gap{padding:0 4px;color:#64748b}
.err-text{color:#991b1b;}

.devices-monitor-page .card{overflow-x:auto;}
.devices-monitor-page .monitor-table{
    min-width:1180px;
    font-size:13px;
}
.devices-monitor-page .monitor-table th,
.devices-monitor-page .monitor-table td{
    padding:8px 9px;
}
.device-actions{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:6px;
    margin-bottom:0;
    white-space:nowrap;
}
.device-actions form{
    display:inline-flex;
    margin:0;
}
.device-actions .btn,
.device-actions button{
    padding:7px 9px;
    border-radius:7px;
    font-size:12px;
    line-height:1.2;
    white-space:nowrap;
}

.badge{
    display:inline-block;
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
    white-space:nowrap;
}
.badge.ok,.badge.g,.badge-ok,.ok{background:#e8f7ea;color:#166534;}
.badge.danger,.badge.r,.badge-off,.danger{background:#fdeaea;color:#991b1b;}
.badge.warn,.badge.y,.warn{background:#fff7db;color:#92400e;}
.badge.info,.info{background:#e8f1ff;color:#1d4ed8;}
.badge.muted,.muted-badge{background:#f3f4f6;color:#4b5563;}
.badge.dark{background:#0f172a;color:#fff;}

.alert,.msg,.err{
    border-radius:10px;
    padding:12px;
    margin:12px 0;
    line-height:1.7;
}
.alert-success,.msg{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;}
.alert-error,.err{background:#fff1f2;color:#9f1239;border:1px solid #fecdd3;}
.alert-warning{background:#fffbeb;color:#92400e;border:1px solid #fde68a;}
.key-box,.key{
    direction:ltr;
    text-align:left;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:8px;
    padding:12px;
    font-family:Consolas,monospace;
    word-break:break-all;
    margin-top:10px;
}
.api-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.api-row input{flex:1;min-width:260px;}
.tenants-box{border:1px solid #e5e7eb;border-radius:8px;padding:12px;max-height:260px;overflow:auto;background:#fafafa;}
.tenant-item{margin-bottom:8px;}
.notice{
    padding:14px;
    border-radius:10px;
    margin-top:20px;
}
.notice-warning{background:#fff3cd;color:#856404;}
.is-disabled{opacity:.65;cursor:not-allowed;}
.login-card{margin-top:40px;}
.inline-input-action{
    display:flex;
    gap:8px;
    align-items:center;
}
.flex-fill{flex:1;}
.section-title{margin:0 0 6px;}

@media(max-width:900px){
    .page-container{padding:14px;}
    table{font-size:12px;}
    .form-line{grid-template-columns:1fr;gap:6px;}
    .form-line > label:first-child{margin:0;}
    .hide-sm{display:none;}
}