#commentPins { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:3; }
#app.nav-open #viewbar { left:calc(50% + 136px); max-width:calc(100% - 296px); }
.comment-pin { position:absolute; width:30px; height:30px; border:2px solid #fff; border-radius:50% 50% 50% 3px; background:#1c6dd0; color:#fff; font-size:12px; font-weight:800; pointer-events:auto; box-shadow:0 2px 8px #002f6c55; transform:translate(-50%,-100%); }
.comment-pin.active { background:var(--accent); box-shadow:0 0 0 5px #e8590c33; }
#commentMode { position:absolute; left:50%; top:14px; transform:translateX(-50%); background:#1d2733; color:#fff; padding:10px 14px; border-radius:10px; display:flex; gap:12px; align-items:center; z-index:10; font-size:13px; width:max-content; max-width:90%; }
#stage.comment-placing #c3d { cursor:crosshair!important; }
#stage.comment-placing #overlay { pointer-events:none; }
#stage.comment-placing .lbl { pointer-events:none; }
#stage.comment-placing .comment-pin { pointer-events:none; }
#commentPanel { background:#f7faff; }
.comment-card { border:1px solid var(--line); border-radius:12px; background:#fff; padding:13px; margin:10px 0; }
.comment-card.active { border-color:var(--blue); box-shadow:0 0 0 2px #1c6dd014; }
.comment-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; font-size:11px; color:var(--ink2); }
.comment-meta b { color:var(--ink); font-size:12px; }
.comment-body { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.5; margin:9px 0; }
.comment-context { color:var(--ink2); font-size:11px; margin:5px 0 10px; }
.comment-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.vote[aria-pressed=true] { background:#e7f0fb; border-color:var(--blue); color:var(--blue); }
.comment-empty { font-size:13px; line-height:1.5; color:var(--ink2); padding:20px 0; }
#commentPanel .comment-scroll { max-height:55vh; overflow-y:auto; }
#commentText { min-height:110px; resize:vertical; font-family:inherit!important; font-size:14px!important; }
.comment-error { color:var(--danger); font-size:13px; margin:10px 0; }
#dashboard { position:fixed; inset:56px 0 0; overflow-y:auto; z-index:20; background:#eef1f4; padding:26px max(24px,calc((100vw - 1180px)/2)); }
.dashboard-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:20px; }
.dashboard-head h1 { font-size:28px; margin:0 0 7px; letter-spacing:-.6px; }
.dashboard-head p { font-size:14px; color:var(--ink2); margin:0; line-height:1.5; }
.dashboard-head small { display:block; margin-top:8px; color:var(--ink2); font-size:12px; }
.dashboard-tabs { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:20px; }
.dashboard-tabs .on { background:var(--ink); color:#fff; border-color:var(--ink); }
.dashboard-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px; }
.dashboard-stats div { background:white; border:1px solid var(--line); border-radius:12px; padding:15px 18px; }
.dashboard-stats b { display:block; font-size:26px; }.dashboard-stats span { font-size:12px; color:var(--ink2); }
.dashboard-filters { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.dashboard-filters input,.dashboard-filters select { border:1px solid var(--line); padding:10px 12px; border-radius:9px; background:#fff; font:inherit; font-size:13px; min-width:150px; }
.dashboard-filters input { flex:1; }
.dashboard-comments { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.dashboard-comments .comment-card { margin:0; }
.dashboard-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.dashboard-grid .card { background:#fff; }
.dashboard-grid .card img { aspect-ratio:16/9; }.dashboard-grid .card .body { padding:16px; line-height:1.6; }
.dashboard-grid .card .foot { padding:0 16px 16px; flex-wrap:wrap; }
.dashboard-grid .card .noimg { font-size:24px; color:#97a8b8; background:linear-gradient(135deg,#dae4ed,#f2f5f8); }
#bootMessage { position:fixed; inset:0; z-index:100; background:#eef1f4; display:grid; place-content:center; gap:16px; text-align:center; padding:28px; font-size:16px; }
#modalBack.comments-modal #modal { width:min(560px,100%); }
@media(max-width:1100px) { #btnCheat { display:none; } .concept-box .btn { padding:6px 7px; } .top-actions { gap:4px; } }
@media(max-width:760px) { #dashboard { inset:0; z-index:30; padding:18px 14px; } .dashboard-head h1 { font-size:23px; } .dashboard-comments { grid-template-columns:1fr; } .dashboard-stats { gap:6px; } .dashboard-stats div { padding:12px; } .dashboard-stats b { font-size:21px; } #btnComments { font-size:12px; } #viewbar { bottom:10px; gap:4px; } #app.nav-open #viewbar { left:50%;max-width:calc(100% - 24px); } .seg button { padding:6px 8px; font-size:12px; } .dashboard-filters select { flex:1; min-width:130px; } }