:root{
  --dtl-blue:#2b70b8;
  --dtl-blue-hover:#2465a9;
  --dtl-blue-dark:#225f9e;
  --dtl-blue-soft:#ecf5fc;
  --dtl-blue-soft-2:#f4f9fd;
  --dtl-ink:#171c24;
  --dtl-text:#2e3540;
  --dtl-muted:#7c8796;
  --dtl-muted-2:#9aa3af;
  --dtl-border:#e1e5ea;
  --dtl-bg:#f5f6f8;
  --dtl-white:#ffffff;
  --dtl-success:#248b65;
  --dtl-warning:#a77714;
  --dtl-danger:#c74750;
  --dtl-shadow:0 8px 18px rgba(28,58,92,.08);
  --radius:14px;
  --sidebar:236px;
  --topbar:72px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,"Segoe UI",sans-serif;color:var(--dtl-ink);background:var(--dtl-bg)}
body{font-size:14px;line-height:1.48}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
svg{display:block}

/* ===== Shell: identical visual language to DTL Klantenzone ===== */
.app-shell{min-height:100vh;display:flex;background:var(--dtl-bg)}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);padding:20px 15px 16px;background:#fff;color:var(--dtl-text);border-right:1px solid var(--dtl-border);display:flex;flex-direction:column;z-index:60;transition:transform .2s ease}
.sidebar-brand-row{min-height:62px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:0 4px 0 5px;margin-bottom:17px}
.brand{display:block;width:176px;max-width:calc(100% - 28px)}
.brand img{display:block;width:100%;height:auto}
.sidebar-close{border:0;background:transparent;width:24px;height:28px;padding:0;display:grid;place-items:center;color:#1e232a;font-size:19px;line-height:1;border-radius:6px}
.sidebar-close:hover{background:#f3f4f6}
.sidebar-section-label{margin:0 10px 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:#9099a5}
.nav-list{display:grid;gap:5px}
.nav-item{width:100%;min-height:42px;display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:9px;color:#444c58;border:0;background:transparent;text-align:left;font-weight:700;transition:background .15s,color .15s,box-shadow .15s}
.nav-item:hover{background:#f4f6f8;color:#20262e}
.nav-item.active{background:var(--dtl-blue);color:#fff;box-shadow:0 7px 14px rgba(43,112,184,.22)}
.nav-button{font:inherit}
.nav-icon{width:17px;height:17px;display:grid;place-items:center;flex:0 0 17px}
.nav-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-icon svg rect{fill:none}
.sidebar-spacer{flex:1;min-height:24px}
.sidebar-help{margin:0 4px 14px;padding:15px 14px 14px;background:var(--dtl-blue-soft);border-radius:11px;display:grid;gap:3px;color:#6c7c8e}
.sidebar-help strong{font-size:13px;color:#2a638f}
.sidebar-help span{font-size:12px;line-height:1.45}
.sidebar-help a{font-weight:700;color:#2b6fab;margin-top:2px}
.sidebar-user{border-top:1px solid var(--dtl-border);padding:14px 4px 0;display:flex;align-items:center;gap:9px}
.sidebar-avatar{flex:0 0 auto}
.sidebar-user-copy{min-width:0;flex:1}
.sidebar-user-copy strong,.sidebar-user-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-copy strong{font-size:12px;color:#242931}
.sidebar-user-copy small{font-size:10px;color:#87919e;margin-top:1px}
.sidebar-logout{width:30px;height:30px;display:grid;place-items:center;color:#7a8592;border-radius:7px}
.sidebar-logout:hover{background:#f3f5f7;color:#39424d}
.sidebar-logout svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.app-main{margin-left:var(--sidebar);width:calc(100% - var(--sidebar));min-height:100vh;display:flex;flex-direction:column;transition:margin-left .2s ease,width .2s ease}
.topbar{height:var(--topbar);padding:0 28px;border-bottom:1px solid var(--dtl-border);background:#fff;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;position:sticky;top:0;z-index:40}
.mobile-menu{justify-self:start;border:0;background:transparent;color:#171b20;width:38px;height:38px;padding:0;display:grid;place-items:center;border-radius:8px}
.mobile-menu:hover{background:#f4f5f7}
.mobile-menu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.topbar-title{justify-self:center;font-size:12px;font-weight:700;letter-spacing:.045em;color:#7f8895;white-space:nowrap}
.topbar-actions{justify-self:end;display:flex;align-items:center;gap:10px}
.topbar-new-project{height:36px;border:0;border-radius:9px;background:var(--dtl-blue);color:#fff;padding:0 14px;font-size:12px;font-weight:700;box-shadow:0 4px 10px rgba(43,112,184,.16)}
.topbar-new-project:hover{background:var(--dtl-blue-hover)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--dtl-blue);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.topbar-avatar{width:34px;height:34px}
.app-shell.sidebar-collapsed .sidebar{transform:translateX(-100%)}
.app-shell.sidebar-collapsed .app-main{margin-left:0;width:100%}

.page{padding:34px 30px 28px;max-width:1280px;width:100%;margin:0 auto;flex:1}
.page.wide{max-width:none}
.app-footer{margin-top:auto;border-top:1px solid var(--dtl-border);min-height:58px;padding:0 30px;display:flex;align-items:center;justify-content:space-between;color:#a1a9b3;font-size:11px;background:transparent}

/* ===== Type & generic controls ===== */
.eyebrow{font-size:11px;letter-spacing:.135em;text-transform:uppercase;font-weight:700;color:#2b6fae;margin-bottom:5px}
h1,h2,h3,p{margin-top:0}
h1{font-size:35px;line-height:1.08;letter-spacing:-.035em;margin-bottom:7px;font-weight:700}
h2{font-size:20px;line-height:1.2;letter-spacing:-.018em}
h3{font-size:15px}
.page-subtitle{color:#7d8795;font-size:14px;margin:0}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:27px}
.page-header-actions{display:flex;gap:10px;flex-wrap:wrap;padding-top:33px}
.card{background:#fff;border:1px solid var(--dtl-border);border-radius:var(--radius);box-shadow:0 1px 3px rgba(22,39,58,.018)}
.card-pad{padding:22px}
.btn{min-height:40px;padding:9px 14px;border-radius:9px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:12px;transition:background .15s,border-color .15s,box-shadow .15s;text-decoration:none}
.btn:hover{box-shadow:0 3px 8px rgba(25,49,75,.07)}
.btn-primary{background:var(--dtl-blue);color:#fff;border-color:var(--dtl-blue)}
.btn-primary:hover{background:var(--dtl-blue-hover);border-color:var(--dtl-blue-hover)}
.btn-secondary{background:#fff;color:#3b4654;border-color:#d8dde3}
.btn-secondary:hover{border-color:#c7ced6;background:#fafbfc}
.btn-danger{background:#fff;color:var(--dtl-danger);border-color:#eccfd2}
.btn-danger:hover{background:#fff8f8}
.btn-small{min-height:34px;padding:7px 10px;font-size:11px}
.btn-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-only{width:36px;padding:0}
.muted{color:var(--dtl-muted)}
.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:700;line-height:1.1}
.badge-concept{background:#eef1f4;color:#5d6874}
.badge-actief{background:#e7f6ef;color:#21815d}
.badge-afgerond{background:#e8f3fb;color:#2a6da8}
.form-group{display:grid;gap:7px;margin-bottom:15px}
.form-group label{font-size:12px;font-weight:700;color:#3b4654}
.form-control{width:100%;height:44px;border:1px solid #d8dde3;border-radius:8px;background:#fff;padding:9px 11px;color:var(--dtl-ink);outline:none;transition:border .15s,box-shadow .15s}
textarea.form-control{height:auto;min-height:90px;resize:vertical}
.form-control:focus{border-color:#6ea0d1;box-shadow:0 0 0 2px rgba(43,112,184,.13)}
.form-help{font-size:11px;color:var(--dtl-muted)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.alert{border-radius:9px;padding:11px 13px;margin-bottom:15px;font-size:12px}
.alert-danger{background:#fff1f2;color:#a12f38;border:1px solid #f0cdd1}

/* ===== Projects dashboard ===== */
.dashboard-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:17px}
.searchbox{position:relative;max-width:520px;flex:1}
.searchbox svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;fill:none;stroke:#8b95a2;stroke-width:1.8;stroke-linecap:round;pointer-events:none}
.searchbox input{padding-left:40px;height:44px}
.project-table-wrap{overflow:auto}
.project-table{width:100%;border-collapse:collapse;min-width:780px}
.project-table thead{background:#f9fafb}
.project-table th{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#7f8996;text-align:left;padding:13px 16px;border-bottom:1px solid var(--dtl-border);font-weight:700}
.project-table td{padding:17px 16px;border-bottom:1px solid #e8ebef;vertical-align:middle;color:#303741}
.project-table tr:last-child td{border-bottom:0}
.project-table tbody tr{transition:background .15s}
.project-table tbody tr:hover{background:#fbfcfd}
.project-title{font-weight:700;color:#252c34}
.project-address{font-size:11px;color:#828c98;margin-top:2px}
.row-actions{display:flex;justify-content:flex-end;gap:7px}
.empty-state{padding:54px 22px;text-align:center}
.empty-icon{width:50px;height:50px;border-radius:11px;background:var(--dtl-blue-soft);display:grid;place-items:center;margin:0 auto 15px;color:var(--dtl-blue);font-size:23px;font-weight:700}

/* ===== Modal ===== */
.modal-backdrop{position:fixed;inset:0;background:rgba(30,38,48,.48);z-index:110;display:none;align-items:center;justify-content:center;padding:20px}
.modal-backdrop.open{display:flex}
.modal{width:min(550px,100%);background:#fff;border-radius:14px;box-shadow:0 24px 64px rgba(21,32,44,.26);overflow:hidden;border:1px solid rgba(216,221,227,.8)}
.modal-header{padding:19px 21px;border-bottom:1px solid var(--dtl-border);display:flex;justify-content:space-between;align-items:center}
.modal-header h2{margin:0;font-size:18px}
.modal-close{border:0;background:#f3f5f7;width:32px;height:32px;border-radius:8px;font-size:19px;color:#6c7682}
.modal-body{padding:21px}
.modal-footer{padding:15px 21px;border-top:1px solid var(--dtl-border);display:flex;justify-content:flex-end;gap:9px;background:#fafbfc}

/* ===== Login / setup: same split composition as Klantenzone ===== */
.login-page{min-height:100vh;background:#fff}
.login-page .login-shell{min-height:100vh;display:grid;grid-template-columns:52.6% 47.4%;background:#fff}
.login-visual{position:relative;overflow:hidden;background:linear-gradient(142deg,#164774 0%,#245f9b 47%,#2e78bd 100%);color:#fff;padding:50px 68px 46px;display:flex;flex-direction:column;isolation:isolate}
.login-visual::before{content:"";position:absolute;width:590px;height:590px;border:2px solid rgba(255,255,255,.09);border-radius:50%;right:-190px;bottom:-270px;z-index:-1}
.login-visual::after{content:"";position:absolute;width:410px;height:410px;border:1px solid rgba(255,255,255,.09);border-radius:50%;right:-70px;bottom:-205px;z-index:-1}
.login-logo-card{width:290px;max-width:72%;background:#fff;border-radius:13px;padding:15px 18px 13px;box-shadow:0 4px 14px rgba(18,48,78,.08)}
.login-logo-card img{display:block;width:100%;height:auto}
.login-visual-copy{margin:auto 0;max-width:610px;padding:38px 0}
.login-kicker{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.74);margin-bottom:25px}
.login-visual h1{font-size:57px;line-height:1.05;letter-spacing:-.045em;margin:0 0 24px;color:#fff;max-width:590px}
.login-visual p{font-size:18px;line-height:1.55;color:rgba(255,255,255,.72);max-width:610px;margin:0}
.login-benefits{display:flex;gap:28px;flex-wrap:wrap;color:rgba(255,255,255,.74);font-size:13px}
.login-benefits span{white-space:nowrap}
.login-benefits span::before{content:"✓";font-weight:700;margin-right:5px;color:#dcefff}
.login-form-side{background:#fff;display:flex;align-items:center;justify-content:center;padding:56px 70px}
.login-panel{width:min(520px,100%)}
.login-panel .eyebrow{margin-bottom:14px}
.login-panel h1{font-size:38px;letter-spacing:-.038em;margin-bottom:15px}
.login-intro{font-size:16px;line-height:1.55;color:#7b8491;margin-bottom:31px;max-width:500px}
.login-panel .form-group{margin-bottom:17px}
.login-panel .form-group label{font-size:13px;color:#424b57}
.login-panel .form-control{height:51px;border-radius:8px;font-size:14px;padding:11px 13px}
.password-field{position:relative}
.password-field .form-control{padding-right:82px}
.password-toggle{position:absolute;right:7px;top:7px;height:37px;padding:0 13px;border:0;border-radius:8px;background:#edf5fb;color:#3374ae;font-size:12px;font-weight:700}
.login-submit{width:100%;height:53px;margin-top:2px;font-size:13px}
.login-divider{height:1px;background:#eceef1;margin:28px 0 22px}
.login-help strong{display:block;font-size:13px;margin-bottom:4px}
.login-help p{font-size:13px;color:#7d8692;margin:0;line-height:1.55}
.login-help a{color:#2b70b8}
.setup-note{padding:12px 13px;border-radius:9px;background:#f5f8fb;color:#667382;font-size:12px;margin-bottom:16px;border:1px solid #e5ebf0}

/* ===== Project detail ===== */
.project-hero{display:grid;grid-template-columns:1.42fr .86fr;gap:18px;margin-bottom:23px}
.project-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.meta-box{padding:15px;border-radius:9px;background:#f8f9fb;border:1px solid #ebedf0}
.meta-box label{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#8b95a1;font-weight:700;margin-bottom:5px}
.meta-box strong{font-size:12px;color:#313842}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.plan-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.plan-preview{height:230px;background:#fafbfc;border-bottom:1px solid var(--dtl-border);display:grid;place-items:center;overflow:hidden}
.plan-preview svg{width:100%;height:100%}
.plan-card-body{padding:16px}
.plan-card-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.plan-card-title h3{font-size:15px;margin:0}
.plan-card-actions{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap}

/* ===== Editor ===== */
.editor-mode{overflow:hidden}
.editor-mode .app-main{height:100vh;min-height:0;overflow:hidden}
.editor-mode .app-footer{display:none}
.editor-page{padding:0;height:calc(100vh - var(--topbar));overflow:hidden;flex:0 0 auto}
.editor-toolbar{height:62px;background:#fff;border-bottom:1px solid var(--dtl-border);display:flex;align-items:center;padding:0 17px;gap:9px}
.editor-back{display:flex;align-items:center;gap:7px;font-weight:700;color:#38506a;padding-right:12px;margin-right:2px;border-right:1px solid var(--dtl-border);font-size:12px}
.editor-project{min-width:0}
.editor-project strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.editor-project small{display:block;color:var(--dtl-muted);font-size:10px}
.toolbar-spacer{flex:1}
.save-state{font-size:10px;color:var(--dtl-muted);min-width:82px;text-align:right}
.save-state.saving{color:var(--dtl-warning)}
.save-state.saved{color:var(--dtl-success)}
.save-state.error{color:var(--dtl-danger)}
.editor-layout{height:calc(100% - 62px);display:grid;grid-template-columns:244px minmax(0,1fr) 276px}
.palette{background:#fff;border-right:1px solid var(--dtl-border);overflow:auto;padding:16px 15px}
.palette-search{margin-bottom:12px}
.palette-group{margin:17px 0 8px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:#8c95a1}
.palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.palette-item{border:1px solid #e1e5e9;background:#fff;border-radius:9px;min-height:70px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#46515f;cursor:grab;user-select:none;transition:border .15s,background .15s,box-shadow .15s}
.palette-item:hover{border-color:#a9c7e2;background:#f8fbfd;box-shadow:0 2px 7px rgba(43,112,184,.06)}
.palette-item:active{cursor:grabbing}
.palette-symbol{width:34px;height:30px;color:#2d4358;display:grid;place-items:center;font-size:10px;font-weight:700}
.palette-symbol svg{width:32px;height:28px;fill:none;stroke:currentColor;stroke-width:1.45}
.palette-item span:last-child{font-size:10px;text-align:center;line-height:1.15}
.canvas-shell{position:relative;background:#edf0f3;overflow:auto;display:flex;align-items:flex-start;justify-content:flex-start;padding:30px}
.canvas-stage{position:relative;background:#fff;border:1px solid #e0e3e7;box-shadow:0 8px 22px rgba(34,53,72,.11);transform-origin:top left;flex:0 0 auto}
#planSvg{width:100%;height:100%;background:#fff;touch-action:none;user-select:none}
#planSvg text{font-family:Arial,Helvetica,sans-serif;fill:#101418}
#planSvg .plan-object{cursor:move}
#planSvg .selection-box{fill:none;stroke:#2b70b8;stroke-width:2;stroke-dasharray:6 4;vector-effect:non-scaling-stroke;pointer-events:none}
#planSvg .resize-handle{fill:#fff;stroke:#2b70b8;stroke-width:2;vector-effect:non-scaling-stroke;cursor:nwse-resize}
#planSvg .rotate-handle{fill:#2b70b8;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke;cursor:grab}
#planSvg .object-label{font-size:12px;text-anchor:middle;dominant-baseline:middle;pointer-events:none}
#planSvg .fixture-stroke{fill:#fff;stroke:#1b1f23;stroke-width:1.5;vector-effect:non-scaling-stroke}
#planSvg .thin{stroke-width:1;vector-effect:non-scaling-stroke}
#planSvg .dimension-line{fill:none;stroke:#20252a;stroke-width:1;vector-effect:non-scaling-stroke}
#planSvg .dim-text{font-size:11px;text-anchor:middle;dominant-baseline:middle}
#planSvg .wall-fill{fill:url(#wallHatch);stroke:#1d2228;stroke-width:1.25;vector-effect:non-scaling-stroke}
.drop-hint{position:absolute;left:50%;top:18px;transform:translateX(-50%);background:rgba(39,89,132,.94);color:#fff;border-radius:999px;padding:7px 12px;font-size:10px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:5}
.canvas-shell.drag-over .drop-hint{opacity:1}
.zoom-controls{position:sticky;left:16px;bottom:16px;align-self:flex-end;z-index:10;background:#fff;border:1px solid var(--dtl-border);border-radius:9px;box-shadow:var(--dtl-shadow);display:flex;align-items:center;gap:2px;padding:4px}
.zoom-controls button{width:30px;height:30px;border:0;border-radius:7px;background:#fff;color:#34475b;font-weight:700}
.zoom-controls button:hover{background:#f0f4f7}
.zoom-level{font-size:10px;min-width:43px;text-align:center;color:var(--dtl-muted)}
.properties{background:#fff;border-left:1px solid var(--dtl-border);overflow:auto;padding:18px 17px}
.properties h3{margin-bottom:4px}
.properties-sub{font-size:10px;color:var(--dtl-muted);margin-bottom:17px}
.prop-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.prop-grid .form-group{margin-bottom:8px}
.prop-grid .form-control{height:36px;padding:7px 8px;font-size:11px}
.prop-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px}
.properties-empty{padding:34px 8px;text-align:center;color:var(--dtl-muted);font-size:11px}
.properties-empty .circle{width:44px;height:44px;border-radius:50%;background:#eef5fb;color:#2b70b8;margin:0 auto 12px;display:grid;place-items:center;font-size:19px}
.keyboard-hints{margin-top:19px;padding-top:15px;border-top:1px solid var(--dtl-border)}
.keyboard-hints h4{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#8d96a1;margin:0 0 8px}
.keyboard-hints div{font-size:10px;color:var(--dtl-muted);display:flex;justify-content:space-between;padding:3px 0}
.keyboard-hints kbd{background:#f2f4f6;border:1px solid #e1e5e8;border-bottom-width:2px;padding:1px 5px;border-radius:4px;color:#4d5865}
.plan-tabs{display:flex;align-items:center;gap:5px;overflow:auto;max-width:410px;padding:2px}
.plan-tab{border:1px solid #dde2e7;background:#fff;border-radius:8px;padding:7px 10px;font-size:10px;font-weight:700;white-space:nowrap;color:#536170}
.plan-tab.active{background:#e9f3fb;border-color:#c8deef;color:#286aa4}
.toolbar-divider{width:1px;height:25px;background:var(--dtl-border);margin:0 2px}
.mobile-panel-btn{display:none}
.toolbar-icon-btn{height:36px;min-width:36px;border:1px solid #dce1e6;background:#fff;border-radius:8px;display:grid;place-items:center;color:#394e61}
.toolbar-icon-btn:hover{background:#f6f8fa}
.toolbar-icon-btn:disabled{opacity:.4;cursor:not-allowed}
.toolbar-icon-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.snap-toggle{display:flex;align-items:center;gap:6px;font-size:10px;color:#66717d;font-weight:700;white-space:nowrap}
.snap-toggle input{accent-color:var(--dtl-blue)}

/* ===== Compare ===== */
.compare-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.compare-plan{padding:15px}
.compare-plan h2{text-align:center;text-transform:uppercase;font-size:16px;margin-bottom:10px}
.compare-canvas{border:1px solid var(--dtl-border);background:#fff;aspect-ratio:7/9;overflow:hidden}
.compare-canvas svg{width:100%;height:100%}

/* ===== Toast ===== */
.toast-stack{position:fixed;right:18px;bottom:18px;display:grid;gap:8px;z-index:150}
.toast{background:#2a445e;color:#fff;padding:10px 13px;border-radius:9px;box-shadow:var(--dtl-shadow);font-size:11px;animation:toastIn .18s ease}
.toast.error{background:#9e3942}
.toast.success{background:#247354}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ===== Responsive ===== */
@media (max-width:1180px){
  .editor-layout{grid-template-columns:210px minmax(0,1fr) 245px}
  .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-hero{grid-template-columns:1fr}
  .compare-grid{grid-template-columns:1fr 1fr}
  .login-visual{padding-left:45px;padding-right:45px}
  .login-visual h1{font-size:48px}
  .login-form-side{padding:45px}
}
@media (max-width:900px){
  .sidebar{transform:translateX(-100%);box-shadow:12px 0 30px rgba(22,43,65,.12)}
  .sidebar.open{transform:translateX(0)}
  .app-main,.app-shell.sidebar-collapsed .app-main{margin-left:0;width:100%}
  .page{padding:26px 22px}
  .editor-layout{grid-template-columns:1fr}
  .palette,.properties{position:fixed;top:calc(var(--topbar) + 62px);bottom:0;width:260px;z-index:55;box-shadow:var(--dtl-shadow);transition:transform .2s}
  .palette{left:0;transform:translateX(-100%)}
  .palette.open{transform:none}
  .properties{right:0;transform:translateX(100%)}
  .properties.open{transform:none}
  .canvas-shell{padding:22px}
  .editor-toolbar{overflow:auto}
  .editor-project{min-width:145px}
  .plan-grid{grid-template-columns:1fr}
  .compare-grid{grid-template-columns:1fr}
  .topbar{padding:0 18px}
  .login-page .login-shell{grid-template-columns:1fr}
  .login-visual{min-height:350px;padding:36px 42px}
  .login-visual-copy{margin:60px 0 30px;padding:0}
  .login-visual h1{font-size:44px;max-width:640px}
  .login-benefits{margin-top:25px}
  .login-form-side{padding:55px 28px 65px}
}
@media (max-width:640px){
  :root{--topbar:64px}
  .topbar{grid-template-columns:auto 1fr auto;padding:0 12px}
  .topbar-title{font-size:10px;overflow:hidden;text-overflow:ellipsis}
  .topbar-new-project{display:none}
  .page-header{display:grid}
  .page-header-actions{width:100%;padding-top:0}
  .page-header-actions .btn{flex:1}
  .project-meta{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .dashboard-toolbar{display:grid}
  .project-table-wrap{margin:0 -22px;border-radius:0;border-left:0;border-right:0}
  .editor-toolbar{height:68px;padding:0 9px}
  .editor-layout{height:calc(100% - 68px)}
  .palette,.properties{top:calc(var(--topbar) + 68px)}
  .plan-tabs{max-width:205px}
  .save-state{display:none}
  .mobile-panel-btn{display:grid}
  .app-footer{padding:18px 22px;min-height:72px;align-items:flex-start;gap:5px;flex-direction:column;justify-content:center}
  .login-visual{padding:28px 24px;min-height:325px}
  .login-logo-card{width:230px}
  .login-visual-copy{margin:48px 0 22px}
  .login-kicker{margin-bottom:16px;font-size:10px}
  .login-visual h1{font-size:38px;margin-bottom:16px}
  .login-visual p{font-size:15px}
  .login-benefits{gap:10px 18px;font-size:11px}
  .login-form-side{padding:42px 22px 56px}
  .login-panel h1{font-size:31px}
  .login-intro{font-size:14px}
}

@media print{
  .sidebar,.topbar,.app-footer,.page-header-actions,.btn,.no-print{display:none!important}
  .app-main{margin:0;width:100%}
  .page{padding:0}
  .compare-grid{grid-template-columns:repeat(3,1fr);gap:8mm}
  .card{box-shadow:none;border:0}
  .compare-plan{padding:0}
  .compare-canvas{border:0}
}