@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#101820;--panel:#18232d;--panel2:#1d2b36;--line:#2b3b48;--text:#eef5f7;--muted:#9eafb9;--mint:#63d6c8;--mint2:#27b6a5;--sidebar:258px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:"Cairo",Tahoma,Arial,sans-serif;min-height:100vh}button{font:inherit;cursor:pointer}.app-shell{min-height:100vh}.sidebar{width:var(--sidebar);position:fixed;inset:0 0 0 auto;background:#151f28;border-left:1px solid var(--line);padding:27px 17px;display:flex;flex-direction:column;z-index:5}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);padding:0 7px 32px}.brand-mark{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;background:linear-gradient(145deg,#2b807a,#1d4f55);color:#b5fff4;font-size:25px;box-shadow:0 8px 25px #27b6a533}.brand strong,.brand small{display:block}.brand strong{font-size:16px}.brand small{font-size:10px;color:var(--muted);direction:ltr;text-align:right}.nav{display:grid;gap:7px}.nav-link{display:flex;align-items:center;gap:13px;border:0;background:transparent;color:#b4c1c8;text-align:right;padding:12px 14px;border-radius:12px;font-size:13px;width:100%}.nav-link>span:first-child{font-size:19px;width:22px;text-align:center;color:#8ea5af}.nav-link:hover,.nav-link.active{background:#203d3b;color:#eafffb}.nav-link.active>span:first-child{color:var(--mint)}.sidebar-bottom{margin-top:auto}.privacy-note{display:flex;gap:11px;align-items:center;padding:13px 11px;margin-bottom:15px;background:#1a2b30;border:1px solid #294a49;border-radius:13px}.privacy-dot,.connection i{width:8px;height:8px;border-radius:50%;background:#63d6a5;box-shadow:0 0 12px #63d6a577;flex:none}.privacy-note strong,.privacy-note small{display:block}.privacy-note strong{font-size:12px}.privacy-note small{font-size:10px;color:var(--muted);margin-top:2px}.main{margin-right:var(--sidebar);min-height:100vh}.topbar{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px;background:#121c24cc}.crumb,.top-actions{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted)}.crumb b{color:#52636d}.crumb strong{color:var(--text)}.top-actions{gap:18px}.connection{display:flex;align-items:center;gap:8px}.language,.mobile-menu{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:7px 12px}.mobile-menu{display:none}.content{max-width:1240px;margin:auto;padding:37px 40px 20px}.hidden{display:none}.welcome{border:1px solid #31504f;background:radial-gradient(ellipse at 90% 10%,#287a7040,transparent 45%),linear-gradient(115deg,#1a2a34,#1b3438);border-radius:22px;padding:29px 32px;display:flex;justify-content:space-between;align-items:center;overflow:hidden}.eyebrow{font-size:10px;letter-spacing:1.6px;color:var(--mint);font-weight:800;margin:0 0 8px}.welcome h1,.page-intro h1{font-size:26px;margin:0 0 7px;font-weight:800}.muted{color:var(--muted);font-size:13px;line-height:1.9;margin:0}.welcome-icon{font-size:65px;color:#83e8d6;opacity:.8;text-shadow:0 0 35px #63d6c8}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin:20px 0 34px}.stat-card,.device-card,.empty-panel{background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:19px}.stat-card{display:grid;gap:5px}.stat-icon{color:var(--mint);font-size:22px}.stat-card strong{font-size:27px}.stat-card>span:nth-of-type(2){font-size:13px;font-weight:700}.stat-card small{color:var(--muted);font-size:10px}.section-heading{margin-bottom:13px}.section-heading h2{font-size:18px;margin:0}.device-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.device-card{padding:20px}.device-top{display:flex;align-items:center;justify-content:space-between}.device-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:#203b3b;color:var(--mint);font-size:24px}.status{font-size:10px;padding:5px 10px;border-radius:30px}.status.pending{background:#443922;color:#f0cb82}.device-card h3{font-size:17px;margin:16px 0 5px}.device-card p{font-size:12px;line-height:1.9;color:var(--muted);min-height:47px;margin:0 0 16px}.outline-button{background:#203d3b;border:1px solid #32635d;color:#b8f7eb;border-radius:10px;padding:9px 14px;font-size:11px}.outline-button:hover{background:#28514b}.notice{display:flex;align-items:flex-start;gap:12px;margin-top:18px;padding:14px 17px;border:1px solid #4c4935;background:#29291f;border-radius:13px;color:#e7d7a7;font-size:11px;line-height:1.9}.notice p{margin:0}.notice>span{font-size:17px}.page-intro{margin:4px 0 25px}.page-intro h1{margin-bottom:8px}.empty-panel{text-align:center;padding:55px 20px}.empty-panel>span{font-size:38px;color:var(--mint)}.empty-panel h2{font-size:17px;margin:13px 0 6px}.empty-panel p{color:var(--muted);font-size:12px;margin:0;line-height:1.8}footer{padding:28px 40px 22px;text-align:center;color:#6f828c;font-size:9px;letter-spacing:1.2px}footer span{color:var(--mint)}
[dir="ltr"] .sidebar{inset:0 auto 0 0;border-left:0;border-right:1px solid var(--line)}[dir="ltr"] .main{margin-right:0;margin-left:var(--sidebar)}[dir="ltr"] .brand small{text-align:left}[dir="ltr"] .nav-link{text-align:left}
@media(max-width:900px){:root{--sidebar:225px}.content{padding:28px 24px}.topbar{padding:0 24px}}
@media(max-width:680px){.sidebar{transform:translateX(105%);transition:transform .22s ease;width:270px;box-shadow:-15px 0 45px #0005}.sidebar.open{transform:translateX(0)}[dir="ltr"] .sidebar{transform:translateX(-105%)}[dir="ltr"] .sidebar.open{transform:translateX(0)}.main,[dir="ltr"] .main{margin:0}.topbar{height:65px;padding:0 16px}.mobile-menu{display:block}.crumb{margin-inline-end:auto;margin-inline-start:12px}.connection{display:none}.content{padding:20px 15px}.welcome{padding:23px 19px}.welcome h1,.page-intro h1{font-size:21px}.welcome-icon{font-size:45px}.stats{grid-template-columns:1fr;gap:10px;margin:13px 0 26px}.stat-card{grid-template-columns:auto 1fr;align-items:center;column-gap:12px;padding:13px 15px}.stat-card .stat-icon{grid-row:span 2}.stat-card strong{font-size:21px}.stat-card>span:nth-of-type(2){font-size:11px}.stat-card small{grid-column:2}.device-grid{grid-template-columns:1fr}.device-card p{min-height:0}.notice{font-size:10px}footer{padding:25px 15px}}


.builder-toolbar{display:grid;grid-template-columns:2fr 1fr;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:16px;margin-bottom:16px}.builder-toolbar label,.edit-field{display:grid;gap:6px;color:var(--muted);font-size:11px}.builder-toolbar input,.builder-toolbar select,.edit-field input{width:100%;background:#101a22;border:1px solid #344754;color:var(--text);border-radius:9px;padding:10px 12px;font:inherit;outline:none}.builder-toolbar input:focus,.builder-toolbar select:focus,.edit-field input:focus{border-color:var(--mint)}.builder-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:15px;align-items:start}.builder-main,.action-library,.saved-scenarios{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:17px}.builder-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.builder-heading h2,.action-library h2,.saved-scenarios h2{font-size:15px;margin:0}.step-count{font-size:10px;color:var(--muted);background:#25343e;padding:5px 9px;border-radius:20px}.steps-list{display:grid;gap:9px;min-height:100px}.empty-builder{text-align:center;padding:25px 10px;display:grid;gap:5px;color:var(--muted)}.empty-builder span{font-size:30px;color:var(--mint)}.empty-builder strong{font-size:13px;color:var(--text)}.empty-builder small{font-size:10px}.step-card{display:flex;align-items:center;gap:10px;background:#202e38;border:1px solid #30414d;border-radius:12px;padding:10px}.step-number{width:29px;height:29px;display:grid;place-items:center;border-radius:9px;background:#244b49;color:var(--mint);font-size:12px;font-weight:800;flex:none}.step-info{min-width:0;flex:1}.step-info strong,.step-info small{display:block;overflow-wrap:anywhere}.step-info strong{font-size:12px}.step-info small{font-size:9px;color:var(--muted);margin-top:3px}.step-tools{display:flex;gap:3px}.step-tools button,.saved-item button{border:1px solid #3b4c58;background:#192630;color:#c3d3d9;border-radius:7px;width:27px;height:27px}.step-tools button:disabled{opacity:.3;cursor:not-allowed}.step-tools button:last-child,.saved-item button:last-child{color:#ffaaa4}.builder-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.primary-button{border:1px solid #398b80;background:linear-gradient(130deg,#287e75,#225b5a);color:#effffb;border-radius:9px;padding:9px 14px;font:inherit;font-size:11px}.builder-feedback{min-height:17px;color:var(--mint);font-size:10px;margin:9px 0 0}.action-library>p{color:var(--muted);font-size:10px;line-height:1.8}.action-library>div{display:grid;gap:7px}.action-choice{display:flex;align-items:center;gap:9px;text-align:start;background:#202e38;border:1px solid #30414d;color:var(--text);border-radius:9px;padding:9px 10px;font:inherit;font-size:11px}.action-choice:hover{border-color:var(--mint);background:#23403e}.action-choice span{color:var(--mint);font-size:17px}.saved-scenarios{margin-top:15px}.saved-list{display:grid;gap:7px;margin-top:12px}.saved-item{display:flex;align-items:center;gap:8px;padding:9px 10px;background:#202e38;border:1px solid #30414d;border-radius:10px}.saved-item>span{flex:1;min-width:0}.saved-item strong,.saved-item small{display:block;overflow-wrap:anywhere}.saved-item strong{font-size:11px}.saved-item small{font-size:9px;color:var(--muted);margin-top:2px}.saved-item button{width:auto;padding:0 9px;font-size:10px}.modal-backdrop{position:fixed;inset:0;background:#050b10cc;z-index:20;display:grid;place-items:center;padding:16px}.edit-modal,.json-modal{width:min(100%,480px);max-height:85vh;overflow:auto;background:#192630;border:1px solid #3a515e;border-radius:16px;padding:19px;box-shadow:0 20px 70px #0009}.json-modal{width:min(100%,680px)}.edit-modal h3,.json-modal h3{margin:0 0 15px;font-size:16px}.edit-field{margin:10px 0}.edit-field input.invalid{border-color:#e58b80}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.json-modal pre{direction:ltr;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;background:#101820;border:1px solid #30414d;border-radius:10px;padding:13px;max-height:55vh;overflow:auto;font-size:10px;color:#c9e7e2}.validation-ok{color:#79dbb0;font-size:11px}.validation-error{color:#ffb08e;font-size:11px}
@media(max-width:850px){.builder-layout{grid-template-columns:1fr}.action-library{order:-1}.action-library>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.builder-toolbar{grid-template-columns:1fr}.builder-main,.action-library,.saved-scenarios{padding:13px}.step-card{align-items:flex-start}.step-tools{flex-wrap:wrap}.builder-actions>*{flex:1}.action-library>div{grid-template-columns:1fr}.step-info small{font-size:8px}}