/* ═══════════════════════════════════════════════════════════════════
   url-tool.css  -  Premium URL Encoder / Decoder  (Light Theme)
   All rules scoped under #urt-root to prevent bleed into other tools.
   Font: DM Sans (headings/UI) + JetBrains Mono (code areas)
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── CSS Variables ──────────────────────────────────────────────── */
#urt-root {
  --urt-font        : 'DM Sans', system-ui, sans-serif;
  --urt-mono        : 'JetBrains Mono', 'Fira Code', monospace;

  /* Palette */
  --urt-bg          : #f4f6fb;
  --urt-surface     : #ffffff;
  --urt-surface-2   : #f8f9fd;
  --urt-border      : #e3e8f4;
  --urt-border-focus: #b5c3ef;

  --urt-text        : #14172b;
  --urt-text-2      : #525878;
  --urt-text-3      : #9ba3c4;

  /* Accent - teal-blue */
  --urt-accent      : #0d7eea;
  --urt-accent-dark : #0a64bb;
  --urt-accent-light: #e6f2fd;
  --urt-accent-mid  : #aed4f8;

  /* Semantic */
  --urt-success     : #0fa060;
  --urt-success-bg  : #e7faf2;
  --urt-error       : #e03d3d;
  --urt-error-bg    : #fdf0f0;
  --urt-warn        : #d97706;
  --urt-warn-bg     : #fffbeb;

  /* Shadows */
  --urt-shadow-sm   : 0 1px 3px rgba(20,23,43,.07), 0 1px 2px rgba(20,23,43,.04);
  --urt-shadow-md   : 0 4px 18px rgba(20,23,43,.08), 0 1px 4px rgba(20,23,43,.04);
  --urt-shadow-lg   : 0 12px 42px rgba(20,23,43,.10), 0 2px 8px rgba(20,23,43,.05);
  --urt-shadow-btn  : 0 4px 14px rgba(13,126,234,.30);

  /* Radii */
  --urt-r-xs  : 6px;
  --urt-r-sm  : 10px;
  --urt-r-md  : 14px;
  --urt-r-lg  : 20px;
  --urt-r-xl  : 26px;

  --urt-ease  : cubic-bezier(.4, 0, .2, 1);

  font-family : var(--urt-font);
  color       : var(--urt-text);
  background  : var(--urt-bg);
}

/* ── Layout ─────────────────────────────────────────────────────── */
#urt-root .urt-wrap {
  max-width : 1020px;
  margin    : 0 auto;
  padding   : 32px 16px 72px;
}

/* ── Page Header ─────────────────────────────────────────────────── */
#urt-root .urt-page-header {
  margin-bottom : 28px;
}
#urt-root .urt-page-header h1 {
  font-size     : 28px;
  font-weight   : 800;
  letter-spacing: -.5px;
  margin        : 0 0 6px;
  color         : var(--urt-text);
}
#urt-root .urt-page-header p {
  font-size  : 15px;
  color      : var(--urt-text-2);
  margin     : 0;
  line-height: 1.55;
}

/* ── Mode / Options Bar ──────────────────────────────────────────── */
#urt-root .urt-options-bar {
  display        : flex;
  align-items    : center;
  flex-wrap      : wrap;
  gap            : 10px;
  margin-bottom  : 20px;
}

/* Pill toggle group */
#urt-root .urt-pill-group {
  display        : flex;
  background     : var(--urt-surface);
  border         : 1.5px solid var(--urt-border);
  border-radius  : 100px;
  padding        : 3px;
  gap            : 2px;
  box-shadow     : var(--urt-shadow-sm);
}
#urt-root .urt-pill {
  padding        : 7px 18px;
  border-radius  : 100px;
  border         : none;
  background     : transparent;
  font-family    : var(--urt-font);
  font-size      : 13.5px;
  font-weight    : 600;
  color          : var(--urt-text-2);
  cursor         : pointer;
  transition     : all .2s var(--urt-ease);
  white-space    : nowrap;
}
#urt-root .urt-pill:hover  { color: var(--urt-accent); background: var(--urt-accent-light); }
#urt-root .urt-pill.active {
  background  : var(--urt-accent);
  color       : #fff;
  box-shadow  : var(--urt-shadow-btn);
}

