@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
:root{--cds-bg:#f4f4f4;--cds-layer:#fff;--cds-layer-hover:#e8e8e8;--cds-text:#161616;--cds-text-secondary:#525252;--cds-border:#8d8d8d;--cds-border-subtle:#e0e0e0;--cds-blue:#0f62fe;--cds-blue-hover:#0353e9;--cds-green:#198038;--cds-red:#da1e28;--cds-yellow:#f1c21b;--cds-purple:#8a3ffc;--cds-header:#161616}
html[dir="rtl"] body{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif}
html[dir="ltr"] body{font-family:'IBM Plex Sans','IBM Plex Sans Arabic',sans-serif}
body{background:var(--cds-bg);color:var(--cds-text);font-size:14px;min-height:100vh}.hidden{display:none!important}
button,input,select,textarea{font:inherit}

/* Carbon header */
header{height:48px;background:var(--cds-header);color:#f4f4f4;display:flex;align-items:center;justify-content:space-between;padding:0 16px;position:sticky;top:0;z-index:20;border-bottom:1px solid #393939}.brand{height:48px;display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;letter-spacing:.1px}.brand:before{content:'B';background:var(--cds-blue);width:32px;height:32px;display:grid;place-items:center;font-size:18px;font-weight:600}.logo{display:none}.hdr-actions{height:100%;display:flex;align-items:stretch;gap:0}.hdr-actions .btn{border-inline-start:1px solid #393939;border-radius:0;height:48px}

/* Carbon buttons */
.btn{border:0;border-radius:0;min-height:40px;padding:0 16px;cursor:pointer;font-weight:400;transition:background .12s,color .12s;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn.primary{background:var(--cds-blue);color:#fff}.btn.primary:hover{background:var(--cds-blue-hover)}.btn.outline{background:transparent;color:var(--cds-blue);box-shadow:inset 0 0 0 1px var(--cds-blue)}.btn.outline:hover{background:#edf5ff}.hdr-actions .btn.outline{color:#fff;box-shadow:none;background:var(--cds-blue)}.hdr-actions .btn.outline:hover{background:var(--cds-blue-hover)}.btn.ghost{background:transparent;color:var(--cds-blue)}.btn.ghost:hover{background:#e8e8e8}.hdr-actions .btn.ghost{color:#f4f4f4}.hdr-actions .btn.ghost:hover{background:#353535}.btn.danger{background:transparent;color:var(--cds-red)}.btn.danger:hover{background:#fff1f1}.btn.sm{min-height:32px;padding:0 12px;font-size:12px}

/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:#161616;padding:16px}.login-card{width:100%;max-width:400px;background:#262626;color:#f4f4f4;padding:32px}.login-card:before{content:'B';display:grid;place-items:center;width:48px;height:48px;background:var(--cds-blue);font-size:26px;font-weight:600;margin-bottom:24px}.login-card h1{font-size:28px;font-weight:300;line-height:1.25;margin-bottom:8px}.login-card .sub{color:#c6c6c6;margin-bottom:32px}.login-card input{width:100%;height:48px;background:#f4f4f4;border:0;border-bottom:1px solid var(--cds-border);padding:0 16px;color:#161616;outline:none;margin-bottom:16px}.login-card input:focus{outline:2px solid var(--cds-blue);outline-offset:-2px}.login-card .btn{width:100%;height:48px;justify-content:flex-start}

/* page */
main{max-width:1280px;margin:0 auto;padding:32px 24px 64px}section{margin-bottom:48px}.sec-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:16px;border-bottom:1px solid var(--cds-border-subtle);padding-bottom:12px}.sec-head h2{font-size:24px;font-weight:300}.muted{color:var(--cds-text-secondary);font-size:12px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,410px));gap:1px;background:transparent;border:0;align-items:stretch}.cards>.card,.cards>.loading{border:1px solid var(--cds-border-subtle)}.card{background:var(--cds-layer);padding:20px;min-height:180px;transition:background .12s}.card:hover{background:var(--cds-layer-hover)}.card .top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:20px}.domain{font-size:17px;font-weight:500;color:var(--cds-blue);text-decoration:none;word-break:break-all}.domain:hover{text-decoration:underline}.badge{font-size:11px;padding:4px 8px;border-radius:12px;white-space:nowrap}.badge.running{background:#a7f0ba;color:#044317}.badge.stopped,.badge.error{background:#ffd7d9;color:#750e13}.badge.installing,.badge.pending{background:#fddc69;color:#3d2c00}.meta{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;color:var(--cds-text-secondary);font-size:12px;margin-bottom:16px}.meta b{color:var(--cds-text);font-weight:500}.creds{background:#f4f4f4;border-inline-start:3px solid var(--cds-blue);padding:10px 12px;margin-bottom:16px;font-family:'IBM Plex Mono',monospace;font-size:12px;direction:ltr;text-align:left;word-break:break-all}.actions{display:flex;flex-wrap:wrap;gap:1px;border-top:1px solid var(--cds-border-subtle);padding-top:12px}.actions .btn{min-height:32px;padding:0 10px;font-size:12px}.errbox{margin-top:12px;background:#fff1f1;border-inline-start:3px solid var(--cds-red);padding:10px;color:#750e13;font-size:12px;white-space:pre-line}.loading{background:#fff;padding:40px;text-align:center;color:var(--cds-text-secondary)}
.srv-card{min-height:120px;display:flex;justify-content:space-between;align-items:flex-start}.srv-card .name{font-weight:500;font-size:16px;margin-bottom:8px}.srv-card .host{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--cds-text-secondary);direction:ltr;text-align:start}.tag{display:inline-block;background:#e8e8e8;border-radius:12px;padding:4px 8px;font-size:11px}

/* Carbon forms and modal */
.modal{position:fixed;inset:0;background:rgba(22,22,22,.65);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}.modal-card{width:100%;max-width:560px;max-height:90vh;overflow:auto;background:#fff;padding:32px}.modal-card h3{font-size:22px;font-weight:400;margin-bottom:24px}.modal-card label{display:block;font-size:12px;color:var(--cds-text-secondary);margin-top:16px;margin-bottom:6px}.modal-card input,.modal-card select,.modal-card textarea{width:100%;background:#f4f4f4;border:0;border-bottom:1px solid var(--cds-border);padding:0 16px;min-height:48px;outline:0;color:var(--cds-text)}.modal-card textarea{padding:12px 16px;resize:vertical}.modal-card input:focus,.modal-card select:focus,.modal-card textarea:focus{outline:2px solid var(--cds-blue);outline-offset:-2px}.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.modal-actions{display:flex;justify-content:flex-end;margin-top:32px}.modal-actions .btn{min-width:120px}.hint{background:#edf5ff;border-inline-start:3px solid var(--cds-blue);padding:12px;margin-top:16px;font-size:12px;color:#0043ce}.err{color:var(--cds-red);font-size:12px;margin-top:10px}
#toast{position:fixed;bottom:24px;inset-inline-end:24px;min-width:280px;background:#262626;color:#fff;padding:16px 20px;z-index:100;border-inline-start:4px solid var(--cds-blue)}#toast.ok{border-color:var(--cds-green)}#toast.error{border-color:var(--cds-red)}.spin{display:inline-block;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:640px){header{padding:0 8px}.brand span:not(.logo){display:none}.hdr-actions .btn{padding:0 10px;font-size:12px}main{padding:24px 12px}.cards{grid-template-columns:1fr}.row2{grid-template-columns:1fr}.modal-card{padding:24px 16px}.sec-head h2{font-size:21px}}