/* DOMANDO CREATE 0.2 — bright, Scratch-inspired visual editor */
:root {
  color-scheme: light;
  --bg:#f3f8ff; --surface:#ffffff; --soft:#eff7ff; --soft2:#e6f2ff;
  --line:#d6e5f3; --line-strong:#b8d3eb;
  --text:#28394f; --muted:#657990; --blue:#4c97ff; --blue-dark:#337edb;
  --purple:#9966ff; --green:#59bd65; --orange:#ffab19; --red:#ed6175;
  --shadow:0 4px 18px rgba(44,111,171,.09);
  font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-size:14px;line-height:1.55}
button,input,select,textarea{font:inherit}
button{cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ffce55;outline-offset:2px}
button:disabled{opacity:.42;cursor:not-allowed}
.hidden{display:none!important}
.app-shell{min-height:100vh;display:flex;flex-direction:column;min-width:0}

/* Top navigation: intentionally wraps rather than allowing the labels to collide */
.topbar{position:relative;z-index:20;display:flex;align-items:center;flex-wrap:wrap;gap:12px 19px;padding:12px 22px;min-height:85px;background:#4c97ff;color:#fff;border-bottom:4px solid #2c7bdc;box-shadow:0 3px 12px #2e79c82c}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;min-width:204px}
.brand-icon{position:relative;display:grid;place-items:center;flex:0 0 49px;width:49px;height:49px;border-radius:16px;background:#fff;color:#418def;font-size:29px;font-weight:950;box-shadow:0 3px 0 #1b67be55}
.brand-icon span{position:absolute;font-size:13px;top:1px;right:4px;color:#ffb431}
.brand-text{min-width:0}
.brand-text strong{display:block;color:#fff;font-size:16px;letter-spacing:.4px;line-height:1.35;white-space:nowrap}
.brand-text em{color:#fff1a8;font-style:normal}
.brand-text small{display:block;color:#ebf6ff;font-size:10px;margin-top:3px}
.project-header{display:flex;flex:1 1 240px;align-items:center;gap:10px;min-width:190px;max-width:460px}
.project-label{color:#fff;font-size:12px;font-weight:700;white-space:nowrap}
.project-header input{width:100%;min-width:90px;min-height:40px;border:2px solid #bbdcff;background:#fff;color:#243e65;border-radius:12px;padding:8px 12px;font-weight:700;box-shadow:inset 0 1px 3px #00000008}
.save-label{color:#f4ffec;font-size:11px;font-weight:750;white-space:nowrap}
.top-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:7px;flex:1 1 auto;min-width:0}
.top-btn{border:1px solid #d7ebff;background:#fff;color:#3277c7;padding:10px 12px;min-height:41px;border-radius:11px;white-space:nowrap;font-size:12px;font-weight:850;box-shadow:0 2px 0 #205d9c29;transition:background .15s, transform .15s}
.top-btn:hover{background:#e8f3ff;transform:translateY(-1px)}
.top-btn.primary{color:#fff;background:#ff9c38;border-color:#f47d23;box-shadow:0 3px 0 #c5651b;font-weight:900}
.top-btn.primary:hover{background:#ffb24b}
.icon-btn{font-size:21px;line-height:1;padding:8px 12px;min-width:42px}

/* Three work zones */
.main-layout{display:grid;grid-template-columns:252px minmax(390px,1fr) 294px;min-height:calc(100vh - 127px);flex:1;align-items:stretch;min-width:0}
.panel{background:var(--surface);padding:21px 16px;min-width:0}
.left-panel{border-right:2px solid var(--line);display:flex;flex-direction:column;gap:0}
.right-panel{border-left:2px solid var(--line)}
.eyebrow{display:inline-block;font-size:10px;font-weight:900;color:#4884d2;letter-spacing:1.3px}
.panel-heading h2,.inspector-header h2{font-size:19px;line-height:1.4;margin:5px 0 5px;overflow-wrap:anywhere}
.panel-heading p,.inspector-header p{font-size:12px;line-height:1.65;color:var(--muted);margin:0 0 17px}
.palette-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.palette-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:84px;padding:12px 8px 10px;border:2px solid #d5eaff;background:#f5faff;color:#334a68;border-radius:15px;font-weight:850;box-shadow:0 3px 0 #d3e5f5;transition:transform .15s, background .15s,border-color .15s}
.palette-item span{font-size:26px;line-height:1.25}
.palette-item small{font-size:12px;font-weight:850;line-height:1.5;max-width:100%;text-align:center;overflow-wrap:anywhere}
.palette-item:nth-child(4n+1){background:#f0f6ff;border-color:#b8dafd}
.palette-item:nth-child(4n+2){background:#fff6e7;border-color:#ffdbab}
.palette-item:nth-child(4n+3){background:#f1faef;border-color:#bee7bd}
.palette-item:nth-child(4n+4){background:#f6f0ff;border-color:#dbcbff}
.palette-item:hover{transform:translateY(-2px);border-color:var(--blue);background:#e7f3ff}
.palette-item:active{transform:translateY(1px)}
.screens-section{border-top:2px solid #e6f0f8;margin-top:23px;padding-top:17px}
.section-label{display:flex;justify-content:space-between;align-items:center;gap:6px;font-weight:900;font-size:13px;margin-bottom:10px}
.tiny-btn{min-width:34px;min-height:34px;border:0;background:#e5f2ff;color:#337edb;border-radius:10px;font-size:23px;font-weight:800;line-height:1}
.screen-list{display:grid;gap:7px;min-width:0}
.screen-item{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;width:100%;background:transparent;color:#566d87;border:1.5px solid transparent;border-radius:10px;padding:10px 12px;text-align:left;font-size:12px}
.screen-item.active{background:#e8f4ff;color:#2778d7;border-color:#9cccff;font-weight:900}
.screen-item:hover{background:#eff7ff}
.screen-item .screen-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.screen-item small{flex:0 0 auto;color:#67809d;font-size:10px}
.sidebar-bottom{display:flex;gap:10px;align-items:flex-start;margin-top:auto;background:#f0f7ff;border:1px solid #cfdfef;border-radius:15px;padding:12px;margin-top:25px;min-width:0}
.sidebar-bottom>span{font-size:21px;flex:0 0 auto}
.sidebar-bottom strong{font-size:12px}
.sidebar-bottom p{font-size:11px;line-height:1.65;color:var(--muted);margin:4px 0 0}
.subhead{font-size:12px;font-weight:900;margin:3px 0 11px}
.action-palette{display:grid;gap:9px}
.palette-block{border:0;min-height:45px;border-bottom:4px solid #00000023;border-radius:11px;padding:9px 12px;color:white;font-size:12px;font-weight:900;line-height:1.45;text-align:left;white-space:normal;overflow-wrap:anywhere;cursor:grab}
.palette-block:hover{filter:brightness(1.08)}
.palette-block:active{cursor:grabbing}
.block-purple{background:#9966ff}.block-blue{background:#4c97ff}.block-green{background:#59bd65}.block-orange{background:#ffab19;color:#53320c}.block-red{background:#eb627c}.block-cyan{background:#24b9bc}.block-grey{background:#6f839c}
.side-hint{font-size:11px;line-height:1.7;color:var(--muted)}

/* Main editing area */
.main-panel{min-width:0;display:flex;flex-direction:column;padding:20px 23px 26px;background:linear-gradient(145deg,#f8fcff 0%,#eaf5ff 75%,#e8f2ff 100%)}
.editor-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:17px;min-width:0}
.editor-toolbar>div:first-child{min-width:0}
.editor-toolbar h1{font-size:22px;line-height:1.4;margin:3px 0 0;overflow-wrap:anywhere}
.mode-switch{display:flex;flex-wrap:wrap;gap:5px;min-width:0;background:#fff;border:2px solid #c9e0f6;border-radius:16px;padding:5px;box-shadow:var(--shadow)}
.mode-btn{border:0;background:transparent;color:#687e99;border-radius:11px;padding:10px 14px;min-height:42px;font-size:13px;font-weight:900;white-space:nowrap}
.mode-btn:hover:not(.active){background:#ecf6ff;color:#2676d1}
.mode-btn.active{background:#4c97ff;color:#fff;box-shadow:0 3px 0 #266fca}
.mode-btn[data-mode="logic"].active{background:#9966ff;box-shadow:0 3px 0 #6f43cf}
.mode-btn[data-mode="preview"].active{background:#59bd65;box-shadow:0 3px 0 #33933e}
.design-workspace{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}
.canvas-meta,.canvas-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;background:#fff;border:2px solid #d4e7f7;padding:11px 13px;font-size:12px;color:#334a69}
.canvas-meta{border-radius:15px 15px 0 0;border-bottom:0}
.canvas-meta>div{display:flex;align-items:center;flex-wrap:wrap;gap:7px;min-width:0}
.green-dot{display:inline-block;flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:#58bd64}
.meta-secondary{font-size:11px;color:#70839a}
.canvas-scroll{min-width:0;flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;padding:22px 14px;min-height:710px;border:2px solid #d4e7f7;border-top:0;border-bottom:0;background-color:#eef8ff;background-image:radial-gradient(#c5ddf2 1.25px,transparent 1.25px);background-size:22px 22px}
.phone-frame{position:relative;flex:0 0 auto;width:386px;max-width:100%;background:#fdfefe;border:4px solid #8094aa;border-radius:35px;box-shadow:0 16px 42px rgba(46,92,141,.21);padding:14px 9px 16px}
.phone-speaker{width:45px;height:5px;border-radius:20px;background:#8aa0b8;margin:-1px auto 12px}
.phone-home-indicator{width:100px;height:4px;background:#8aa0b8;border-radius:20px;margin:10px auto -4px}
.app-canvas{position:relative;width:100%;aspect-ratio:360/640;height:auto;overflow:hidden;background:white;color:#25394d;border-radius:13px;touch-action:none;container-type:inline-size}
.app-element{position:absolute;user-select:none;display:flex;align-items:center;justify-content:center;min-width:0;max-width:100%;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;line-height:1.27;cursor:grab}
.app-element[data-type="input"]{justify-content:flex-start}
.app-element.selected{outline:3px solid #ffb331;outline-offset:1px;z-index:9}
.app-element.selected::after{content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;border:2px solid white;background:#ffb331;border-radius:3px}
.app-element:active{cursor:grabbing}
.app-element.preview-el{cursor:default;user-select:auto}
.app-element.preview-el[data-clickable="true"]{cursor:pointer}
.app-element input{min-width:0;width:100%;height:100%;border:0;background:transparent;color:inherit;padding:0 8px;outline:none;font-size:inherit}
.app-element img{max-width:100%;max-height:100%;object-fit:contain}
.app-element .render-checkbox{display:flex;gap:6px;align-items:center;overflow-wrap:anywhere}
.canvas-empty{position:absolute;inset:30px;border:2px dashed #b6d4ed;border-radius:13px;display:grid;place-items:center;text-align:center;color:#7c98b2;pointer-events:none;font-size:13px;padding:12px}
.canvas-bottom{border-radius:0 0 15px 15px;min-height:50px;font-size:12px}
.canvas-bottom>div{display:flex;gap:6px;flex-wrap:wrap}
.text-btn{border:1px solid #c8def4;background:#f3f9ff;border-radius:9px;padding:8px 11px;color:#397ec8;font-size:12px;font-weight:850}
.text-btn:hover{background:#e2f1ff}
.text-btn.danger{border-color:#ffd7de;color:#cf4566;background:#fff4f6}
.text-btn.danger:hover{background:#ffe5ea}

/* Properties panel */
.inspector-header{padding-bottom:13px;border-bottom:2px solid #e6eff8}
.inspector-body{padding-top:18px;min-width:0}
.field{margin-bottom:16px;min-width:0}
.field label{display:block;font-size:12px;color:#405876;font-weight:850;margin-bottom:6px;line-height:1.5;overflow-wrap:anywhere}
.field input,.field select,.field textarea{width:100%;min-width:0;max-width:100%;border:2px solid #cfe2f5;border-radius:10px;background:#fbfdff;color:#243c56;padding:10px 11px;min-height:42px;font-size:13px}
.field input[type="color"]{padding:3px;height:44px;cursor:pointer}
.field input[type="range"]{padding:0;accent-color:#4c97ff}
.field input[type="checkbox"]{width:auto;min-height:0}
.field textarea{min-height:82px;line-height:1.7;resize:vertical}
.field-inline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.field-description,.select-help{font-size:11px;color:var(--muted);line-height:1.65;margin:4px 0 12px}
.inspector-card{background:#eef7ff;border:1.5px solid #cfdef0;border-radius:13px;padding:13px;min-width:0;margin-bottom:16px}
.inspector-card strong{font-size:12px}
.inspector-card p{font-size:11px;line-height:1.7;color:#61778f;margin:6px 0 0;overflow-wrap:anywhere}
.accent-btn{border:0;border-bottom:3px solid #307ac9;border-radius:10px;background:#4c97ff;color:#fff;padding:10px 13px;min-height:43px;font-size:12px;font-weight:900}
.accent-btn:hover{background:#337fdf}
.secondary-btn,.danger-btn{min-width:0;border-radius:10px;padding:10px;min-height:42px;font-size:12px;font-weight:850;line-height:1.45;overflow-wrap:anywhere}
.secondary-btn{color:#327acc;background:#edf7ff;border:1.5px solid #c4def5}
.danger-btn{color:#b83851;background:#fff0f2;border:1.5px solid #ffcad5}
.block{display:block;width:100%}
.inline-actions{display:flex;flex-wrap:wrap;gap:8px;margin:9px 0}
.inline-actions>*{flex:1 1 95px}
.subsection-title{border-top:2px solid #edf3f9;padding-top:15px;margin:20px 0 13px;font-size:13px;font-weight:900}
.inspector-emoji{font-size:44px;text-align:center;margin:14px 0}
.property-note{color:var(--muted);font-size:11px;line-height:1.7;margin-top:12px}
.inspector-empty{display:grid;place-content:center;gap:10px;min-height:160px;text-align:center;color:var(--muted)}
.inspector-empty .big{font-size:38px}

/* Scratch-inspired, colorful flow stacks */
.logic-workspace{flex:1;min-width:0;padding-bottom:25px}
.logic-banner{display:flex;align-items:center;gap:15px;border:2px solid #dbc9ff;background:linear-gradient(120deg,#f1eaff,#f7f4ff);border-radius:16px;padding:17px;margin-bottom:20px}
.logic-banner-icon{flex:0 0 auto;font-size:32px}
.logic-banner h3{font-size:17px;margin:0 0 5px;line-height:1.45}
.logic-banner p{color:#665c80;font-size:12px;line-height:1.65;margin:0}
.logic-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}
.logic-toolbar strong{font-size:15px}
.flow-list{display:grid;gap:15px;min-width:0}
.flow-card{max-width:820px;min-width:0;border:2px solid #d9e8fa;background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.flow-card.selected{border-color:#af86ff;box-shadow:0 0 0 3px #cdb1ff55}
.flow-label{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.flow-label span{color:#64819d;font-size:12px;font-weight:800}
.flow-actions-row{display:flex;gap:6px;flex-wrap:wrap}
.small-ghost{border:1px solid #caddf2;background:#f3f9ff;color:#3a77be;border-radius:9px;min-height:33px;padding:5px 10px;font-size:12px;font-weight:750}
.event-block{display:block;max-width:600px;border-radius:12px 12px 12px 4px;padding:13px 14px;background:#ffb636;color:#563511;box-shadow:inset 0 -4px #e99422;font-size:13px;font-weight:900;line-height:1.55;overflow-wrap:anywhere;cursor:pointer}
.event-block:hover{background:#ffc34c}
.action-stack{display:grid;gap:7px;min-height:55px;margin-left:18px;border-left:4px solid #ffb636;padding:10px 0 4px 14px}
.logic-action{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:9px;max-width:560px;min-height:49px;padding:11px 13px;border-radius:11px;color:white;font-size:12px;font-weight:850;text-align:left;overflow-wrap:anywhere;cursor:pointer;box-shadow:inset 0 -4px #0000001f}
.logic-action.active{outline:3px solid #fdcf64;outline-offset:2px}
.logic-action small{color:#fff;opacity:.87;font-size:11px;font-weight:500}
.drop-zone{max-width:560px;margin-top:4px;border:2px dashed #b6cdeb;border-radius:12px;padding:13px 10px;text-align:center;color:#6581a0;font-size:12px;background:#f4f9ff}
.drop-zone.over{border-color:#9862ff;background:#f3eaff;color:#6945bd}
.flow-empty-note{font-size:12px;color:#67849f;margin:15px 0}
.no-flows{padding:30px 20px;text-align:center;color:#6582a0;background:#fff;border:2px dashed #b7d5f1;border-radius:15px;line-height:1.75}
.logic-arrow{color:#e99b24;margin:5px 0 2px 32px}
.flow-detail-label{display:flex;gap:8px;align-items:center;color:#526c88;font-size:12px;font-weight:800;margin-bottom:12px}

/* Footer, messages, help */
.statusbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;min-height:43px;padding:9px 19px;border-top:2px solid #d6e6f5;background:#fff;color:#677e96;font-size:11px}
.statusbar b{color:#3a88e5;font-size:10px}
.statusbar button{border:0;background:none;color:#237fd9;font-size:12px;font-weight:850}
.toast{position:fixed;z-index:99;left:50%;bottom:22px;max-width:min(94vw,420px);padding:13px 18px;border:2px solid #b4dcff;border-radius:13px;background:#fff;color:#2b6ab3;box-shadow:0 9px 30px #2a65a044;transform:translate(-50%,150%);font-size:13px;font-weight:850;text-align:center;transition:transform .24s;pointer-events:none;overflow-wrap:anywhere}
.toast.show{transform:translate(-50%,0)}
dialog{width:min(520px,calc(100vw - 30px));max-height:min(85vh,720px);overflow:auto;border:3px solid #cfe6ff;border-radius:20px;padding:22px 24px;background:#fff;color:var(--text);box-shadow:0 23px 90px #194c823e}
dialog::backdrop{background:#1f4c78a8}
.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:15px}
.dialog-top h2{font-size:19px;line-height:1.45;margin:0}
.x-btn{background:#edf6ff;color:#277ccd;border:0;border-radius:10px;font-size:17px;padding:7px 10px}
dialog ol{font-size:13px;line-height:1.9;padding-left:22px}
dialog p{font-size:12px;color:var(--muted);line-height:1.8}

/* Ensure controls are never squeezed on laptops and smaller browser windows */
@media (max-width:1360px){
  .topbar{padding:11px 16px;gap:9px 13px}
  .brand{min-width:188px}.brand-text strong{font-size:14px}
  .project-header{flex-basis:180px}.top-actions{flex-basis:480px}
  .main-layout{grid-template-columns:220px minmax(350px,1fr) 266px}
  .main-panel{padding:17px}.panel{padding:18px 13px}
  .top-btn{font-size:11px;padding:9px 10px}
}
@media (max-width:1050px){
  .main-layout{grid-template-columns:215px minmax(0,1fr)}
  .right-panel{grid-column:1/-1;border-left:0;border-top:2px solid var(--line)}
  .inspector-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
  .inspector-body>.subsection-title,.inspector-body>.inspector-card,.inspector-body>.inspector-empty,.inspector-body>.property-note{grid-column:1/-1}
  .main-panel{padding:18px 15px}
}
@media (max-width:760px){
  .topbar{padding:10px 12px;gap:10px;align-items:center}
  .brand{flex:1 1 100%;min-width:0}
  .brand-icon{width:42px;height:42px;flex-basis:42px;font-size:26px;border-radius:13px}
  .brand-text strong{font-size:14px}
  .brand-text small{font-size:10px}
  .project-header{flex:1 1 100%;max-width:none;min-width:0}
  .project-label{font-size:11px}
  .project-header input{min-width:0}
  .top-actions{flex:1 1 100%;justify-content:space-between;gap:6px}
  .top-btn{min-height:39px;flex:1 0 auto;padding:8px 9px;font-size:11px}
  .top-btn.primary{flex:1 1 100%;font-size:13px}
  .main-layout{display:flex;flex-direction:column;min-width:0}
  .left-panel{order:1;border-right:0;border-bottom:2px solid var(--line);padding:12px}
  .main-panel{order:2;padding:16px 10px}
  .right-panel{order:3;border-top:2px solid var(--line);padding:16px 12px}
  .panel-heading h2{font-size:16px;margin:3px 0}
  .panel-heading p{font-size:11px;margin-bottom:10px}
  .panel-heading .eyebrow,.inspector-header .eyebrow{display:none}
  .palette-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .palette-item{min-height:71px;padding:7px 2px;gap:2px;border-radius:12px}
  .palette-item span{font-size:22px}
  .palette-item small{font-size:11px}
  .screens-section{margin-top:13px;padding-top:10px}
  .screen-list{display:flex;gap:7px;overflow-x:auto;padding-bottom:5px}
  .screen-item{width:auto;flex:0 0 auto;max-width:190px;padding:8px 10px}
  .sidebar-bottom{display:none}
  .action-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .palette-block{min-height:52px}
  .editor-toolbar{gap:11px}
  .editor-toolbar h1{font-size:19px}
  .mode-switch{width:100%}
  .mode-btn{flex:1;min-width:0;padding:10px 7px;font-size:12px}
  .canvas-meta{padding:9px 10px}
  .canvas-scroll{min-height:0;padding:16px 8px}
  .phone-frame{width:386px;max-width:100%;padding:13px 7px 15px;border-width:3px}
  .canvas-bottom{padding:10px}
  .logic-banner{padding:12px;gap:10px}
  .logic-banner h3{font-size:14px}
  .logic-banner p{font-size:11px}
  .flow-card{padding:11px}
  .inspector-body{display:block}
  .statusbar{padding:9px 12px}
}
@media (max-width:370px){
  .project-label{display:none}
  .palette-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .palette-item small{font-size:10px}
  .main-panel{padding:12px 6px}
  .canvas-scroll{padding:12px 3px}
  .phone-frame{padding-left:5px;padding-right:5px;border-radius:24px}
  .canvas-meta .meta-secondary{display:none}
  .top-btn{padding:8px 6px}
  .logic-banner-icon{font-size:24px}
  .action-stack{margin-left:9px;padding-left:8px}
  .inline-actions>*{flex-basis:115px}
}
/* Keep the notification fully hidden until it is actually shown. */
.toast{opacity:0;visibility:hidden;transition:transform .24s,opacity .2s,visibility .2s}
.toast.show{opacity:1;visibility:visible}