/* === Reset & Base === */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; background: #1e1e2e; color: #e0e0e0; font-size: 13px; user-select: none; display: flex; flex-direction: column; }

/* === Menu Bar === */
#menu-bar { display: flex; align-items: center; height: 32px; background: #252535; border-bottom: 1px solid #333350; padding: 0 8px; z-index: 100; }
#logo { display: flex; align-items: center; gap: 6px; margin-right: 16px; cursor: default; }
.logo-icon { display: flex; align-items: center; }
.logo-text { font-size: 13px; font-weight: 600; color: #90caf9; letter-spacing: 0.5px; }
.menu-items { display: flex; gap: 2px; }
.menu-item { position: relative; padding: 4px 10px; cursor: pointer; border-radius: 3px; font-size: 12px; color: #c0c0d0; }
.menu-item:hover, .menu-item.open { background: #44446a; color: #fff; }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; background: #2a2a3e; border: 1px solid #444466; border-radius: 4px; padding: 4px 0; z-index: 1000; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
.dropdown-menu.show { display: block; }
.dropdown-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px; cursor: pointer; font-size: 12px; color: #c0c0d0; }
.dropdown-item:hover { background: #4fc3f7; color: #1e1e2e; }
.dropdown-item .shortcut { color: #888; font-size: 11px; margin-left: 20px; }
.dropdown-item:hover .shortcut { color: #1e1e2e; }
.dropdown-sep { height: 1px; background: #444466; margin: 4px 8px; }

/* === Main Content === */
#main-content { display: flex; flex: 1; overflow: hidden; }

/* === Left Toolbar === */
#toolbar { width: 58px; min-width: 58px; background: #252535; border-right: 1px solid #333350; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; padding: 4px 2px; }
#toolbar::-webkit-scrollbar { width: 3px; }
#toolbar::-webkit-scrollbar-thumb { background: #555; border-radius: 2px; }
.toolbar-group { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.toolbar-sep { width: 40px; height: 1px; background: #444466; margin: 4px auto; }
.tool-btn { width: 52px; min-height: 44px; padding: 3px 1px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: none; background: transparent; color: #b0b0c0; cursor: pointer; border-radius: 4px; font-size: 15px; position: relative; transition: background 0.15s; }
.tool-btn .tool-icon { line-height: 1; font-size: 16px; display: flex; align-items: center; justify-content: center; height: 18px; }
.tool-btn .tool-name { font-size: 9px; line-height: 1.1; color: #9090a5; white-space: nowrap; letter-spacing: -0.3px; }
.tool-btn:hover { background: #44446a; color: #fff; }
.tool-btn:hover .tool-name { color: #d8d8e8; }
.tool-btn.active { background: #55558a; color: #4fc3f7; box-shadow: inset 0 0 0 1px #4fc3f7; }
.tool-btn.active .tool-name { color: #4fc3f7; }
.tool-btn svg { width: 18px; height: 18px; }
.tool-btn .tool-tip { display: none; position: absolute; left: 60px; top: 50%; transform: translateY(-50%); background: #1a1a2e; border: 1px solid #4fc3f7; color: #e0e0e0; padding: 4px 8px; border-radius: 3px; font-size: 11px; white-space: nowrap; z-index: 500; pointer-events: none; }
.tool-btn:hover .tool-tip { display: block; }
.tool-btn { -webkit-tap-highlight-color: transparent; }

/* === Canvas === */
#canvas-container { flex: 1; position: relative; overflow: hidden; background: #1a1a2e; cursor: none; }
#cad-canvas { position: absolute; top: 0; left: 0; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#cad-canvas:focus { outline: none; }

/* === Properties Panel === */
#properties-panel { width: 220px; min-width: 220px; background: #2a2a3a; border-left: 1px solid #333350; display: flex; flex-direction: column; overflow: hidden; }
.panel-tabs { display: flex; border-bottom: 1px solid #333350; }
.panel-tab { flex: 1; padding: 8px 0; background: transparent; border: none; color: #888; font-size: 12px; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; }
.panel-tab:hover { color: #c0c0d0; }
.panel-tab.active { color: #4fc3f7; border-bottom-color: #4fc3f7; }
.panel-content { flex: 1; overflow-y: auto; padding: 8px; }
.panel-content::-webkit-scrollbar { width: 4px; }
.panel-content::-webkit-scrollbar-thumb { background: #555; border-radius: 2px; }
.panel-content.hidden { display: none; }
.prop-empty { color: #666; text-align: center; padding: 20px; font-size: 12px; }
.prop-group { margin-bottom: 12px; }
.prop-group-title { font-size: 11px; color: #4fc3f7; margin-bottom: 6px; font-weight: 600; }
.prop-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.prop-label { font-size: 11px; color: #999; }
.prop-value { font-size: 11px; color: #e0e0e0; }
.prop-value select, .prop-value input { background: #1e1e2e; border: 1px solid #444466; color: #e0e0e0; padding: 2px 4px; border-radius: 3px; font-size: 11px; width: 100px; }

/* === Layer Panel === */
.layer-actions { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.layer-actions button { background: #33334a; border: 1px solid #444466; color: #e0e0e0; width: 24px; height: 24px; border-radius: 3px; cursor: pointer; font-size: 14px; }
.layer-actions button:hover { background: #44446a; }
.layer-item { display: flex; align-items: center; padding: 4px 6px; border-radius: 3px; margin-bottom: 2px; cursor: pointer; font-size: 11px; gap: 6px; }
.layer-item:hover { background: #33334a; }
.layer-item.current { background: #333355; border: 1px solid #4fc3f7; }
.layer-color { width: 14px; height: 14px; border-radius: 2px; border: 1px solid #555; flex-shrink: 0; }
.layer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-btn { background: none; border: none; color: #888; cursor: pointer; font-size: 12px; padding: 2px; }
.layer-btn:hover { color: #fff; }
.layer-btn.off { color: #555; }
.layer-current-mark { color: #4fc3f7; font-size: 12px; }

/* === Command Line === */
#command-line { height: 48px; background: #1e1e30; border-top: 1px solid #333350; display: flex; flex-direction: column; position: relative; }
#cmd-history-toggle { position: absolute; top: 4px; right: 8px; background: none; border: none; color: #888; cursor: pointer; font-size: 14px; z-index: 10; }
#cmd-history-toggle:hover { color: #4fc3f7; }
#cmd-history { position: absolute; bottom: 28px; left: 0; right: 0; max-height: 120px; overflow-y: auto; background: #1a1a28; border: 1px solid #333350; padding: 4px 8px; font-family: 'Consolas', 'Courier New', monospace; font-size: 11px; color: #aaa; z-index: 20; }
#cmd-history .hist-line { padding: 1px 0; }
#cmd-input-row { display: flex; align-items: center; height: 28px; padding: 0 8px; gap: 6px; }
.cmd-prompt { color: #4fc3f7; font-family: 'Consolas', monospace; font-size: 13px; font-weight: bold; }
#cmd-input { flex: 1; background: transparent; border: none; outline: none; color: #e0e0e0; font-family: 'Consolas', monospace; font-size: 12px; }
#cmd-input::placeholder { color: #555; }
#cmd-message { color: #4fc3f7; font-size: 11px; font-family: 'Consolas', monospace; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* === Status Bar === */
#status-bar { height: 28px; background: #252535; border-top: 1px solid #333350; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; }
.status-left { display: flex; align-items: center; gap: 4px; }
.status-tab { padding: 2px 10px; font-size: 11px; color: #888; cursor: pointer; border-radius: 3px; }
.status-tab:hover { color: #c0c0d0; }
.status-tab.active { color: #e0e0e0; background: #33334a; }
.status-btn { background: none; border: none; color: #888; cursor: pointer; font-size: 14px; padding: 0 4px; }
.status-btn:hover { color: #4fc3f7; }
.status-right { display: flex; align-items: center; gap: 8px; }
#coords-display { font-family: 'Consolas', monospace; font-size: 11px; color: #4fc3f7; min-width: 140px; text-align: right; }
.status-toggle { background: #33334a; border: 1px solid #444466; color: #888; padding: 2px 8px; border-radius: 3px; cursor: pointer; font-size: 11px; transition: all 0.15s; }
.status-toggle:hover { background: #44446a; color: #c0c0d0; }
.status-toggle.active { background: #4fc3f7; color: #1e1e2e; border-color: #4fc3f7; }

/* === Context Menu === */
#context-menu { position: fixed; background: #2a2a3e; border: 1px solid #444466; border-radius: 4px; padding: 4px 0; min-width: 160px; z-index: 2000; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
#context-menu .ctx-item { padding: 6px 16px; cursor: pointer; font-size: 12px; color: #c0c0d0; }
#context-menu .ctx-item:hover { background: #4fc3f7; color: #1e1e2e; }
#context-menu.hidden { display: none; }

/* === Dynamic Input === */
.dyn-input { position: absolute; background: rgba(0,0,0,0.85); border: 1px solid #4fc3f7; border-radius: 3px; padding: 2px 6px; font-family: 'Consolas', monospace; font-size: 11px; color: #4fc3f7; outline: none; z-index: 100; min-width: 80px; }

/* === Scrollbar global === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #444466; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555588; }

/* === File Dialog === */
.file-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 3000; display: flex; align-items: center; justify-content: center; }
.file-dialog { background: #2a2a3e; border: 1px solid #444466; border-radius: 8px; padding: 20px; min-width: 300px; }
.file-dialog h3 { color: #4fc3f7; margin-bottom: 12px; font-size: 14px; }
.file-dialog input[type="text"] { width: 100%; background: #1e1e2e; border: 1px solid #444466; color: #e0e0e0; padding: 6px 8px; border-radius: 4px; font-size: 12px; margin-bottom: 12px; }
.file-dialog .dialog-btns { display: flex; justify-content: flex-end; gap: 8px; }
.file-dialog .dialog-btns button { padding: 6px 16px; border: 1px solid #444466; border-radius: 4px; cursor: pointer; font-size: 12px; }
.file-dialog .btn-ok { background: #4fc3f7; color: #1e1e2e; border-color: #4fc3f7; }
.file-dialog .btn-cancel { background: #33334a; color: #e0e0e0; }

/* === Enhanced property panel === */
.prop-grid { display: flex; flex-direction: column; gap: 6px; }
.prop-field { display: flex; flex-direction: column; gap: 3px; }
.prop-field label { font-size: 10px; color: #8888aa; }
.prop-field input, .prop-field select { background:#1a1a2e; border:1px solid #3a3a5a; color:#e6e6f0; border-radius:4px; padding:5px 6px; font-size:12px; width:100%; box-sizing:border-box; }
.prop-field input:focus, .prop-field select:focus { outline:none; border-color:#4fc3f7; }
.prop-field input[type=color] { padding:1px; height:28px; cursor:pointer; }
.prop-field-2 { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.prop-apply-btn { margin-top:8px; width:100%; padding:8px; background:#2d6fb5; border:none; color:#fff; border-radius:4px; font-size:12px; cursor:pointer; font-weight:600; }
.prop-apply-btn:hover { background:#3a86d8; }
.prop-hint { font-size:10px; color:#666; margin-top:4px; line-height:1.4; }
.prop-section-cap { font-size:10px; color:#4fc3f7; text-transform:uppercase; letter-spacing:.5px; margin:10px 0 2px; }

/* measure result overlay */
.measure-badge { position:absolute; background:rgba(20,20,34,.92); border:1px solid #ffd24a; color:#ffd24a; padding:6px 10px; border-radius:5px; font-size:12px; font-family:Consolas,monospace; pointer-events:none; z-index:60; white-space:nowrap; transform:translate(12px,-50%); }

/* Mobile panel toggle - hidden by default, shown on mobile */
#mobile-panel-toggle { display: none; }

/* Mobile drawing action buttons - hidden by default */
#mobile-draw-actions { display: none; }
.mobile-hidden { display: none !important; }
.mobile-show { display: flex !important; }

/* === Mobile Responsive === */
@media (max-width: 768px) {
  /* Menu bar - compact */
  #menu-bar { height: 28px; padding: 0 4px; }
  .logo-text { display: none; }
  .menu-item { padding: 3px 6px; font-size: 11px; }
  .dropdown-menu { min-width: 160px; }
  .dropdown-item { padding: 8px 12px; font-size: 11px; }

  /* Main content - stack or hide panels */
  #main-content { flex-direction: column; }

  /* Toolbar - horizontal at bottom of canvas or hidden */
  #toolbar {
    width: 100%; min-width: 100%; height: auto; min-height: unset;
    flex-direction: row; border-right: none; border-top: 1px solid #333350;
    padding: 2px 4px; overflow-x: auto; overflow-y: hidden;
    order: 3; /* Move to bottom */
  }
  #toolbar::-webkit-scrollbar { height: 2px; }
  .toolbar-group { flex-direction: row; gap: 1px; }
  .toolbar-sep { width: 1px; height: 30px; margin: 0 4px; }
  .tool-btn { width: 40px; min-height: 36px; padding: 2px 1px; }
  .tool-btn .tool-icon { font-size: 14px; height: 16px; }
  .tool-btn .tool-name { display: none; } /* Hide text on mobile */
  .tool-btn .tool-tip { left: auto; right: 0; top: auto; bottom: 42px; transform: none; }

  /* Canvas - full width */
  #canvas-container { flex: 1; order: 1; }

  /* Properties panel - hidden by default, toggleable */
  #properties-panel {
    position: fixed; top: 28px; right: 0; bottom: 76px; /* menu + cmd + status + toolbar */
    width: 280px; min-width: 280px; z-index: 500;
    transform: translateX(100%); transition: transform 0.25s ease;
    box-shadow: -4px 0 16px rgba(0,0,0,0.5);
    order: 2;
  }
  #properties-panel.mobile-show { transform: translateX(0); }
  .panel-tab { padding: 10px 0; font-size: 13px; }

  /* Command line - compact */
  #command-line { height: 36px; order: 4; }
  #cmd-input-row { height: 24px; padding: 0 4px; gap: 4px; }
  #cmd-input { font-size: 13px; }
  .cmd-prompt { font-size: 12px; }
  #cmd-message { font-size: 10px; max-width: 120px; }
  #cmd-history { max-height: 100px; bottom: 24px; }

  /* Status bar - compact */
  #status-bar { height: 24px; padding: 0 4px; order: 5; }
  .status-left { gap: 2px; }
  .status-tab { padding: 2px 6px; font-size: 10px; }
  .status-right { gap: 4px; }
  #coords-display { font-size: 10px; min-width: 100px; }
  .status-toggle { padding: 2px 6px; font-size: 10px; }

  /* Context menu - wider for touch */
  #context-menu { min-width: 180px; }
  #context-menu .ctx-item { padding: 10px 16px; font-size: 13px; }

  /* File dialog - full width */
  .file-dialog { min-width: 90vw; max-width: 400px; padding: 16px; }

  /* Mobile toggle button for properties panel */
  #mobile-panel-toggle {
    display: block; position: fixed; top: 32px; right: 4px; z-index: 501;
    width: 32px; height: 32px; border-radius: 4px;
    background: #33334a; border: 1px solid #444466; color: #4fc3f7;
    font-size: 16px; cursor: pointer; line-height: 1;
  }
  #mobile-panel-toggle:hover { background: #44446a; }

  /* Mobile drawing action buttons */
  #mobile-draw-actions {
    display: none; position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
    z-index: 600; gap: 12px; align-items: center;
  }
  #mobile-draw-actions.mobile-show { display: flex !important; }
  #mobile-draw-actions button {
    width: 48px; height: 48px; border-radius: 50%; border: none;
    font-size: 20px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
  }
  #mobile-btn-finish { background: #4caf50; color: white; }
  #mobile-btn-cancel { background: #f44336; color: white; }
  #mobile-btn-undo { background: #ff9800; color: white; }
  #mobile-draw-actions button:active { transform: scale(0.92); }
}

@media (min-width: 769px) {
  #mobile-panel-toggle { display: none; }
}

/* Prevent touch scrolling on canvas */
#canvas-container { touch-action: none; }

/* Mobile shape action menu */
#mobile-shape-menu {
  display: none; position: fixed; z-index: 1000;
  background: #2a2a3a; border: 1px solid #4fc3f7; border-radius: 8px;
  padding: 12px; min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
#mobile-shape-menu.mobile-show { display: block; }
#mobile-shape-menu.hidden { display: none; }
.mobile-menu-title {
  font-size: 14px; font-weight: 600; color: #4fc3f7;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid #333350;
}
.mobile-menu-item {
  display: block; width: 100%; padding: 10px 12px; margin-bottom: 4px;
  background: #33334a; border: 1px solid #444466; border-radius: 4px;
  color: #e0e0e0; font-size: 13px; text-align: left; cursor: pointer;
}
.mobile-menu-item:hover, .mobile-menu-item:active { background: #44446a; }
.mobile-menu-item.danger { color: #f44336; border-color: #f44336; }
.mobile-menu-item.danger:hover { background: #f44336; color: white; }