:root{--bg:#07111f;--panel:#0e1b2e;--panel2:#13243b;--panel3:#182d48;--line:#263b59;--text:#f1f6ff;--muted:#91a6c1;--accent:#2ee6a6;--blue:#2d86ff;--danger:#ff5f6d;--warning:#ffba45;--cell:48px;--shadow:0 14px 40px rgba(0,0,0,.38)}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text);font:14px Inter,Segoe UI,Arial,sans-serif;overflow:hidden}.app-shell{display:grid;grid-template-columns:226px 1fr;height:100vh}.sidebar{background:#091627;border-right:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column}.brand{display:flex;gap:10px;align-items:center;padding:4px 8px 24px}.brand-mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--blue));font-weight:900;font-size:21px;box-shadow:0 8px 25px #1acb9b35}.brand strong{font-size:17px}.brand small,.canvas-head small,.dialog-head small{display:block;color:var(--muted);margin-top:2px}.nav-item{width:100%;border:0;background:transparent;color:#b7c7da;padding:11px 12px;border-radius:9px;text-align:left;margin:2px 0;cursor:pointer;transition:.18s}.nav-item span{display:inline-block;width:26px}.nav-item:hover,.nav-item.active{background:#172a43;color:#fff}.nav-item.active{box-shadow:inset 3px 0 var(--accent)}.sync-box{margin-top:auto;border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;gap:10px;align-items:center}.sync-box>span{width:10px;height:10px;border-radius:50%;background:#f4b942;box-shadow:0 0 12px #f4b94266}.sync-box small{display:block;color:var(--muted)}.main{min-width:0;display:flex;flex-direction:column}.topbar{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;align-items:center;background:#081525}.topbar h1{margin:0;font-size:24px}.topbar p{margin:4px 0 0;color:var(--muted)}button,input,select{font:inherit}.top-actions,.toolbar{display:flex;gap:8px;align-items:center}.top-actions button,.toolbar button{height:38px}.primary,.secondary,.danger,.danger-ghost,.icon-btn{border-radius:8px;padding:0 14px;border:1px solid var(--line);color:var(--text);cursor:pointer;transition:.16s}.primary{background:var(--blue);border-color:var(--blue);font-weight:800;box-shadow:0 8px 22px #2d86ff30}.secondary,.icon-btn{background:#14263d}.secondary:hover,.icon-btn:hover{background:#1b3454}.danger{width:100%;height:38px;background:#47202a;border-color:#873142;color:#ffdce2}.danger-ghost{background:transparent;border-color:#7b3342;color:#ff9aa7}.icon-btn{width:38px;padding:0}.wide{width:100%;height:38px;margin-bottom:8px}.toolbar{padding:10px 22px;background:#0b1829;border-bottom:1px solid var(--line);flex-wrap:wrap}.toolbar label{color:var(--muted);display:flex;align-items:center;gap:6px}.toolbar input,.toolbar select,.properties input,.properties select,.component-search input{background:#081524;border:1px solid var(--line);border-radius:7px;color:var(--text);height:34px;padding:0 9px}.builder-grid{display:grid;grid-template-columns:225px minmax(540px,1fr) 255px;gap:12px;padding:12px;min-height:0;flex:1}.panel{background:var(--panel);border:1px solid var(--line);border-radius:11px;min-height:0;box-shadow:0 8px 22px rgba(0,0,0,.12)}.component-panel,.properties{padding:13px;overflow:auto}.panel-title{font-weight:850;margin-bottom:10px}.panel-title-row{display:flex;align-items:center;justify-content:space-between}.panel-title-row span{color:var(--muted);font-size:12px}.component-search{height:36px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;gap:7px;padding:0 9px;background:#081524;margin-bottom:10px}.component-search input{border:0;background:transparent;outline:0;width:100%;padding:0}.component-tabs{display:flex;gap:5px;overflow:auto;padding-bottom:8px}.component-tab{white-space:nowrap;padding:6px 9px;border:1px solid var(--line);border-radius:999px;background:#102139;color:var(--muted);cursor:pointer;font-size:12px}.component-tab.active{color:#fff;background:#1c3c61;border-color:#3e6f9e}.component-list{display:grid;gap:8px}.component-source{border:1px solid var(--line);background:linear-gradient(145deg,#152a45,#102139);padding:10px;border-radius:9px;cursor:grab;user-select:none;display:grid;grid-template-columns:32px 1fr;gap:9px;align-items:center}.component-source:hover{border-color:#47749f;transform:translateY(-1px)}.source-icon{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:#0a1829;font-size:16px}.component-source strong{display:block}.component-source small{color:var(--muted)}.canvas-wrap{display:flex;flex-direction:column;min-width:0}.canvas-head{height:50px;padding:9px 12px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.canvas-tools,.zoom{display:flex;align-items:center;gap:8px}.switch-label{font-size:12px;color:var(--muted)}.zoom button{background:#15263c;color:#fff;border:1px solid var(--line);border-radius:5px;width:28px;height:28px}.canvas-stage{flex:1;overflow:auto;padding:22px;background:#050d18}.canvas{position:relative;transform-origin:top left;background-color:#071321;background-image:linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px);background-size:var(--cell) var(--cell);border:1px solid #38516f;box-shadow:var(--shadow);overflow:hidden}.canvas.no-grid{background-image:none}.guide-line{position:absolute;pointer-events:none;z-index:90;background:#4fe4ff}.guide-line.v{width:1px;top:0;bottom:0}.guide-line.h{height:1px;left:0;right:0}.layout-item{position:absolute;border:1px solid #4d6786;border-radius:var(--radius,10px);background:var(--item-bg,#10243d);overflow:hidden;min-width:40px;min-height:40px;user-select:none;box-shadow:0 8px 20px rgba(0,0,0,.22)}.layout-item.selected{outline:2px solid var(--accent);outline-offset:1px;z-index:100}.layout-item.locked{border-style:dashed}.item-toolbar{height:24px;padding:3px 7px;background:#06111ed9;border-bottom:1px solid #ffffff16;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:space-between;cursor:move}.item-toolbar .mini-actions{color:#9cb0c8}.item-content{height:calc(100% - 24px);font-size:var(--font-size,14px);padding:var(--padding,8px);display:flex;gap:var(--gap,6px);align-items:stretch;justify-content:flex-start}.resize-handle{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,var(--accent) 51%)}.properties label{display:block;color:var(--muted);margin:9px 0}.properties label input:not([type=checkbox]),.properties label select{display:block;width:100%;margin-top:5px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px}.properties .check{display:flex;gap:8px;align-items:center}.properties hr{border:0;border-top:1px solid var(--line);margin:18px 0}.empty-props{padding:20px 8px;color:var(--muted);text-align:center}.selected-chip{display:flex;align-items:center;gap:8px;padding:9px;border-radius:8px;background:#142a45;border:1px solid var(--line)}.selected-chip span{font-size:18px}.target-summary{display:grid;grid-template-columns:1fr;gap:4px}.target-summary span{color:var(--muted);font-size:11px;margin-top:6px}.toast{position:fixed;right:22px;bottom:22px;background:#17314c;border:1px solid #3b5572;padding:12px 16px;border-radius:8px;box-shadow:var(--shadow);opacity:0;transform:translateY(15px);pointer-events:none;transition:.2s;z-index:999}.toast.show{opacity:1;transform:none}dialog{width:min(96vw,1420px);height:min(92vh,880px);padding:0;border:1px solid var(--line);border-radius:12px;background:#07111f;color:#fff}.dialog-head{height:52px;display:flex;justify-content:space-between;align-items:center;padding:0 15px;border-bottom:1px solid var(--line)}.dialog-head button{font-size:26px;background:none;border:0;color:#fff;cursor:pointer}.preview-stage{height:calc(100% - 52px);overflow:auto;padding:24px;background:#040b14}.preview-canvas{position:relative;margin:0 auto;background:#071321;border:1px solid var(--line);overflow:hidden;transform-origin:top left}.preview-canvas .layout-item{pointer-events:none}
/* Real POS component visuals */
.pos-card{width:100%;height:100%;display:flex;flex-direction:column;min-width:0}.pos-title{font-weight:850;font-size:1.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.muted{color:#91a6c1}.sale-list{display:grid;gap:5px;margin-top:6px;overflow:hidden}.sale-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:6px 0;border-bottom:1px solid #ffffff12}.sale-row small{display:block;color:#91a6c1}.sale-total{margin-top:auto;border-top:1px solid #ffffff28;padding-top:8px;display:flex;justify-content:space-between;font-size:1.22em;font-weight:900;color:#36e8a8}.search-box{width:100%;height:100%;display:flex;align-items:center;gap:8px;border:1px solid #4d6685;border-radius:9px;background:#081421;padding:0 12px}.search-box button{margin-left:auto;background:#eef4ff;color:#183b5b;border:0;border-radius:7px;padding:7px 13px;font-weight:800}.tile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap,6px);width:100%;height:100%}.dept-tile,.product-tile,.pay-btn,.quick-btn,.action-btn{border-radius:8px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;min-width:0}.dept-tile{background:var(--tile,#1b79dc);padding:5px}.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap,6px);width:100%;height:100%}.product-tile{background:#0b1b2e;border:1px solid #253f5e;flex-direction:column;align-items:flex-start;padding:7px}.product-image{width:100%;flex:1;border-radius:6px;background:linear-gradient(145deg,#173653,#0d2035);display:grid;place-items:center;color:#2dd9ff;font-size:1.5em}.product-tile small{color:#a6bad0}.keypad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap,6px);width:100%;height:100%}.key-key{display:grid;place-items:center;background:#172b45;border-radius:7px;font-weight:900;font-size:1.15em}.quick-grid,.payment-grid,.actions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap,6px);width:100%;height:100%}.quick-btn{background:#0a8f45}.pay-btn{background:#0a8f45}.pay-btn.card{background:#1979da}.pay-btn.zelle{background:#7b27c8}.pay-btn.alt{background:#009c8b}.action-btn{background:#344b65}.action-btn.danger{background:#da2137}.customer-display{width:100%;height:100%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 50% 15%,#17446a,#071421 65%)}.customer-display strong{font-size:1.5em}.logo-block{width:100%;height:100%;display:grid;place-items:center;font-size:1.45em;font-weight:900;letter-spacing:.06em}.clock-block{width:100%;height:100%;display:grid;place-items:center;font-size:1.4em;font-weight:900}.promo-block{width:100%;height:100%;display:grid;place-items:center;text-align:center;background:linear-gradient(135deg,#6526d9,#137bd8);border-radius:8px;font-weight:900;padding:10px}.theme-light{background:#eaf0f7;color:#152031}.theme-light .layout-item{color:#152031;box-shadow:0 8px 20px #6e849a33}.theme-light .item-toolbar{background:#dbe5f0;color:#1c2b3b}.theme-light .muted,.theme-light .sale-row small,.theme-light .product-tile small{color:#66788c}.theme-light .product-tile,.theme-light .key-key{background:#fff;border-color:#c7d3df}.theme-classic{background:#dbe3eb;color:#182638}.theme-classic .layout-item{background:#f7f9fc!important;color:#182638;border-color:#98aabc}.theme-classic .item-toolbar{background:#d6e0ea;color:#17283a}.theme-compact .item-toolbar{height:20px}.theme-compact .item-content{height:calc(100% - 20px);padding:5px}.theme-compact .layout-item{border-radius:4px}
@media(max-width:1150px){.app-shell{grid-template-columns:70px 1fr}.brand div:not(.brand-mark),.nav-item:not(.active){font-size:0}.nav-item span{font-size:16px}.sync-box div{display:none}.builder-grid{grid-template-columns:190px 1fr}.properties{display:none}}@media(max-width:760px){body{overflow:auto}.sidebar{display:none}.app-shell{grid-template-columns:1fr;height:auto}.component-panel{display:none}.builder-grid{grid-template-columns:1fr;min-height:720px}.topbar{align-items:flex-start}.top-actions{flex-wrap:wrap}.toolbar{overflow:auto;flex-wrap:nowrap}.properties{display:none}}
/* V17.3 Smart Designer */
.layout-item.multi-selected{outline:2px solid #49b9ff;outline-offset:1px;z-index:99}.layout-item.grouped:after{content:'GROUP';position:absolute;right:5px;top:27px;font-size:9px;letter-spacing:.08em;color:#8fdcff;background:#071827cc;border:1px solid #2d759d;border-radius:4px;padding:2px 4px}.multi-props{padding:12px;border:1px solid #315a78;border-radius:9px;background:#102940;margin-bottom:12px}.multi-props strong{display:block;font-size:16px}.multi-props small{display:block;color:var(--muted);margin-top:5px;line-height:1.35}.context-menu{position:fixed;z-index:2000;width:190px;background:#0c1b2d;border:1px solid #35506d;border-radius:9px;padding:6px;box-shadow:0 20px 55px rgba(0,0,0,.5)}.context-menu button{display:block;width:100%;height:34px;border:0;border-radius:6px;background:transparent;color:#eaf3ff;text-align:left;padding:0 10px;cursor:pointer}.context-menu button:hover{background:#173552}.context-menu hr{border:0;border-top:1px solid #263b59;margin:5px}.context-menu .danger-text{color:#ff9faa}.layout-item .edge-handle{position:absolute;background:transparent;z-index:5}.layout-item .edge-handle.n,.layout-item .edge-handle.s{left:18px;right:18px;height:8px;cursor:ns-resize}.layout-item .edge-handle.n{top:0}.layout-item .edge-handle.s{bottom:0}.layout-item .edge-handle.e,.layout-item .edge-handle.w{top:24px;bottom:18px;width:8px;cursor:ew-resize}.layout-item .edge-handle.e{right:0}.layout-item .edge-handle.w{left:0}.selection-hint{color:#7fd7ff;font-size:11px;margin-left:7px}


.devices-table{border:1px solid #26364b;border-radius:12px;overflow:hidden}.devices-row{display:grid;grid-template-columns:100px 1fr 1fr 1.2fr .7fr 1.4fr 1.7fr;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid #26364b}.devices-row:last-child{border-bottom:0}.devices-head{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#8495aa;background:#0b1727}.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}.status-dot.online{background:#2ee6a6;box-shadow:0 0 0 3px rgba(46,230,166,.12)}.status-dot.offline{background:#66768a}.devices-row strong{color:#f5f8fc}@media(max-width:900px){.devices-row{grid-template-columns:90px 1fr 1fr}.devices-row span:nth-child(n+4){display:none}}

.device-actions{display:flex;gap:8px;flex-wrap:wrap}.device-actions button{padding:7px 10px;font-size:12px}.danger-soft{border-color:#6f3341!important;color:#ffb0bd!important}.command-state{display:block;color:#7f90a6;margin-top:4px;font-size:11px}

/* V17.7.0 release integrity */
.studio-release{display:inline-block;margin-left:8px;padding:3px 8px;border:1px solid #31516f;border-radius:999px;color:#9fd8ff;background:#0d2236;font-size:11px;font-weight:700}
.release-badge{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:999px;font-size:10px;line-height:1.4;border:1px solid transparent}
.release-current{color:#7ff1bd;background:#0e3429;border-color:#1f7459}
.release-outdated{color:#ffd18a;background:#3a2a10;border-color:#7b5a20}
.release-newer{color:#a9d4ff;background:#102f50;border-color:#285f93}
.office-view{padding:0 22px 28px;min-height:calc(100vh - 40px)}.bo-head{display:flex;justify-content:space-between;align-items:center;padding:22px 0 14px}.bo-head h1{margin:0;font-size:28px}.bo-head p{margin:5px 0 0;color:#8fa3bc}.bo-content{display:flex;flex-direction:column;gap:16px}.bo-cards{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:14px}.bo-card,.bo-panel{background:#101c2d;border:1px solid #23354c;border-radius:14px;padding:16px}.bo-card small{display:block;color:#8fa3bc}.bo-card strong{display:block;font-size:25px;margin:7px 0}.bo-card span{font-size:12px;color:#687e97}.bo-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.bo-panel h3{margin-top:0}.bo-kv{display:grid;grid-template-columns:1fr auto;gap:12px 18px}.bo-kv span{color:#95a8be}.bo-terminal{display:grid;grid-template-columns:1fr auto;gap:5px 12px;padding:10px 0;border-bottom:1px solid #23354c}.bo-terminal small{grid-column:1/3;color:#71859b}.bo-table-wrap{overflow:auto;background:#101c2d;border:1px solid #23354c;border-radius:14px;max-height:68vh}.bo-table{border-collapse:collapse;width:100%;min-width:850px}.bo-table th,.bo-table td{padding:11px 12px;border-bottom:1px solid #23354c;text-align:left}.bo-table th{position:sticky;top:0;background:#14243a;z-index:1}.bo-table input{width:100%;background:#0b1625;border:1px solid #2a3f59;color:#e8f1fa;border-radius:7px;padding:8px}.bo-toolbar{display:flex;align-items:center;gap:12px}.bo-toolbar input{min-width:320px;background:#0b1625;border:1px solid #2a3f59;color:#fff;border-radius:9px;padding:10px 12px}.bo-loading{padding:60px;text-align:center;color:#8fa3bc}@media(max-width:1100px){.bo-cards{grid-template-columns:repeat(2,1fr)}.bo-grid2{grid-template-columns:1fr}}