:root {
  --bg: #090b0a;
  --surface: rgba(19, 23, 21, .88);
  --surface-solid: #141816;
  --surface-2: #1b211e;
  --line: rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.24);
  --text: #f4f7f5;
  --muted: #8e9993;
  --accent: #b7ff38;
  --danger: #ff6279;
  --shadow: 0 22px 70px rgba(0,0,0,.42);
}
* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body.app-locked > :not(#boardsModal):not(#toast) { pointer-events:none; filter:blur(5px); }
body.app-locked #boardsModal { background:rgba(0,0,0,.86); }
button, textarea, input, select { font:inherit; }
button { color:inherit; }
.hidden { display:none !important; }
.glass { background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.canvas { position:fixed; inset:0; overflow:hidden; touch-action:none; background:#090b0a; cursor:default; }
.canvas.hand { cursor:grab; }
.canvas.panning { cursor:grabbing; }
.grid { position:absolute; inset:0; pointer-events:none; opacity:.48; background-image:radial-gradient(circle,rgba(255,255,255,.16) 1px,transparent 1px); background-size:24px 24px; }
.world { position:absolute; left:0; top:0; width:6000px; height:4000px; transform-origin:0 0; }
.selection-marquee { position:absolute; z-index:80; pointer-events:none; border:1px solid var(--accent); background:rgba(183,255,56,.12); box-shadow:0 0 0 1px rgba(183,255,56,.18); border-radius:5px; }
.toolbar { position:fixed; left:50%; top:16px; transform:translateX(-50%); z-index:100; display:flex; gap:5px; align-items:center; padding:6px; border-radius:16px; }
.context-toolbar { position:fixed; left:50%; top:82px; transform:translateX(-50%); z-index:99; display:flex; align-items:center; gap:5px; padding:6px; border-radius:14px; max-width:calc(100vw - 24px); }
.divider { width:1px; height:22px; background:var(--line); margin:0 2px; flex:0 0 auto; }
.icon-btn { position:relative; width:38px; height:38px; padding:0; border:0; border-radius:10px; display:grid; place-items:center; background:transparent; cursor:pointer; font-size:19px; transition:.14s ease; }
.icon-btn:hover { background:rgba(255,255,255,.09); }
.icon-btn.active { background:#edf9e5; color:#0c1209; }
.icon-btn.accent { background:var(--accent); color:#0a1007; }
.icon-btn.small { width:32px; height:32px; border-radius:8px; font-size:17px; }
.icon-btn.danger { color:var(--danger); }
.icon-btn:disabled { opacity:.3; cursor:not-allowed; }
.sync-button { width:auto; min-width:68px; padding:0 10px; display:flex; gap:6px; font-size:10px; font-weight:800; }
.icon-btn[data-tip]::after, [data-tip]::after { content:attr(data-tip); position:absolute; left:50%; top:calc(100% + 9px); transform:translateX(-50%) translateY(-2px); padding:6px 8px; border-radius:7px; color:#fff; background:#050706; border:1px solid rgba(255,255,255,.15); font-size:10px; line-height:1; white-space:nowrap; opacity:0; pointer-events:none; transition:.12s; z-index:1000; }
.icon-btn[data-tip]:hover::after, [data-tip]:hover::after { opacity:1; transform:translateX(-50%) translateY(0); }
.italic-icon { font-family:Georgia,serif; font-style:italic; font-weight:700; }
.underline-icon { font-weight:800; text-decoration:underline; }
.color-control { overflow:hidden; }
.color-control input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.mini-select { width:104px; height:32px; padding:0 28px 0 9px; border-radius:8px; border:0; outline:0; background:#232a26; color:var(--text); font-size:11px; cursor:pointer; }
.number-control { height:32px; display:flex; align-items:center; overflow:hidden; border-radius:8px; background:#232a26; }
.number-control button { width:27px; height:32px; border:0; background:transparent; color:var(--text); display:grid; place-items:center; cursor:pointer; }
.number-control input { width:42px; height:32px; border:0; outline:0; background:transparent; color:var(--text); text-align:center; font-size:11px; appearance:textfield; }
.number-control input::-webkit-inner-spin-button { display:none; }
.popover { position:fixed; left:50%; top:128px; transform:translateX(-50%); z-index:110; display:flex; align-items:center; gap:9px; padding:8px; border-radius:13px; }
.popover label { position:relative; display:flex; align-items:center; gap:6px; color:var(--muted); }
.popover input[type="range"] { width:92px; accent-color:var(--accent); }
.zoom-dock { position:fixed; right:18px; bottom:18px; z-index:100; display:flex; align-items:center; gap:2px; padding:5px; border-radius:13px; }
.zoom-value { position:relative; min-width:54px; height:32px; border:0; background:transparent; color:var(--muted); font-size:10px; cursor:pointer; }
.grid-toggle { position:fixed; left:18px; bottom:18px; z-index:100; border-radius:10px; }
.boards-trigger { position:fixed; left:18px; top:18px; z-index:100; height:38px; padding:0 14px; border-radius:11px; color:var(--text); display:flex; align-items:center; gap:8px; cursor:pointer; font-size:12px; font-weight:750; }
.boards-trigger ion-icon { color:var(--accent); font-size:18px; }
.sync-status { position:fixed; left:50%; bottom:18px; z-index:100; transform:translateX(-50%); min-height:34px; padding:0 11px; border-radius:11px; display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; font-weight:750; pointer-events:none; }
.sync-status ion-icon { font-size:17px; }
.sync-status[data-state="pending"],.sync-status[data-state="saving"] { color:#ffd86b; }
.sync-status[data-state="synced"],.sync-status[data-state="updated"] { color:var(--accent); }
.sync-status[data-state="error"],.sync-status[data-state="offline"] { color:#ff7c74; }
.sync-status[data-state="saving"] ion-icon { animation:spin 1s linear infinite; }
.view-only-badge { position:fixed; left:18px; top:68px; z-index:100; display:flex; align-items:center; gap:7px; padding:8px 11px; border-radius:10px; color:var(--accent); font-size:11px; font-weight:800; }
.link-count { position:fixed; right:18px; top:68px; z-index:100; display:flex; align-items:center; gap:7px; min-height:34px; padding:0 11px; border-radius:10px; color:var(--text); font-size:11px; font-weight:800; pointer-events:none; }
.link-count ion-icon { color:var(--accent); font-size:17px; }
.board-visibility { display:inline-block; margin-left:7px; padding:2px 5px; border-radius:5px; background:rgba(183,255,56,.12); color:var(--accent); font-size:8px; text-transform:uppercase; }
.modal.boards-modal { width:min(920px,100%); padding:0; overflow:hidden; }
.boards-head { display:flex; align-items:center; justify-content:space-between; padding:18px 18px 14px; border-bottom:1px solid var(--line); }
.boards-head strong { display:block; font-size:18px; }
.boards-head small { display:block; margin-top:4px; color:var(--muted); font-size:11px; }
.auth-panel { display:grid; gap:10px; padding:18px; }
.auth-panel input { height:44px; border:1px solid var(--line); border-radius:10px; outline:0; padding:0 12px; background:#0b0e0c; color:var(--text); }
.auth-panel input:focus { border-color:var(--accent); }
.auth-actions,.boards-actions { display:flex; align-items:center; gap:8px; }
.boards-actions { justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); }
.new-board-controls { display:flex; align-items:center; gap:8px; }
.new-board-controls select { height:36px; padding:0 30px 0 10px; border:1px solid var(--line); border-radius:9px; background:#171c19; color:var(--text); font-size:11px; font-weight:700; }
.text-btn { min-height:36px; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:#171c19; color:var(--text); cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; }
.text-btn:hover { border-color:var(--line-strong); background:#202621; }
.text-btn.accent-text { border-color:transparent; background:var(--accent); color:#0a1007; }
.boards-list { min-height:0; max-height:min(68vh,720px); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:14px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; scrollbar-color:var(--line-strong) transparent; scrollbar-width:thin; }
.boards-list::-webkit-scrollbar { width:8px; }
.boards-list::-webkit-scrollbar-track { background:transparent; }
.boards-list::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:10px; background:var(--line-strong); background-clip:padding-box; }
.board-row { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); }
.board-row:hover { border-color:var(--line-strong); background:rgba(255,255,255,.055); }
.board-thumb { grid-column:1/-1; width:100%; aspect-ratio:16/9; display:block; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:#090b0a; cursor:pointer; }
.board-open { min-width:0; border:0; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.board-open strong,.board-open small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board-open small { margin-top:4px; color:var(--muted); font-size:10px; }
.board-row-actions { display:flex; gap:3px; justify-content:flex-end; }
.boards-empty { padding:34px 16px; text-align:center; color:var(--muted); font-size:12px; }
@media (max-width:520px) {
  .boards-list { grid-template-columns:1fr; padding:10px; }
  .board-row { gap:9px; }
}
.canvas-node { position:absolute; min-width:120px; min-height:70px; transform-origin:center center; user-select:none; }
.canvas-node.selected { z-index:9999 !important; }
.canvas-node.group-selected { outline:2px solid rgba(183,255,56,.72); outline-offset:3px; }
.text-node { border:1px solid transparent; border-radius:8px; }
.text-node.selected { border-color:var(--accent); }
.text-node.locked { border-style:dashed; border-color:rgba(255,255,255,.25); }
.text-content { width:100%; height:100%; padding:10px 12px; outline:0; overflow:hidden; white-space:pre-wrap; word-break:break-word; user-select:none; cursor:move; }
.text-node.editing .text-content { user-select:text; cursor:text; overflow:auto; }
.text-node.editing { border-color:#fff; }
.text-content:empty::before { content:"Type"; color:rgba(255,255,255,.35); pointer-events:none; }
.link-node { min-width:180px; min-height:100px; overflow:visible; border:1px solid rgba(255,255,255,.16); border-radius:14px; background:#111513; box-shadow:0 18px 54px rgba(0,0,0,.38); }
.link-node.selected { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),0 22px 62px rgba(0,0,0,.46); }
.link-node.locked { border-style:dashed; }
.link-head { height:36px; display:flex; align-items:center; gap:8px; padding:0 8px 0 10px; background:#191e1b; border-radius:13px 13px 0 0; border-bottom:1px solid rgba(255,255,255,.09); cursor:move; }
.link-head ion-icon { flex:0 0 auto; color:var(--accent); }
.link-title { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:700; }
.link-head .node-mini { width:26px; height:26px; font-size:14px; opacity:0; }
.link-node:hover .node-mini, .link-node.selected .node-mini { opacity:1; }
.link-media { position:absolute; left:0; right:0; top:36px; bottom:0; overflow:hidden; border-radius:0 0 13px 13px; background:#080a09; }
.link-media iframe, .link-media video, .link-media img { width:100%; height:100%; display:block; border:0; background:#080a09; }
.link-media audio { width:100%; }
.audio-card { width:100%; height:100%; min-height:120px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:18px; background:linear-gradient(145deg,#162018,#0b100d); color:var(--text); text-align:center; }
.audio-card ion-icon { color:var(--accent); font-size:42px; }
.link-media img, .link-media video { object-fit:contain; }
.link-node.fill .link-media img, .link-node.fill .link-media video { object-fit:cover; }
.web-card { width:100%; height:100%; display:grid; grid-template-rows:minmax(0,1fr) auto; background:#121614; }
.web-image { min-height:0; background:#0a0d0b; overflow:hidden; display:grid; place-items:center; }
.web-image img { width:100%; height:100%; object-fit:cover; }
.web-image ion-icon { font-size:38px; color:var(--accent); }
.web-copy { padding:11px 12px 13px; border-top:1px solid rgba(255,255,255,.09); }
.web-copy strong { display:block; font-size:12px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.web-copy p { margin:5px 0 0; color:var(--muted); font-size:10px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.loading-card { width:100%; height:100%; display:grid; place-items:center; color:var(--muted); }
.loading-card ion-icon { font-size:30px; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.resize-handle { position:absolute; z-index:20; display:none; width:16px; height:16px; border-radius:5px; background:#fff; border:3px solid #101310; box-shadow:0 0 0 1px var(--accent); touch-action:none; }
.canvas-node.selected:not(.locked) .resize-handle { display:block; }
.resize-handle[data-dir="nw"] { left:-9px; top:-9px; cursor:nwse-resize; }
.resize-handle[data-dir="n"] { left:50%; top:-9px; transform:translateX(-50%); cursor:ns-resize; }
.resize-handle[data-dir="ne"] { right:-9px; top:-9px; cursor:nesw-resize; }
.resize-handle[data-dir="e"] { right:-9px; top:50%; transform:translateY(-50%); cursor:ew-resize; }
.resize-handle[data-dir="se"] { right:-9px; bottom:-9px; cursor:nwse-resize; }
.resize-handle[data-dir="s"] { left:50%; bottom:-9px; transform:translateX(-50%); cursor:ns-resize; }
.resize-handle[data-dir="sw"] { left:-9px; bottom:-9px; cursor:nesw-resize; }
.resize-handle[data-dir="w"] { left:-9px; top:50%; transform:translateY(-50%); cursor:ew-resize; }
.move-handle { position:absolute; z-index:22; display:none; left:-2px; top:-43px; width:34px; height:34px; place-items:center; border:1px solid var(--accent); border-radius:10px; background:#111713; color:var(--accent); font-size:18px; cursor:move; touch-action:none; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.canvas-node.selected:not(.locked) .move-handle { display:grid; }
.rotate-stem { position:absolute; z-index:19; left:50%; top:-34px; width:1px; height:28px; background:var(--accent); display:none; }
.rotate-handle { position:absolute; z-index:21; left:50%; top:-44px; transform:translateX(-50%); width:15px; height:15px; border-radius:50%; background:var(--accent); border:3px solid #111; cursor:grab; display:none; }
.canvas-node.selected:not(.locked) .rotate-stem, .canvas-node.selected:not(.locked) .rotate-handle { display:block; }
.modal-wrap { position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.7); backdrop-filter:blur(5px); }
.modal { width:min(520px,100%); border-radius:18px; padding:12px; }
.modal-icons { height:38px; display:flex; align-items:center; justify-content:space-between; padding-left:8px; font-size:22px; color:var(--accent); }
.modal textarea { display:block; width:100%; height:160px; resize:none; border:1px solid var(--line); border-radius:12px; outline:0; padding:14px; background:#0b0e0c; color:var(--text); line-height:1.5; }
.modal textarea:focus { border-color:var(--accent); }
.modal-actions { display:flex; justify-content:flex-end; align-items:center; gap:6px; margin-top:9px; }
.modal-actions #linkListBtn { margin-right:auto; }
.shortcuts-modal { width:min(420px,100%); }
.shortcut-grid { display:grid; grid-template-columns:110px 1fr; gap:7px 14px; align-items:center; padding:12px; }
.shortcut-grid kbd { justify-self:end; min-width:34px; padding:5px 7px; border-radius:7px; border:1px solid var(--line-strong); background:#0a0d0b; color:var(--text); text-align:center; font-size:10px; box-shadow:inset 0 -2px 0 rgba(255,255,255,.08); }
.shortcut-grid span { color:var(--muted); font-size:19px; }
.toast { position:fixed; left:50%; bottom:24px; z-index:500; transform:translate(-50%,18px); opacity:0; pointer-events:none; background:#eff9e8; color:#0b1208; padding:9px 12px; border-radius:9px; font-size:11px; font-weight:800; transition:.18s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:760px) {
  .toolbar { left:8px; right:8px; top:max(8px,env(safe-area-inset-top)); transform:none; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; padding:6px; overflow:visible; }
  .toolbar::-webkit-scrollbar,.context-toolbar::-webkit-scrollbar { display:none; }
  .toolbar .divider { display:none; }
  .context-toolbar { left:8px; right:8px; top:max(154px,calc(env(safe-area-inset-top) + 154px)); transform:none; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; }
  .toolbar .icon-btn { width:100%; height:40px; min-width:0; flex:0 0 auto; }
  .toolbar .sync-button { width:100%; min-width:0; }
  .toolbar .sync-button span { display:none; }
  .context-toolbar .icon-btn { width:44px; height:44px; flex:0 0 auto; }
  .icon-btn.small { width:40px; height:40px; }
  .boards-trigger { left:10px; top:auto; bottom:max(10px,env(safe-area-inset-bottom)); height:44px; }
  .sync-status { bottom:max(64px,calc(env(safe-area-inset-bottom) + 64px)); }
  .zoom-dock { right:10px; bottom:max(10px,env(safe-area-inset-bottom)); }
  .grid-toggle { left:10px; bottom:66px; }
  .view-only-badge { left:10px; top:122px; }
  .link-count { right:10px; top:108px; }
  .mini-select { width:90px; }
  .popover { left:12px; right:12px; transform:none; overflow-x:auto; }
  .modal-wrap { place-items:stretch; padding:0; }
  .modal,.boards-modal { width:100%; height:100%; max-height:none; border:0; border-radius:0; padding-top:max(12px,env(safe-area-inset-top)); padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  .boards-modal { display:flex; flex-direction:column; }
  #boardsPanel:not(.hidden) { min-height:0; flex:1; display:flex; flex-direction:column; }
  .boards-list { min-height:0; flex:1; max-height:none; overflow-y:auto; }
  .auth-panel input { height:48px; font-size:16px; }
  .text-btn { min-height:44px; }
  .toast { bottom:76px; max-width:calc(100vw - 24px); text-align:center; }
  .resize-handle { width:24px; height:24px; border-width:5px; border-radius:8px; }
  .resize-handle[data-dir="nw"] { left:-13px; top:-13px; }
  .resize-handle[data-dir="n"] { top:-13px; }
  .resize-handle[data-dir="ne"] { right:-13px; top:-13px; }
  .resize-handle[data-dir="e"] { right:-13px; }
  .resize-handle[data-dir="se"] { right:-13px; bottom:-13px; }
  .resize-handle[data-dir="s"] { bottom:-13px; }
  .resize-handle[data-dir="sw"] { left:-13px; bottom:-13px; }
  .resize-handle[data-dir="w"] { left:-13px; }
  .move-handle { width:40px; height:40px; top:-51px; font-size:22px; }
}
@media (max-width:360px) {
  .toolbar { grid-template-columns:repeat(7,minmax(0,1fr)); }
}
.link-node:not(.media-active) .link-media::after { content:""; position:absolute; inset:0; z-index:5; cursor:move; }
.link-node.media-active .link-media { box-shadow:inset 0 0 0 2px rgba(183,255,56,.55); }