/* ════════════════════════════════════════════════════════
   CSSMITRA TOOLKIT — WORKSPACE COMPONENTS
   The functional "tool" look — cards, buttons, forms, etc.
   Extracted verbatim from the original toolkit app so every
   tool's existing JS (which targets these class names) keeps
   working unmodified on its own standalone page.
   Load AFTER shell.css. Wrap tool markup in <div class="ws">.
═══════════════════════════════════════════════════════════ */

.ws {
  --bg: #070b12;
  --surface: #0c1018;
  --surface2: #111720;
  --card: rgba(255,255,255,0.04);
  --card-border: rgba(255,255,255,0.08);
  --text: #e8edf5;
  --muted: #5a6a88;
  --accent: #4f8cff;
  --accent2: #a855f7;
  --accent3: #22d3ee;
  --success: #10b981;
  --danger: #f43f5e;
  --warn: #f59e0b;
  --radius: 16px;

  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  position: relative;
  padding: 28px 26px 64px;
}
.ws::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(ellipse at 10% 15%, rgba(79,140,255,0.13) 0%, transparent 45%),
    radial-gradient(ellipse at 90% 85%, rgba(168,85,247,0.10) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(34,211,238,0.04) 0%, transparent 60%);
}
.ws > * { position:relative; z-index:1; }
.ws *, .ws *::before, .ws *::after { box-sizing:border-box; }

.ws .ws-header { max-width: 920px; margin: 0 auto 24px; }
.ws .panel-title { font-family:'Space Grotesk',sans-serif; font-size:1.7rem; font-weight:800; margin-bottom:6px; }
.ws .panel-desc { color:var(--muted); font-size:.92rem; line-height:1.5; }
.ws .ws-body { max-width: 920px; margin: 0 auto; }
.ws .ws-body.wide { max-width: 1180px; }

/* ─── CARDS ─── */
.ws .cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px; }
.ws .card {
  background:var(--card); border:1px solid var(--card-border);
  border-radius:var(--radius); padding:18px;
  transition:transform .22s,box-shadow .22s,border-color .22s;
  position:relative; overflow:hidden;
}
.ws .card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  opacity:0; transition:opacity .22s;
}
.ws .card:hover { transform:translateY(-3px); box-shadow:0 14px 36px rgba(0,0,0,0.3); border-color:rgba(79,140,255,0.22); }
.ws .card:hover::before { opacity:1; }
.ws .card-header { display:flex; align-items:center; gap:11px; margin-bottom:13px; }
.ws .card-icon { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.ws .card-title { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.95rem; }
.ws .card-desc { font-size:.8rem; color:var(--muted); }
.ws .fav-btn {
  margin-left:auto; background:transparent; border:none;
  color:var(--muted); font-size:17px; cursor:pointer;
  transition:color .2s,transform .2s; padding:3px;
}
.ws .fav-btn:hover, .ws .fav-btn.active { color:#f59e0b; transform:scale(1.2); }

/* ─── FORMS ─── */
.ws .field-row { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }
.ws input[type="text"], .ws input[type="number"], .ws input[type="date"], .ws input[type="file"],
.ws select, .ws textarea {
  padding:8px 11px; background:var(--surface2);
  border:1px solid var(--card-border); border-radius:9px;
  color:var(--text); font-family:'Inter',sans-serif; font-size:.86rem;
   transition:border-color .2s,box-shadow .2s;
}
.ws input:focus, .ws select:focus, .ws textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,140,255,0.1);
}
.ws textarea { resize:vertical; width:100%; }
.ws select { cursor:pointer; }
.ws input[type="file"] { padding:6px 9px; cursor:pointer; }
.ws label.field-label { font-size:.8rem; color:var(--muted); display:block; margin-bottom:4px; }

