:root {
  --bg:#111318;--panel:#1c1f26;--panel2:#242832;--border:#2e333d;
  --accent:#5b8dee;--danger:#e05555;--text:#d8dce8;--text-muted:#6b7280;
  --toolbar-w:52px;--topbar-h:48px;--layers-w:240px;
  --radius:8px;--shadow:0 4px 20px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:sans-serif;font-size:13px;overflow:hidden;width:100vw;height:100vh;user-select:none;-webkit-user-select:none}
#topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;padding:0 10px;z-index:100}
.topbar-left{display:flex;align-items:center;gap:8px}
.topbar-center{flex:1;display:flex;justify-content:center}
.topbar-right{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.app-title{font-weight:600;font-size:15px;color:var(--accent)}
#search-wrap{display:flex;align-items:center;gap:4px;background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius);padding:4px 8px;width:320px}
#search-input{background:none;border:none;outline:none;color:var(--text);font-size:13px;flex:1}
#search-results{color:var(--text-muted);font-size:11px;white-space:nowrap}
#zoom-controls{display:flex;align-items:center;gap:2px;background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius);padding:2px 6px}
#zoom-label{font-size:12px;min-width:42px;text-align:center}
.icon-btn{background:none;border:1px solid transparent;color:var(--text);cursor:pointer;border-radius:6px;padding:5px 8px;font-size:13px;display:inline-flex;align-items:center;gap:4px;transition:background .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.icon-btn:hover{background:var(--panel2);border-color:var(--border)}
.icon-btn.small{padding:3px 6px;font-size:12px}
.icon-btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.icon-btn.accent:hover{background:#7aa3f5}
.icon-btn.toggle.active{background:var(--accent);color:#fff}
#toolbar{position:fixed;top:var(--topbar-h);left:0;width:var(--toolbar-w);bottom:0;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:2px;z-index:90}
.tool-group{display:flex;flex-direction:column;align-items:center;gap:2px}
.tool-sep{width:32px;height:1px;background:var(--border);margin:6px 0}
.tool-btn{width:38px;height:38px;background:none;border:1px solid transparent;border-radius:8px;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tool-btn:hover{background:var(--panel2);color:var(--text);border-color:var(--border)}
.tool-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
#canvas-container{position:fixed;top:var(--topbar-h);left:var(--toolbar-w);right:0;bottom:0;overflow:hidden}
#canvas-container canvas{display:block}
#props-panel{position:fixed;top:calc(var(--topbar-h) + 10px);left:calc(var(--toolbar-w) + 10px);background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:10px;width:220px;z-index:80;box-shadow:var(--shadow)}
#props-panel.hidden{display:none}
.props-section{display:flex;flex-direction:column;gap:6px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--border)}
.props-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.props-section label{display:flex;align-items:center;gap:6px;color:var(--text-muted);font-size:11px}
#props-transform{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#props-transform label{flex-direction:column;align-items:flex-start;gap:2px}
.prop-input{background:var(--panel2);border:1px solid var(--border);border-radius:4px;color:var(--text);padding:3px 6px;font-size:12px;width:100%;outline:none}
.prop-input:focus{border-color:var(--accent)}
.prop-input-full{width:100%}
.prop-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
input[type=range]{flex:1;accent-color:var(--accent)}
input[type=color]{width:28px;height:28px;border:1px solid var(--border);border-radius:4px;cursor:pointer;padding:0}
select{background:var(--panel2);border:1px solid var(--border);border-radius:4px;color:var(--text);padding:4px 6px;font-size:12px;outline:none;cursor:pointer}
.props-actions{display:flex;flex-wrap:wrap;gap:4px}
.action-btn{background:var(--panel2);border:1px solid var(--border);border-radius:5px;color:var(--text);padding:5px 8px;font-size:11px;cursor:pointer;transition:background .15s;touch-action:manipulation}
.action-btn:hover{background:var(--border)}
.action-btn.danger{color:var(--danger);border-color:var(--danger)}
.action-btn.danger:hover{background:var(--danger);color:#fff}
.action-btn.hidden{display:none}
#layers-panel{position:fixed;top:var(--topbar-h);right:0;width:var(--layers-w);bottom:0;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;z-index:90;transform:translateX(100%);transition:transform .25s ease}
#layers-panel.open{transform:translateX(0)}
.layers-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);font-weight:600;font-size:13px}
#layers-list{flex:1;overflow-y:auto;padding:6px 0}
.layer-item{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;border-left:3px solid transparent;transition:background .1s}
.layer-item:hover{background:var(--panel2)}
.layer-item.selected{background:rgba(91,141,238,.15);border-left-color:var(--accent)}
.layer-icon{font-size:14px;min-width:18px;text-align:center}
.layer-name{flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer-vis{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:12px;padding:2px}
#drawing-hint{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.75);color:#fff;padding:8px 16px;border-radius:20px;font-size:13px;pointer-events:none;z-index:200}
#drawing-hint.hidden{display:none}
#modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:300}
#modal-overlay.hidden{display:none}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px;min-width:300px;z-index:301;box-shadow:var(--shadow)}
.modal.hidden{display:none}
.modal h3{margin-bottom:12px;font-size:15px}
.modal-buttons{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--panel)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
@media(max-width:600px){
  .app-title { display: none; }
  #zoom-controls { display: none; }

  /* Топбар */
  #topbar { padding: 0 6px; gap: 4px; }
  .topbar-left { display: none; }
  .topbar-center { flex: 0 0 auto; order: 2; }
  .topbar-right { flex: 1; order: 3; justify-content: flex-end; gap: 2px; }

  /* Поиск — правее, шире */
  #search-wrap { width: 180px; padding: 3px 8px; gap: 4px; }
  #search-input { font-size: 13px; min-width: 0; flex: 1; }
  #search-results { display: none; }
  #search-prev, #search-next, #search-clear {
    width: 32px; height: 32px;
    padding: 0;
    font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }

  /* Кнопки топбара */
  #btn-undo, #btn-redo, #btn-menu, #btn-layers-toggle {
    width: 40px; height: 40px;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }

  /* Тулбар снизу */
  #toolbar {
    top:auto; bottom:0; left:0; right:0;
    width:100%; height:56px;
    flex-direction:row;
    border-right:none; border-top:1px solid var(--border);
    padding:0 4px;
    justify-content:space-around;
    align-items:center;
    gap:0; z-index:200;
  }
  .tool-group { flex-direction:row; gap:0; }
  .tool-sep { width:1px; height:28px; margin:0 2px; }
  .tool-btn { width:44px; height:44px; flex-shrink:0; }
  #canvas-container { top:var(--topbar-h); left:0; bottom:56px; }
  #props-panel {
    left:4px; right:4px; width:auto;
    top:calc(var(--topbar-h) + 4px);
    max-height:50vh; overflow-y:auto;
  }
}