/* Toggle switch */
#urt-root .urt-toggle-wrap {
  display    : flex;
  align-items: center;
  gap        : 8px;
  margin-left: auto;
}
#urt-root .urt-toggle-label {
  font-size  : 13.5px;
  font-weight: 600;
  color      : var(--urt-text-2);
  white-space: nowrap;
}
#urt-root .urt-toggle {
  position  : relative;
  width     : 40px;
  height    : 22px;
  cursor    : pointer;
}
#urt-root .urt-toggle input { opacity: 0; width: 0; height: 0; }
#urt-root .urt-toggle-slider {
  position      : absolute;
  inset         : 0;
  background    : var(--urt-border);
  border-radius : 100px;
  transition    : background .2s var(--urt-ease);
}
#urt-root .urt-toggle-slider::before {
  content       : '';
  position      : absolute;
  left          : 3px;
  top           : 3px;
  width         : 16px;
  height        : 16px;
  background    : #fff;
  border-radius : 50%;
  transition    : transform .2s var(--urt-ease);
  box-shadow    : 0 1px 4px rgba(0,0,0,.18);
}
#urt-root .urt-toggle input:checked + .urt-toggle-slider { background: var(--urt-accent); }
#urt-root .urt-toggle input:checked + .urt-toggle-slider::before { transform: translateX(18px); }

/* Live badge */
#urt-root .urt-live-badge {
  display       : inline-flex;
  align-items   : center;
  gap           : 5px;
  padding       : 3px 9px;
  background    : var(--urt-success-bg);
  color         : var(--urt-success);
  border-radius : 100px;
  font-size     : 11.5px;
  font-weight   : 700;
  letter-spacing: .4px;
  opacity       : 0;
  transition    : opacity .3s;
}
#urt-root .urt-live-badge.visible { opacity: 1; }
#urt-root .urt-live-dot {
  width : 7px; height: 7px;
  border-radius: 50%;
  background   : var(--urt-success);
  animation    : urt-pulse 1.4s infinite;
}
@keyframes urt-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.75); }
}

/* ── Main Two-Panel Card ──────────────────────────────────────────── */
#urt-root .urt-panels {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 0;
  background           : var(--urt-surface);
  border               : 1.5px solid var(--urt-border);
  border-radius        : var(--urt-r-xl);
  box-shadow           : var(--urt-shadow-lg);
  overflow             : hidden;
  margin-bottom        : 20px;
}

/* Panel */
#urt-root .urt-panel {
  display       : flex;
  flex-direction: column;
  min-height    : 380px;
}
#urt-root .urt-panel + .urt-panel {
  border-left: 1.5px solid var(--urt-border);
}

/* Panel header */
#urt-root .urt-panel-head {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 14px 18px 12px;
  background     : var(--urt-surface-2);
  border-bottom  : 1.5px solid var(--urt-border);
  gap            : 10px;
}
#urt-root .urt-panel-title {
  font-size  : 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color      : var(--urt-text-3);
  display    : flex;
  align-items: center;
  gap        : 6px;
}
#urt-root .urt-panel-title span { font-size: 15px; }
#urt-root .urt-panel-counter {
  font-size  : 12px;
  color      : var(--urt-text-3);
  font-family: var(--urt-mono);
  background : var(--urt-bg);
  padding    : 3px 9px;
  border-radius: 100px;
  border     : 1px solid var(--urt-border);
}

/* Textarea */
#urt-root .urt-textarea {
  flex       : 1;
  width      : 100%;
  padding    : 16px 18px;
  font-family: var(--urt-mono);
  font-size  : 13.5px;
  line-height: 1.7;
  color      : var(--urt-text);
  background : transparent;
  border     : none;
  outline    : none;
  resize     : none;
  min-height : 300px;
  box-sizing : border-box;
  transition : background .2s;
}
#urt-root .urt-textarea::placeholder { color: var(--urt-text-3); font-style: italic; }
#urt-root .urt-textarea:focus { background: #fafbff; }
#urt-root .urt-textarea.output-area {
  color      : var(--urt-accent);
  background : var(--urt-accent-light);
  cursor     : text;
}
#urt-root .urt-textarea.output-area:focus { background: #e0effc; }

/* Error / success state on output */
#urt-root .urt-textarea.state-error   { color: var(--urt-error);   background: var(--urt-error-bg); }
#urt-root .urt-textarea.state-success { color: var(--urt-success);  background: var(--urt-success-bg); }

/* ── Action Bar ──────────────────────────────────────────────────── */
#urt-root .urt-action-bar {
  display        : flex;
  align-items    : center;
  flex-wrap      : wrap;
  gap            : 10px;
  padding        : 16px 20px;
  background     : var(--urt-surface);
  border         : 1.5px solid var(--urt-border);
  border-radius  : var(--urt-r-lg);
  box-shadow     : var(--urt-shadow-md);
  margin-bottom  : 20px;
  position       : sticky;
  bottom         : 16px;
  z-index        : 10;
}

/* Primary action buttons */
#urt-root .urt-btn {
  display        : inline-flex;
  align-items    : center;
  gap            : 7px;
  padding        : 10px 22px;
  border-radius  : var(--urt-r-sm);
  border         : none;
  font-family    : var(--urt-font);
  font-size      : 14px;
  font-weight    : 700;
  cursor         : pointer;
  transition     : all .2s var(--urt-ease);
  white-space    : nowrap;
}
#urt-root .urt-btn-primary {
  background  : var(--urt-accent);
  color       : #fff;
  box-shadow  : var(--urt-shadow-btn);
}
#urt-root .urt-btn-primary:hover {
  background  : var(--urt-accent-dark);
  transform   : translateY(-1px);
  box-shadow  : 0 6px 20px rgba(13,126,234,.36);
}
#urt-root .urt-btn-primary:active { transform: translateY(0); }

#urt-root .urt-btn-secondary {
  background  : var(--urt-surface);
  color       : var(--urt-accent);
  border      : 1.5px solid var(--urt-accent-mid);
  box-shadow  : var(--urt-shadow-sm);
}
#urt-root .urt-btn-secondary:hover {
  background  : var(--urt-accent-light);
  border-color: var(--urt-accent);
}

#urt-root .urt-btn-ghost {
  background  : var(--urt-surface);
  color       : var(--urt-text-2);
  border      : 1.5px solid var(--urt-border);
  box-shadow  : var(--urt-shadow-sm);
}
#urt-root .urt-btn-ghost:hover { background: var(--urt-bg); border-color: var(--urt-border-focus); }

#urt-root .urt-btn-danger {
  background  : var(--urt-surface);
  color       : var(--urt-error);
  border      : 1.5px solid #f9c5c5;
  box-shadow  : var(--urt-shadow-sm);
}
#urt-root .urt-btn-danger:hover { background: var(--urt-error-bg); }

#urt-root .urt-btn.copied {
  background  : var(--urt-success);
  color       : #fff;
  border-color: var(--urt-success);
}

/* Auto-detect badge inside bar */
#urt-root .urt-auto-badge {
  display       : inline-flex;
  align-items   : center;
  gap           : 5px;
  padding       : 5px 11px;
  border-radius : 100px;
  font-size     : 12px;
  font-weight   : 700;
  background    : var(--urt-warn-bg);
  color         : var(--urt-warn);
  border        : 1px solid #fde68a;
  opacity       : 0;
  transition    : opacity .25s;
  pointer-events: none;
}
#urt-root .urt-auto-badge.visible { opacity: 1; }

/* ── Status / Error Banner ───────────────────────────────────────── */
#urt-root .urt-status {
  padding       : 11px 16px;
  border-radius : var(--urt-r-sm);
  font-size     : 13.5px;
  font-weight   : 500;
  display       : none;
  align-items   : center;
  gap           : 8px;
  margin-bottom : 16px;
  border        : 1.5px solid transparent;
}
#urt-root .urt-status.show     { display: flex; }
#urt-root .urt-status.error    { background: var(--urt-error-bg);   color: var(--urt-error);   border-color: #f9c5c5; }
#urt-root .urt-status.success  { background: var(--urt-success-bg); color: var(--urt-success); border-color: #86efac; }
#urt-root .urt-status.warn     { background: var(--urt-warn-bg);    color: var(--urt-warn);    border-color: #fde68a; }
#urt-root .urt-status-icon     { font-size: 16px; flex-shrink: 0; }

/* ── Bulk Mode Panel ─────────────────────────────────────────────── */
#urt-root .urt-bulk-card {
  background    : var(--urt-surface);
  border        : 1.5px solid var(--urt-border);
  border-radius : var(--urt-r-lg);
  box-shadow    : var(--urt-shadow-md);
  overflow      : hidden;
  margin-bottom : 20px;
  display       : none;
}
#urt-root .urt-bulk-card.visible { display: block; }

#urt-root .urt-bulk-head {
  padding       : 14px 20px;
  background    : var(--urt-surface-2);
  border-bottom : 1.5px solid var(--urt-border);
  display       : flex;
  align-items   : center;
  justify-content: space-between;
  gap           : 10px;
}
#urt-root .urt-bulk-title {
  font-size  : 14px;
  font-weight: 700;
  color      : var(--urt-text-2);
  display    : flex;
  align-items: center;
  gap        : 7px;
}
#urt-root .urt-bulk-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
#urt-root .urt-bulk-textarea {
  width      : 100%;
  min-height : 140px;
  padding    : 14px 16px;
  font-family: var(--urt-mono);
  font-size  : 13px;
  line-height: 1.7;
  color      : var(--urt-text);
  background : var(--urt-bg);
  border     : 2px solid var(--urt-border);
  border-radius: var(--urt-r-md);
  resize     : vertical;
  outline    : none;
  box-sizing : border-box;
  transition : border-color .2s;
}
#urt-root .urt-bulk-textarea:focus { border-color: var(--urt-accent); }
#urt-root .urt-bulk-result {
  background : var(--urt-accent-light);
  border     : 1.5px solid var(--urt-accent-mid);
  border-radius: var(--urt-r-md);
  padding    : 14px 16px;
  font-family: var(--urt-mono);
  font-size  : 13px;
  line-height: 1.7;
  color      : var(--urt-accent);
  min-height : 80px;
  white-space: pre-wrap;
  word-break : break-all;
}
#urt-root .urt-bulk-result:empty::before {
  content: 'Results appear here…';
  color  : var(--urt-text-3);
  font-style: italic;
}

/* ── History Panel ───────────────────────────────────────────────── */
#urt-root .urt-history-card {
  background    : var(--urt-surface);
  border        : 1.5px solid var(--urt-border);
  border-radius : var(--urt-r-lg);
  box-shadow    : var(--urt-shadow-md);
  overflow      : hidden;
  margin-bottom : 24px;
}
#urt-root .urt-history-head {
  padding        : 14px 20px;
  background     : var(--urt-surface-2);
  border-bottom  : 1.5px solid var(--urt-border);
  display        : flex;
  align-items    : center;
  justify-content: space-between;
}
#urt-root .urt-history-title {
  font-size  : 14px;
  font-weight: 700;
  color      : var(--urt-text-2);
  display    : flex;
  align-items: center;
  gap        : 7px;
}
#urt-root .urt-history-clear {
  font-size  : 12px;
  font-weight: 600;
  color      : var(--urt-error);
  background : none;
  border     : none;
  cursor     : pointer;
  padding    : 4px 8px;
  border-radius: var(--urt-r-xs);
  transition : background .15s;
  font-family: var(--urt-font);
}
#urt-root .urt-history-clear:hover { background: var(--urt-error-bg); }
#urt-root .urt-history-list {
  max-height : 260px;
  overflow-y : auto;
  padding    : 6px 0;
}
#urt-root .urt-history-item {
  display    : flex;
  align-items: flex-start;
  gap        : 12px;
  padding    : 11px 20px;
  border-bottom: 1px solid var(--urt-border);
  cursor     : pointer;
  transition : background .15s;
}
#urt-root .urt-history-item:last-child { border-bottom: none; }
#urt-root .urt-history-item:hover { background: var(--urt-accent-light); }
#urt-root .urt-history-type {
  flex-shrink: 0;
  padding    : 2px 9px;
  border-radius: 100px;
  font-size  : 11px;
  font-weight: 700;
  letter-spacing: .3px;
  background : var(--urt-accent-light);
  color      : var(--urt-accent);
}
#urt-root .urt-history-type.decode {
  background : var(--urt-success-bg);
  color      : var(--urt-success);
}
#urt-root .urt-history-text {
  flex       : 1;
  font-family: var(--urt-mono);
  font-size  : 12.5px;
  color      : var(--urt-text-2);
  white-space: nowrap;
  overflow   : hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
}
#urt-root .urt-history-text strong { color: var(--urt-text); }
#urt-root .urt-history-empty {
  padding   : 32px 20px;
  text-align: center;
  color     : var(--urt-text-3);
  font-size : 14px;
}

/* ── SEO Cards ───────────────────────────────────────────────────── */
#urt-root .urt-seo-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 18px;
  margin-bottom        : 24px;
}
#urt-root .urt-seo-card {
  background   : var(--urt-surface);
  border       : 1.5px solid var(--urt-border);
  border-radius: var(--urt-r-md);
  padding      : 22px 24px;
  box-shadow   : var(--urt-shadow-sm);
}
#urt-root .urt-seo-card h3 {
  font-size  : 15px;
  font-weight: 700;
  margin     : 0 0 9px;
  color      : var(--urt-text);
}
#urt-root .urt-seo-card p  {
  font-size  : 14px;
  color      : var(--urt-text-2);
  line-height: 1.65;
  margin     : 0;
}
#urt-root .urt-seo-card code {
  font-family  : var(--urt-mono);
  font-size    : 12.5px;
  background   : var(--urt-bg);
  border       : 1px solid var(--urt-border);
  border-radius: 4px;
  padding      : 1px 5px;
  color        : var(--urt-accent);
}

/* Example table */
#urt-root .urt-example-table {
  width          : 100%;
  border-collapse: collapse;
  font-size      : 13px;
  margin-top     : 6px;
}
#urt-root .urt-example-table th {
  padding        : 8px 12px;
  text-align     : left;
  font-size      : 11px;
  font-weight    : 700;
  letter-spacing : .5px;
  text-transform : uppercase;
  color          : var(--urt-text-3);
  background     : var(--urt-bg);
  border-bottom  : 1.5px solid var(--urt-border);
}
#urt-root .urt-example-table td {
  padding        : 9px 12px;
  border-bottom  : 1px solid var(--urt-border);
  font-family    : var(--urt-mono);
  font-size      : 12.5px;
}
#urt-root .urt-example-table tr:last-child td { border-bottom: none; }
#urt-root .urt-example-table .orig  { color: var(--urt-text); }
#urt-root .urt-example-table .enc   { color: var(--urt-accent); font-weight: 600; }

/* ── FAQ ─────────────────────────────────────────────────────────── */
#urt-root .urt-faq { margin-bottom: 32px; }
#urt-root .urt-faq-h2 {
  font-size     : 22px;
  font-weight   : 800;
  letter-spacing: -.3px;
  margin        : 0 0 18px;
}
#urt-root .urt-faq-item {
  background   : var(--urt-surface);
  border       : 1.5px solid var(--urt-border);
  border-radius: var(--urt-r-md);
  margin-bottom: 10px;
  overflow     : hidden;
  box-shadow   : var(--urt-shadow-sm);
}
#urt-root .urt-faq-q {
  padding        : 15px 20px;
  font-size      : 14.5px;
  font-weight    : 600;
  cursor         : pointer;
  background     : var(--urt-surface);
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 12px;
  user-select    : none;
  transition     : background .15s;
}
#urt-root .urt-faq-q:hover { background: var(--urt-accent-light); }
#urt-root .urt-faq-chevron  {
  font-size : 16px;
  color     : var(--urt-text-3);
  transition: transform .25s var(--urt-ease);
  flex-shrink: 0;
}
#urt-root .urt-faq-item.open .urt-faq-chevron { transform: rotate(180deg); }
#urt-root .urt-faq-a {
  max-height: 0;
  overflow  : hidden;
  transition: max-height .3s var(--urt-ease), padding .3s var(--urt-ease);
  font-size : 14px;
  color     : var(--urt-text-2);
  line-height: 1.7;
  background: var(--urt-bg);
}
#urt-root .urt-faq-item.open .urt-faq-a { max-height: 300px; padding: 15px 20px; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 700px) {
  #urt-root .urt-panels {
    grid-template-columns: 1fr;
  }
  #urt-root .urt-panel + .urt-panel {
    border-left  : none;
    border-top   : 1.5px solid var(--urt-border);
  }
  #urt-root .urt-panel { min-height: 220px; }
  #urt-root .urt-textarea { min-height: 180px; font-size: 13px; }
  #urt-root .urt-action-bar {
    position : static;
    justify-content: center;
  }
  #urt-root .urt-seo-grid { grid-template-columns: 1fr; }
  #urt-root .urt-btn { padding: 10px 16px; font-size: 13.5px; }
  #urt-root .urt-toggle-wrap { margin-left: 0; }
}