/* ─── BUTTONS ─── */
.ws .btn {
  padding:8px 16px; border-radius:9px; border:none; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:.86rem; font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
  transition:all .18s; white-space:nowrap; position:relative;
}
.ws .btn:active { transform:scale(.97); }
.ws .btn:disabled { opacity:.5; cursor:not-allowed; }
.ws .btn-primary { background:linear-gradient(135deg,#4f8cff,#6366f1); color:#fff; box-shadow:0 4px 14px rgba(79,140,255,0.3); }
.ws .btn-primary:hover { transform:translateY(-1px); box-shadow:0 7px 22px rgba(79,140,255,0.42); }
.ws .btn-secondary { background:var(--card); border:1px solid var(--card-border); color:var(--text); }
.ws .btn-secondary:hover { border-color:var(--accent); color:var(--accent); }
.ws .btn-danger { background:rgba(244,63,94,0.14); border:1px solid rgba(244,63,94,0.28); color:var(--danger); }
.ws .btn-success { background:rgba(16,185,129,0.14); border:1px solid rgba(16,185,129,0.28); color:var(--success); }
.ws .btn-purple { background:linear-gradient(135deg,#a855f7,#6366f1); color:#fff; box-shadow:0 4px 14px rgba(168,85,247,0.3); }
.ws .btn-purple:hover { transform:translateY(-1px); box-shadow:0 7px 22px rgba(168,85,247,0.42); }
.ws .btn-cyan { background:linear-gradient(135deg,#22d3ee,#0891b2); color:#fff; box-shadow:0 4px 14px rgba(34,211,238,0.25); }
.ws .btn-sm { padding:5px 11px; font-size:.78rem; }
.ws .btn-xs { padding:4px 9px; font-size:.74rem; }

/* ─── DROPZONE ─── */
.ws .dropzone {
  border:2px dashed var(--card-border); border-radius:11px;
  padding:26px 18px; text-align:center; color:var(--muted);
  font-size:.86rem; cursor:pointer; transition:all .22s;
  position:relative;
}
.ws .dropzone:hover, .ws .dropzone.drag {
  border-color:var(--accent);
  background:rgba(79,140,255,0.05); color:var(--text);
}
.ws .dropzone .dz-icon { font-size:30px; display:block; margin-bottom:7px; }

/* ─── OUTPUT ─── */
.ws .output {
  background:var(--surface2); border:1px solid var(--card-border);
  border-radius:9px; padding:11px; min-height:42px;
  font-size:.85rem; white-space:pre-wrap;
  font-family:'Courier New',monospace; color:var(--text); word-break:break-all;
}
.ws .output.success { border-color:rgba(16,185,129,0.4); background:rgba(16,185,129,0.05); }
.ws .output.error   { border-color:rgba(244,63,94,0.4);  background:rgba(244,63,94,0.05);  }

/* ─── FILE LIST ─── */
.ws .file-list { list-style:none; margin:10px 0; display:flex; flex-direction:column; gap:6px; }
.ws .file-list li {
  display:flex; align-items:center; gap:10px; padding:10px 13px;
  background:var(--surface2); border:1px solid var(--card-border);
  border-radius:10px; font-size:.83rem;
  cursor:grab; transition:all .15s; user-select:none;
  position:relative;
}
.ws .file-list li:active { cursor:grabbing; }
.ws .file-list li:hover { background:rgba(79,140,255,0.07); border-color:rgba(79,140,255,0.2); }
.ws .file-list li.dragging {
  opacity:.4; background:rgba(79,140,255,0.08);
  border:1.5px dashed rgba(79,140,255,0.4);
  transform:scale(0.98);
}
.ws .file-list li.drag-over {
  border-color:rgba(232,184,75,.6);
  background:rgba(232,184,75,.08);
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(232,184,75,.15);
}
.ws .file-list li .drag-handle {
  color:var(--muted); font-size:14px; cursor:grab; flex-shrink:0;
  opacity:.5; transition:opacity .15s; padding:0 2px;
}
.ws .file-list li:hover .drag-handle { opacity:1; }
.ws .file-list li .file-num {
  width:20px; height:20px; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid var(--card-border);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color:var(--muted); flex-shrink:0; font-weight:600;
}
.ws .file-list li span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws .file-list li .file-size { font-size:.75rem; color:var(--muted); flex-shrink:0; }
.ws .file-list li .rm-btn {
  background:transparent; border:none; color:var(--muted);
  cursor:pointer; font-size:15px; transition:color .13s; flex-shrink:0;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  border-radius:4px;
}
.ws .file-list li .rm-btn:hover { color:var(--danger); background:rgba(244,63,94,.1); }

/* ─── PROGRESS ─── */
.ws .progress-bar-wrap { background:var(--surface2); border-radius:99px; height:5px; overflow:hidden; margin:6px 0; }
.ws .progress-bar { height:100%; background:linear-gradient(90deg,#4f8cff,#a855f7); width:0; transition:width .25s; }
.ws .ocr-progress { height:7px; border-radius:99px; background:var(--surface2); overflow:hidden; border:1px solid var(--card-border); }
.ws .ocr-progress > span { display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent3),var(--success)); transition:width .25s ease; }

/* ─── CHIPS ─── */
.ws .chips { display:flex; flex-wrap:wrap; gap:7px; margin:8px 0; }
.ws .chip { padding:4px 11px; border-radius:99px; font-size:.77rem; font-weight:600; background:var(--surface2); border:1px solid var(--card-border); color:var(--muted); cursor:pointer; }
.ws .chip.blue   { background:rgba(79,140,255,0.11);  border-color:rgba(79,140,255,0.24);  color:var(--accent); }
.ws .chip.purple { background:rgba(168,85,247,0.11);  border-color:rgba(168,85,247,0.24);  color:#a855f7; }
.ws .chip.green  { background:rgba(16,185,129,0.09);  border-color:rgba(16,185,129,0.24);  color:var(--success); }
.ws .chip.cyan   { background:rgba(34,211,238,0.09);  border-color:rgba(34,211,238,0.24);  color:#22d3ee; }

/* ─── RANGE ─── */
.ws input[type="range"] { -webkit-appearance:none; width:100%; height:5px; background:var(--surface2); border-radius:99px;  border:none; }
.ws input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,#4f8cff,#6366f1); cursor:pointer; box-shadow:0 2px 8px rgba(79,140,255,0.4); }

.ws canvas { max-width:100%; border-radius:9px; border:1px solid var(--card-border); margin-top:8px; }
.ws #qrCanvas { width:200px !important; height:200px !important; border-radius:12px; }

/* ─── MARKDOWN PREVIEW ─── */
.ws .md-split { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ws .md-preview { padding:16px; background:var(--surface2); border:1px solid var(--card-border); border-radius:10px; min-height:300px; overflow-y:auto; line-height:1.7; }
.ws .md-preview h1, .ws .md-preview h2, .ws .md-preview h3 { font-family:'Space Grotesk',sans-serif; margin-bottom:8px; margin-top:16px; }
.ws .md-preview code { background:rgba(79,140,255,0.1); padding:2px 5px; border-radius:4px; font-family:monospace; font-size:.85em; }
.ws .md-preview pre { background:var(--surface); border:1px solid var(--card-border); border-radius:8px; padding:12px; overflow-x:auto; margin:10px 0; }
.ws .md-preview blockquote { border-left:3px solid var(--accent); padding-left:12px; color:var(--muted); margin:10px 0; }
.ws .md-preview a { color:var(--accent); }
.ws .md-preview ul, .ws .md-preview ol { padding-left:20px; margin:8px 0; }
.ws .md-preview hr { border:none; border-top:1px solid var(--card-border); margin:16px 0; }
.ws .md-preview table { border-collapse:collapse; width:100%; margin:10px 0; }
.ws .md-preview td, .ws .md-preview th { border:1px solid var(--card-border); padding:6px 10px; font-size:.85rem; }
.ws .md-preview th { background:var(--surface); font-weight:700; }

/* ─── DIFF CHECKER ─── */
.ws .diff-add { background:rgba(16,185,129,0.12); color:#34d399; }
.ws .diff-remove { background:rgba(244,63,94,0.12); color:#fb7185; }
.ws .diff-line { font-family:monospace; font-size:.82rem; padding:2px 8px; border-radius:3px; margin:1px 0; display:block; }

/* ─── KANBAN ─── */
.ws .kanban-board { display:flex; gap:14px; overflow-x:auto; padding-bottom:10px; }
.ws .kanban-col { min-width:220px; background:var(--surface2); border:1px solid var(--card-border); border-radius:13px; padding:14px; flex-shrink:0; }
.ws .kanban-col-title { font-weight:700; font-size:.85rem; margin-bottom:10px; display:flex; align-items:center; gap:7px; }
.ws .kanban-cards { display:flex; flex-direction:column; gap:7px; min-height:20px; }
.ws .kanban-count { font-size:11px; padding:2px 7px; border-radius:99px; background:var(--card); border:1px solid var(--card-border); color:var(--muted); }
.ws .kanban-card { background:var(--card); border:1px solid var(--card-border); border-radius:9px; padding:10px; margin-bottom:7px; font-size:.82rem; cursor:grab; transition:box-shadow .15s; }
.ws .kanban-card:hover { box-shadow:0 4px 14px rgba(0,0,0,0.25); }
.ws .kanban-add { width:100%; padding:7px; border-radius:8px; border:1px dashed var(--card-border); background:transparent; color:var(--muted); cursor:pointer; font-size:.8rem; transition:all .15s; }
.ws .kanban-add:hover { border-color:var(--accent); color:var(--accent); }

/* ─── STICKY NOTES ─── */
.ws .stickies-board { position:relative; min-height:400px; border:1px dashed var(--card-border); border-radius:13px; overflow:hidden; }
.ws .sticky-note {
  position:absolute; width:170px; min-height:130px; border-radius:10px;
  padding:12px; font-size:.82rem; cursor:move; box-shadow:0 6px 24px rgba(0,0,0,0.3);
  resize:both; overflow:auto; border:1px solid rgba(255,255,255,0.1);
}
.ws .sticky-note textarea { background:transparent; border:none;  width:100%; height:100%; min-height:80px; font-family:'Inter',sans-serif; font-size:.82rem; resize:none; color:inherit; }

/* ─── PASSWORD STRENGTH ─── */
.ws .strength-bar-wrap { height:5px; border-radius:99px; background:var(--surface2); overflow:hidden; margin:6px 0; }
.ws .strength-bar { height:100%; border-radius:99px; transition:width .4s,background .4s; }

/* ─── PRIVACY NOTE ─── */
.ws .privacy-note {
  margin-top:9px; padding:9px 11px; border-radius:10px;
  background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.22);
  color:var(--muted); font-size:.78rem; line-height:1.45;
}

/* ─── SECTION HEADING / MISC ─── */
.ws .section-heading { font-family:'Space Grotesk',sans-serif; font-size:1rem; font-weight:700; margin:18px 0 10px; }
.ws .two-col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ws .toolbar-sep { width:1px; align-self:stretch; background:var(--card-border); margin:0 2px; }
.ws ::-webkit-scrollbar { width:4px; height:4px; }
.ws ::-webkit-scrollbar-track { background:transparent; }
.ws ::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:99px; }

@media(max-width:768px) {
  .ws { padding: 18px 14px 48px; }
  .ws .cards-grid { grid-template-columns:1fr; }
  .ws .md-split { grid-template-columns:1fr; }
  .ws .kanban-board { flex-direction:column; }
  .ws .two-col { grid-template-columns:1fr; }
}

/* Accessibility: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Accessibility: visible keyboard focus (replaces outline:none) */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #c9a84c !important;
  outline-offset: 2px !important;
}

.skip-link{position:absolute;left:-9999px;top:0;background:#c9a84c;color:#06080f;
padding:10px 18px;font-weight:700;font-size:14px;z-index:99999;border-radius:0 0 8px 0;
text-decoration:none}
.skip-link:focus{left:0}