/* picd.in annotation editor — full-screen canvas editor. */
.an{
  position:fixed; inset:0; display:flex; flex-direction:column;
  background:var(--surface-inverse); color:#fff; font-family:var(--font-body);
}

/* top bar */
.an-top{
  display:flex; align-items:center; gap:12px; padding:10px 16px;
  background:#0a1720; border-bottom:1px solid rgba(255,255,255,.08);
}
.an-mode{ flex:1; font-size:var(--text-sm); color:rgba(255,255,255,.7); }
.an-icon{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border:none; border-radius:var(--radius-md); background:rgba(255,255,255,.08); color:#fff;
  cursor:pointer; text-decoration:none; transition:background .12s var(--ease-standard);
}
.an-icon:hover{ background:rgba(255,255,255,.16); }
.an-icon:disabled{ opacity:.35; cursor:default; }
.an-save{
  display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border:none;
  border-radius:var(--radius-pill); background:var(--teal-500); color:#fff;
  font-family:var(--font-body); font-weight:700; font-size:var(--text-sm); cursor:pointer;
  box-shadow:var(--shadow-brand); transition:filter .12s var(--ease-standard);
}
.an-save:hover{ filter:brightness(.95); }
.an-save:disabled{ opacity:.6; cursor:default; box-shadow:none; }

/* record narrated session */
.an-rec{
  display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#fff;
  font-family:var(--font-body); font-weight:700; font-size:var(--text-sm); cursor:pointer;
}
.an-rec:hover{ background:rgba(255,255,255,.14); }
.an-rec__dot{ width:10px; height:10px; border-radius:var(--radius-circle); background:var(--danger); }
.an-rec.is-recording{ background:rgba(224,70,75,.18); border-color:var(--danger); }
.an-rec.is-recording .an-rec__dot{ animation:an-rec-pulse 1s infinite; }
@keyframes an-rec-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.an-rec__time{ font-family:var(--font-mono); font-size:var(--text-xs); }

.an-preview{ position:fixed; inset:0; z-index:50; background:rgba(4,10,15,.8); display:flex; align-items:center; justify-content:center; padding:24px; }
.an-preview__box{ background:#0d1c26; border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-lg); padding:16px; max-width:min(900px,100%); box-shadow:var(--shadow-xl); }
.an-preview video{ display:block; max-width:100%; max-height:70vh; border-radius:var(--radius-md); background:#000; }
.an-preview__actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
.an-preview__discard{ padding:9px 18px; border:none; border-radius:var(--radius-pill); background:rgba(255,255,255,.1); color:#fff; font-family:var(--font-body); font-weight:700; font-size:var(--text-sm); cursor:pointer; }
.an-preview__save{ padding:9px 18px; border:none; border-radius:var(--radius-pill); background:var(--teal-500); color:#fff; font-family:var(--font-body); font-weight:700; font-size:var(--text-sm); cursor:pointer; box-shadow:var(--shadow-brand); }
.an-preview__save:disabled{ opacity:.6; cursor:default; }

/* toolbar */
.an-toolbar{
  display:flex; align-items:center; gap:10px; padding:8px 16px; flex-wrap:wrap;
  background:#0d1c26; border-bottom:1px solid rgba(255,255,255,.08);
}
.an-tools, .an-colors, .an-widths, .an-history{ display:flex; align-items:center; gap:4px; }
.an-sep{ width:1px; align-self:stretch; margin:2px 4px; background:rgba(255,255,255,.12); }
.an-spacer{ flex:1; }

.an-tool{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border:1px solid transparent; border-radius:var(--radius-md); background:transparent;
  color:rgba(255,255,255,.8); cursor:pointer; transition:background .12s var(--ease-standard), color .12s;
}
.an-tool svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.an-tool:hover{ background:rgba(255,255,255,.1); color:#fff; }
.an-tool.is-active{ background:var(--teal-500); color:#fff; }

.an-color{
  width:24px; height:24px; border-radius:var(--radius-circle); border:2px solid rgba(255,255,255,.25);
  background:var(--c); cursor:pointer; padding:0; transition:transform .1s var(--ease-standard);
}
.an-color:hover{ transform:scale(1.12); }
.an-color.is-active{ border-color:#fff; box-shadow:0 0 0 2px var(--surface-inverse), 0 0 0 4px #fff; }

.an-width{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border:1px solid transparent; border-radius:var(--radius-md); background:transparent; cursor:pointer;
}
.an-width i{ display:block; background:#fff; border-radius:var(--radius-circle); }
.an-width:hover{ background:rgba(255,255,255,.1); }
.an-width.is-active{ background:rgba(255,255,255,.16); }

/* emoji palette */
.an-emojis{
  display:flex; flex-wrap:wrap; gap:4px; padding:8px 16px;
  background:#0d1c26; border-bottom:1px solid rgba(255,255,255,.08);
}
.an-emoji{ width:36px; height:36px; border:none; border-radius:var(--radius-md); background:rgba(255,255,255,.06); font-size:20px; cursor:pointer; }
.an-emoji:hover{ background:rgba(255,255,255,.16); }
.an-emoji.is-active{ background:var(--teal-500); }

/* crop bar */
.an-cropbar{ display:flex; gap:8px; padding:8px 16px; background:#0d1c26; border-bottom:1px solid rgba(255,255,255,.08); }
.an-cropbtn{ padding:7px 16px; border:none; border-radius:var(--radius-pill); background:var(--teal-500); color:#fff; font-weight:700; font-size:var(--text-sm); cursor:pointer; }
.an-cropbtn--ghost{ background:rgba(255,255,255,.1); }

/* stage */
.an-stage{
  position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  overflow:auto; padding:20px; background:
    linear-gradient(45deg,#0a1218 25%,transparent 25%,transparent 75%,#0a1218 75%),
    linear-gradient(45deg,#0a1218 25%,transparent 25%,transparent 75%,#0a1218 75%) #10202b;
  background-size:24px 24px; background-position:0 0,12px 12px;
}
#an-canvas{
  max-width:100%; max-height:100%; box-shadow:var(--shadow-xl); border-radius:2px;
  touch-action:none; cursor:crosshair; background:#fff;
}

/* floating text input while typing */
.an-textinput{
  position:absolute; z-index:5; margin:0; padding:2px 4px; border:1px dashed rgba(0,0,0,.4);
  background:rgba(255,255,255,.9); color:#000; font-family:var(--font-body); outline:none;
  transform:translateY(-50%);
}

@media (max-width:640px){
  .an-toolbar{ gap:6px; padding:6px 10px; }
  .an-tool{ width:34px; height:34px; }
  .an-tool svg{ width:18px; height:18px; }
  .an-save span{ display:none; }
  .an-save{ padding:9px 12px; }
}