/* Screenshot Annotator & Blur Tool — tool-specific styles */
.ss-drop { cursor: pointer; }

.ss-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ss-tools { display: flex; gap: 8px; }
.ss-tool { font-family: inherit; font-weight: 600; font-size: .86rem; cursor: pointer;
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--muted); padding: 9px 14px; border-radius: 999px; transition: all .15s; }
.ss-tool:hover { color: var(--text); border-color: var(--accent); }
.ss-tool.active { background: var(--accent-grad); color: #0b0e1c; border-color: transparent; }

.ss-colors { display: flex; gap: 8px; }
.ss-color { width: 26px; height: 26px; border-radius: 50%; background: var(--sc); border: 2px solid transparent;
  cursor: pointer; padding: 0; transition: transform .12s, border-color .12s; }
.ss-color:hover { transform: scale(1.1); }
.ss-color.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg); }

.ss-right { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.ss-canvaswrap { position: relative; width: 100%; background: repeating-conic-gradient(#20264a 0% 25%, #161a30 0% 50%) 0 0/22px 22px;
  border-radius: var(--radius-sm); overflow: hidden; touch-action: none; }
.ss-canvaswrap canvas { display: block; width: 100%; height: auto; }
#ssOverlay { position: absolute; inset: 0; width: 100%; height: 100%; }

.ss-hint { color: var(--muted-2); font-size: .85rem; margin: 14px 0 0; text-align: center; }
.ss-hint kbd { background: var(--card-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 7px; font-family: inherit; font-size: .8rem; }

@media (max-width: 640px) { .ss-right { margin-left: 0; } }