/* Cork_Board — Modern Tactile Canvas design tokens（來源：stitch DESIGN.md） */
:root {
  --surface: #fbf9f7;
  --surface-dim: #dbdad8;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f5f3f1;
  --surface-container: #efedec;
  --surface-container-high: #eae8e6;
  --on-surface: #1b1c1b;
  --on-surface-variant: #4e453d;
  --outline: #80756c;
  --outline-variant: #d2c4b9;
  --primary: #725a41;
  --on-primary: #ffffff;
  --primary-container: #d9b99b;
  --on-primary-container: #604931;
  --accent: #005ac2;           /* Action Blue：選取、連線、互動 */
  --accent-container: #a1beff;
  --error: #ba1a1a;
  --error-container: #ffdad6;

  --note-yellow: #fbe87f;
  --note-blue: #aecbfa;
  --note-green: #b9e6c9;
  --note-pink: #f8b9c4;

  --font-ui: 'Inter', 'Noto Sans TC', sans-serif;
  --font-note: 'Be Vietnam Pro', 'Noto Sans TC', sans-serif;
  --font-label: 'Hanken Grotesk', 'Noto Sans TC', sans-serif;

  --radius-sm: 0.25rem;   /* 便利貼、輸入框 */
  --radius-md: 0.5rem;    /* 按鈕 */
  --radius-lg: 0.75rem;   /* 工具列 */

  --shadow-note: 0 1px 2px rgba(27, 28, 27, 0.20), 0 4px 10px rgba(27, 28, 27, 0.22);
  --shadow-note-lifted: 0 2px 4px rgba(27, 28, 27, 0.20), 0 12px 24px rgba(27, 28, 27, 0.28);
  --shadow-float: 0 4px 16px rgba(27, 28, 27, 0.12);
  --glass: rgba(255, 255, 255, 0.8);
}

/* Material Symbols Outlined（畫面稿指定的圖示系統） */
.ms {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  user-select: none;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.ms.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.ms.sm { font-size: 17px; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  color: var(--on-surface);
  background: var(--surface);
  font-size: 16px;
  line-height: 1.5;
}

button {
  font-family: var(--font-ui);
  font-size: 14px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--on-surface);
  border-radius: var(--radius-md);
}

input[type="text"], input[type="password"] {
  font-family: var(--font-ui);
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid rgba(27, 28, 27, 0.2);
  border-radius: var(--radius-sm);
  background: var(--surface-container-lowest);
  color: var(--on-surface);
  outline: none;
  width: 100%;
}
input[type="text"]:focus, input[type="password"]:focus {
  border-color: var(--accent);
}

/* ---- 頂欄 ---- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--surface-container-high);
  z-index: 100;
}
.topbar .logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: #9d8c7a;
}
.logo-mark { flex-shrink: 0; display: block; }
.topbar .spacer { flex: 1; }
.save-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
}
.save-status.saving { color: var(--accent); }
.save-status.error { color: var(--error); }

.icon-btn {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: 17px;
}
.icon-btn:hover { background: rgba(27, 28, 27, 0.08); }

/* ---- 玻璃擬態浮動工具列 ---- */
.toolbar-float {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  z-index: 200;
}
.toolbar-float .divider {
  width: 1px; height: 24px;
  background: rgba(27, 28, 27, 0.12);
}
.tool-btn {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: 16px;
}
.tool-btn:hover { background: rgba(27, 28, 27, 0.06); }
.tool-btn.active { background: rgba(27, 28, 27, 0.10); }

/* ---- 通用小選單 ---- */
.menu {
  position: fixed;
  min-width: 160px;
  background: var(--surface-container-lowest);
  border: 1px solid var(--surface-container-high);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  padding: 6px;
  z-index: 500;
}
.menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  font-size: 14px;
  border-radius: var(--radius-sm);
}
.menu button .ms { color: var(--on-surface-variant); }
.menu button.danger .ms { color: var(--error); }
.menu button:hover { background: var(--surface-container-low); }
.menu button.danger { color: var(--error); }