.annotator-container { --editor-panel:#ffffff; }
html[data-theme="dark"] .annotator-container { --editor-panel:#111c2f; }
.annotator-hero { margin-bottom:16px; }
.annotator-app {
  overflow:hidden;
  min-height:720px;
  border:1px solid var(--yk-line);
  border-radius:22px;
  background:var(--yk-surface);
  box-shadow:var(--yk-shadow-md);
}
.annotator-topbar {
  min-height:64px;
  padding:9px 12px;
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--yk-line);
  background:color-mix(in srgb,var(--yk-surface) 96%,transparent);
}
.file-meta,.history-actions,.export-actions { display:flex; align-items:center; gap:8px; min-width:0; }
.export-actions { justify-content:flex-end; }
.file-title-wrap { min-width:0; display:flex; flex-direction:column; gap:2px; }
.file-title-wrap strong,.file-title-wrap span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.file-title-wrap strong { color:var(--yk-ink); font-size:12px; }
.file-title-wrap span { color:var(--yk-muted); font-size:9.5px; }
.topbar-divider { width:1px; height:24px; margin:0 2px; background:var(--yk-line); }
.annotator-tool .editor-primary,
.annotator-tool .editor-secondary,
.annotator-tool .editor-danger,
.annotator-tool .editor-icon-btn,
.annotator-tool .zoom-readout {
  min-height:38px !important;
  width:auto !important;
  margin:0 !important;
  padding:0 12px !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-radius:10px !important;
  font-size:11px !important;
  font-weight:760 !important;
  line-height:1 !important;
  cursor:pointer;
  box-shadow:none !important;
  transition:transform .16s var(--yk-ease),background .16s,border-color .16s,color .16s !important;
}
.annotator-tool .editor-primary { border:1px solid var(--yk-primary) !important; background:var(--yk-primary) !important; color:#fff !important; }
.annotator-tool .editor-primary:hover:not(:disabled) { background:var(--yk-primary-600) !important; transform:translateY(-1px); }
.annotator-tool .editor-secondary { border:1px solid var(--yk-line) !important; background:var(--yk-surface) !important; color:var(--yk-text) !important; }
.annotator-tool .editor-secondary:hover:not(:disabled) { background:var(--yk-surface-muted) !important; border-color:var(--yk-line-strong) !important; transform:translateY(-1px); }
.annotator-tool .editor-danger { border:1px solid color-mix(in srgb,var(--yk-danger) 22%,var(--yk-line)) !important; background:var(--yk-danger-soft) !important; color:var(--yk-danger) !important; }
.annotator-tool .editor-primary:disabled,.annotator-tool .editor-secondary:disabled,.annotator-tool .editor-danger:disabled { opacity:.42 !important; cursor:not-allowed !important; transform:none !important; }
.annotator-tool .editor-icon-btn { width:38px !important; padding:0 !important; }
.annotator-tool button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.zoom-readout { min-width:62px; }

.annotator-workspace { display:grid; grid-template-columns:78px minmax(0,1fr) 286px; min-height:610px; }
.tool-rail { padding:10px 8px; display:flex; flex-direction:column; gap:4px; border-right:1px solid var(--yk-line); background:var(--yk-surface-soft); }
.annotator-tool .editor-tool-btn {
  width:60px !important;
  min-height:52px !important;
  margin:0 !important;
  padding:6px 4px !important;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:1px solid transparent !important;
  border-radius:11px !important;
  background:transparent !important;
  color:var(--yk-muted) !important;
  box-shadow:none !important;
  font-size:9px !important;
  font-weight:700 !important;
  cursor:pointer;
}
.annotator-tool .editor-tool-btn svg { width:19px; height:19px; }
.annotator-tool .editor-tool-btn:hover { background:var(--yk-surface) !important; color:var(--yk-ink) !important; transform:none !important; box-shadow:var(--yk-shadow-xs) !important; }
.annotator-tool .editor-tool-btn.is-active { background:var(--yk-primary-soft) !important; color:var(--yk-primary) !important; border-color:color-mix(in srgb,var(--yk-primary) 18%,var(--yk-line)) !important; box-shadow:none !important; }
.rail-divider { height:1px; margin:5px 6px; background:var(--yk-line); }

.editor-stage { position:relative; min-width:0; min-height:610px; overflow:hidden; background:color-mix(in srgb,var(--yk-bg) 72%,var(--yk-surface-muted)); }
.editor-stage::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.48; background-image:linear-gradient(45deg,color-mix(in srgb,var(--yk-line) 42%,transparent) 25%,transparent 25%),linear-gradient(-45deg,color-mix(in srgb,var(--yk-line) 42%,transparent) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,color-mix(in srgb,var(--yk-line) 42%,transparent) 75%),linear-gradient(-45deg,transparent 75%,color-mix(in srgb,var(--yk-line) 42%,transparent) 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.35) 20%,rgba(0,0,0,.35) 80%,transparent); }
.stage-empty { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:34px; }
.stage-empty.is-hidden { display:none; }
.empty-visual { width:72px; height:72px; display:grid; place-items:center; border-radius:20px; border:1px solid var(--yk-line); background:var(--yk-surface); color:var(--yk-primary); box-shadow:var(--yk-shadow-sm); }
.empty-visual svg { width:38px; height:38px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.stage-empty h2 { margin:17px 0 7px; color:var(--yk-ink); font-size:18px; }
.stage-empty p { max-width:470px; margin:0; color:var(--yk-muted); font-size:11px; line-height:1.8; }
.stage-empty kbd,.annotator-statusbar kbd { padding:2px 5px; border:1px solid var(--yk-line); border-bottom-width:2px; border-radius:5px; background:var(--yk-surface); color:var(--yk-muted); font:inherit; font-size:.9em; }
.empty-open { margin-top:17px !important; min-height:42px !important; padding:0 18px !important; }
.privacy-line { margin-top:13px; color:var(--yk-faint); font-size:9.5px; }
.canvas-scroll { position:absolute; inset:0; z-index:1; overflow:auto; overscroll-behavior:contain; }
.canvas-shell { min-width:100%; min-height:100%; padding:28px; display:flex; align-items:center; justify-content:center; }
#editorCanvas { display:block; flex:0 0 auto; max-width:none; max-height:none; background:#fff; box-shadow:0 18px 48px rgba(15,23,42,.18); touch-action:none; cursor:crosshair; }
.drop-overlay { position:absolute; inset:18px; z-index:10; display:none; place-items:center; border:2px dashed var(--yk-primary); border-radius:18px; background:color-mix(in srgb,var(--yk-primary-soft) 88%,transparent); color:var(--yk-primary); font-size:16px; font-weight:800; pointer-events:none; }
.editor-stage.is-dragging .drop-overlay { display:grid; }

.inspector { min-width:0; border-left:1px solid var(--yk-line); background:var(--yk-surface); overflow:auto; }
.inspector-section { padding:16px; border-bottom:1px solid var(--yk-line); }
.inspector-section:last-child { border-bottom:0; }
.inspector-title { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:13px; }
.inspector-title strong { color:var(--yk-ink); font-size:12px; }
.inspector-title span { color:var(--yk-faint); font-size:8.5px; text-align:right; }
.inspector-label { display:block; margin-bottom:8px; color:var(--yk-muted); font-size:10px; font-weight:700; }
.color-palette { display:grid; grid-template-columns:repeat(8,1fr); gap:5px; }
.annotator-tool .color-dot,.custom-color { position:relative; width:27px !important; height:27px !important; min-height:27px !important; padding:0 !important; border:2px solid transparent !important; border-radius:8px !important; background:var(--dot) !important; box-shadow:inset 0 0 0 1px rgba(15,23,42,.08) !important; cursor:pointer; }
.annotator-tool .color-dot.is-active { border-color:var(--yk-surface) !important; box-shadow:0 0 0 2px var(--yk-primary),inset 0 0 0 1px rgba(15,23,42,.08) !important; }
.custom-color { overflow:hidden; display:grid; place-items:center; border:1px solid var(--yk-line) !important; background:conic-gradient(#ef4444,#f59e0b,#22c55e,#06b6d4,#2563eb,#7c3aed,#ef4444) !important; color:white; }
.custom-color input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100% !important; height:100% !important; }
.custom-color span { position:relative; z-index:1; font-size:16px; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,.25); pointer-events:none; }
.inspector-row { margin-top:14px; }
.inspector-row label { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; color:var(--yk-muted); font-size:10px; font-weight:700; }
.inspector-row label b { color:var(--yk-ink); font-size:9px; }
.annotator-tool input[type="range"] { min-height:20px !important; }
.annotator-tool textarea { width:100%; resize:vertical; min-height:66px !important; padding:9px 10px !important; font-size:11px !important; line-height:1.55; }
.element-actions { display:grid; grid-template-columns:1fr 88px; gap:7px; }
.full-width { width:100% !important; margin-top:7px !important; }
.two-fields { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.two-fields label { color:var(--yk-muted); font-size:9.5px; font-weight:700; }
.two-fields select { width:100%; margin-top:5px; min-height:38px !important; font-size:10.5px !important; }
.export-panel .yk-local-note { margin-top:12px; }
.export-panel .yk-workflow-actions button { min-height:36px !important; font-size:9.5px !important; }

.annotator-statusbar { min-height:38px; padding:8px 12px; display:flex; justify-content:space-between; align-items:center; gap:16px; border-top:1px solid var(--yk-line); background:var(--yk-surface-soft); color:var(--yk-faint); font-size:9.5px; }
.annotator-statusbar span:first-child { color:var(--yk-muted); }

@media (max-width:1100px) {
  .annotator-topbar { grid-template-columns:1fr auto; }
  .history-actions { order:3; grid-column:1/-1; justify-content:center; padding-top:6px; border-top:1px solid var(--yk-line); }
  .annotator-workspace { grid-template-columns:70px minmax(0,1fr) 252px; }
  .annotator-tool .editor-tool-btn { width:54px !important; }
}
@media (max-width:820px) {
  .annotator-app { border-radius:17px; min-height:0; }
  .annotator-topbar { grid-template-columns:1fr auto; }
  .file-title-wrap { display:none; }
  .export-actions .editor-secondary span,.file-meta .editor-secondary span { display:none; }
  .export-actions .editor-secondary,.file-meta .editor-secondary { width:38px !important; padding:0 !important; }
  .annotator-workspace { display:flex; flex-direction:column; min-height:0; }
  .tool-rail { order:1; height:auto; padding:7px; flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--yk-line); scrollbar-width:none; }
  .tool-rail::-webkit-scrollbar { display:none; }
  .annotator-tool .editor-tool-btn { flex:0 0 52px; width:52px !important; min-height:48px !important; }
  .rail-divider { flex:0 0 1px; height:36px; width:1px; margin:6px 3px; }
  .editor-stage { order:2; min-height:500px; }
  .inspector { order:3; border-left:0; border-top:1px solid var(--yk-line); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; }
  .inspector-section { border-right:1px solid var(--yk-line); }
  .inspector-section:nth-child(even) { border-right:0; }
  .export-panel { grid-column:1/-1; }
  .annotator-statusbar { display:none; }
}
@media (max-width:560px) {
  .annotator-container { width:calc(100% - 12px); }
  .annotator-topbar { padding:7px; gap:6px; }
  .history-actions { gap:5px; }
  .history-actions .topbar-divider { display:none; }
  .editor-stage { min-height:410px; }
  .canvas-shell { padding:16px; }
  .inspector { grid-template-columns:1fr; }
  .inspector-section,.inspector-section:nth-child(even) { border-right:0; }
  .color-palette { grid-template-columns:repeat(8,27px); justify-content:space-between; }
  .annotator-tool .editor-primary span { display:none; }
  .annotator-tool .editor-primary { width:38px !important; padding:0 !important; }
}