/* ── SIDEBAR PROPS ── */


/* На мобиле floating props-panel прячем — используем sidebar */
@media(max-width:600px) {
  #props-panel { display: none !important; }
  #layers-panel { bottom: 56px; }
}

/* ── SIDEBAR PROPS STYLES ── */
#layers-panel { overflow: hidden; }
#layers-list { flex: 1; overflow-y: auto; min-height: 60px; min-height: 0; }

#sidebar-resizer {
  height: 8px;
  background: var(--border);
  cursor: ns-resize;
  flex-shrink: 0;
  position: relative;
  transition: background 0.15s;
}
#sidebar-resizer:hover { background: var(--accent); }
#sidebar-resizer::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 32px; height: 3px;
  background: var(--text-muted);
  border-radius: 2px;
}
#sidebar-resizer.hidden { display: none; }

#sidebar-props { border-top: 1px solid var(--border); overflow-y: auto; flex-shrink: 0; max-height: 280px; display: flex; flex-direction: column; }
#sidebar-props.hidden { display: none; }
#sidebar-props-content { padding: 8px; }

.sp-section {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.sp-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sp-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sp-label { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12px; }
.sp-label input[type=range] { flex: 1; accent-color: var(--accent); }

/* ── HAMBURGER MENU ── */
#menu-wrap { position: relative; }
#menu-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 170px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  z-index: 400; padding: 4px 0;
}
#menu-dropdown.hidden { display: none; }
.menu-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; color: var(--text);
  padding: 9px 16px; font-size: 13px; cursor: pointer;
  transition: background .15s;
}
.menu-item:hover { background: var(--panel2); }
.menu-item.menu-save-item { color: var(--accent); }
.menu-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ── BOARDS MODAL ── */
#modal-boards { min-width: 420px; max-width: 90vw; }
#boards-list { max-height: 380px; overflow-y: auto; margin: 10px 0; }
.board-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 4px; border-bottom: 1px solid var(--border);
}
.board-item:last-child { border-bottom: none; }
.board-name {
  flex: 1; font-size: 13px; cursor: pointer;
  padding: 3px 6px; border-radius: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board-name:hover { background: var(--panel2); }
.board-name-input {
  flex: 1; background: var(--panel2); border: 1px solid var(--accent);
  border-radius: 4px; color: var(--text);
  padding: 3px 6px; font-size: 13px; outline: none;
}
.board-date { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.board-open-btn { flex-shrink: 0; }

/* ── BOARD TITLE ── */
#board-title { cursor: default; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }