/* ==========================================================
   CALCULATOR TOOLS — COMMON CSS
   File       : calculator-tools.css
   Prefix     : ct-
   Author     : ToolsHub4u.com
   Description: Shared styles for ALL calculator tools.
                Every class uses the "ct-" prefix so there
                are zero conflicts with the host page.
   ========================================================== */

/* ----------------------------------------------------------
   0. CUSTOM PROPERTIES (design tokens)
   ---------------------------------------------------------- */
.ct-tool-section {
  /* — brand colours — */
  --ct-primary       : #6366f1;
  --ct-primary-hover : #4f46e5;
  --ct-primary-light : #818cf8;
  --ct-primary-glow  : rgba(99, 102, 241, .35);
  --ct-secondary     : #ec4899;
  --ct-success       : #10b981;
  --ct-warning       : #f59e0b;
  --ct-danger        : #ef4444;
  --ct-info          : #3b82f6;

  /* — gradients — */
  --ct-grad-start    : #667eea;
  --ct-grad-end      : #764ba2;

  /* — surfaces — */
  --ct-card-bg       : rgba(255, 255, 255, .97);
  --ct-card-border   : rgba(255, 255, 255, .60);
  --ct-card-shadow   : 0 20px 60px rgba(0, 0, 0, .10);
  --ct-glass-bg      : rgba(255, 255, 255, .10);
  --ct-glass-border  : rgba(255, 255, 255, .20);

  /* — text — */
  --ct-text          : #1e293b;
  --ct-text-secondary: #64748b;
  --ct-text-muted    : #94a3b8;
  --ct-text-white    : #ffffff;

  /* — inputs — */
  --ct-input-bg      : #f8fafc;
  --ct-input-border  : #e2e8f0;
  --ct-input-focus   : var(--ct-primary);

  /* — radii — */
  --ct-r-sm : 8px;
  --ct-r-md : 12px;
  --ct-r-lg : 16px;
  --ct-r-xl : 24px;

  /* — spacing scale — */
  --ct-sp-xs : 4px;
  --ct-sp-sm : 8px;
  --ct-sp-md : 16px;
  --ct-sp-lg : 24px;
  --ct-sp-xl : 32px;
  --ct-sp-2xl: 48px;

  /* — typography — */
  --ct-font  : 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* — motion — */
  --ct-ease  : cubic-bezier(.4, 0, .2, 1);
  --ct-speed : .3s;
}

/* ----------------------------------------------------------
   1. SECTION WRAPPER
   ---------------------------------------------------------- */
.ct-tool-section {
  position      : relative;
  width         : 100%;
  padding       : var(--ct-sp-2xl) var(--ct-sp-md);
  background    : linear-gradient(135deg, var(--ct-grad-start), var(--ct-grad-end));
  font-family   : var(--ct-font);
  line-height   : 1.5;
  color         : var(--ct-text);
  overflow      : hidden;
  overflow-x    : hidden;
  box-sizing    : border-box;
}

/* reset box‑sizing inside the section */
.ct-tool-section *,
.ct-tool-section *::before,
.ct-tool-section *::after {
  box-sizing: border-box;
  margin    : 0;
  padding   : 0;
  /* mobile touch optimizations */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* decorative floating shapes */
.ct-section-bg-shapes {
  position     : absolute;
  inset        : 0;
  pointer-events: none;
  overflow     : hidden;
  z-index      : 0;
}

.ct-shape {
  position      : absolute;
  border-radius : 50%;
  background    : rgba(255, 255, 255, .06);
}

.ct-shape-1 {
  width : 500px; height: 500px;
  top   : -180px; right: -120px;
  animation: ctFloat 18s ease-in-out infinite;
}
.ct-shape-2 {
  width : 350px; height: 350px;
  bottom: -100px; left: -80px;
  animation: ctFloat 22s ease-in-out infinite reverse;
}
.ct-shape-3 {
  width : 200px; height: 200px;
  top   : 40%;   left: 50%;
  animation: ctFloat 15s ease-in-out infinite 3s;
}

@keyframes ctFloat {
  0%, 100% { transform: translate(0, 0)   scale(1);   }
  33%      { transform: translate(30px, -40px) scale(1.05); }
  66%      { transform: translate(-20px, 25px) scale(.95);  }
}

/* ----------------------------------------------------------
   2. LAYOUT — 3‑COLUMN (Ad | Tool | Ad)
   ---------------------------------------------------------- */
.ct-layout {
  position             : relative;
  z-index              : 1;
  display              : grid;
  grid-template-columns: 300px 1fr 300px;
  gap                  : var(--ct-sp-lg);
  max-width            : 1400px;
  margin               : 0 auto;
  align-items          : start;
}

/* ----------------------------------------------------------
   3. AD CONTAINERS
   ---------------------------------------------------------- */
.ct-ad {
  width   : 100%;
  position: sticky;
  top     : 20px;
}

.ct-ad-slot {
  min-height     : 250px;
  display        : flex;
  align-items    : center;
  justify-content: center;
}

.ct-ad-placeholder {
  width           : 100%;
  min-height      : 250px;
  background      : var(--ct-glass-bg);
  border          : 2px dashed var(--ct-glass-border);
  border-radius   : var(--ct-r-md);
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : rgba(255, 255, 255, .40);
  font-size       : 13px;
  font-weight     : 600;
  letter-spacing  : 1.5px;
  text-transform  : uppercase;
}

/* ----------------------------------------------------------
   4. TOOL CONTAINER
   ---------------------------------------------------------- */
.ct-tool-container {
  width    : 100%;
  max-width: 780px;
  margin   : 0 auto;
}

/* ----------------------------------------------------------
   5. CARD
   ---------------------------------------------------------- */
.ct-card {
  background            : var(--ct-card-bg);
  backdrop-filter        : blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border                : 1px solid var(--ct-card-border);
  border-radius         : var(--ct-r-xl);
  box-shadow            : var(--ct-card-shadow);
  overflow              : hidden;
  transition            : box-shadow var(--ct-speed) var(--ct-ease);
}

.ct-card:hover {
  box-shadow: 0 28px 70px rgba(0, 0, 0, .13);
}

/* — card header — */
.ct-card-header {
  padding      : var(--ct-sp-xl) var(--ct-sp-xl) var(--ct-sp-lg);
  text-align   : center;
  background   : linear-gradient(135deg,
                   rgba(99, 102, 241, .04),
                   rgba(236, 72, 153, .04));
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.ct-card-icon {
  display   : inline-block;
  font-size : 48px;
  line-height: 1;
  margin-bottom: var(--ct-sp-sm);
  animation : ctBounce 2.5s ease-in-out infinite;
}

@keyframes ctBounce {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-8px); }
}

.ct-card-title {
  font-size  : 28px;
  font-weight: 800;
  color      : var(--ct-text);
  line-height: 1.25;
}

.ct-card-subtitle {
  font-size : 15px;
  color     : var(--ct-text-secondary);
  margin-top: var(--ct-sp-xs);
}

/* — card body — */
.ct-card-body {
  padding: var(--ct-sp-xl);
}

/* — card footer (optional) — */
.ct-card-footer {
  padding     : var(--ct-sp-md) var(--ct-sp-xl);
  border-top  : 1px solid rgba(0, 0, 0, .05);
  text-align  : center;
  font-size   : 13px;
  color       : var(--ct-text-muted);
}

/* ----------------------------------------------------------
   6. FORMS
   ---------------------------------------------------------- */
.ct-form { width: 100%; }

/* grid rows */
.ct-form-row {
  display : grid;
  gap     : var(--ct-sp-lg);
  margin-bottom: var(--ct-sp-lg);
}
.ct-form-row.ct-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ct-form-row.ct-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ct-form-row.ct-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* single group */
.ct-form-group {
  display       : flex;
  flex-direction: column;
  gap           : var(--ct-sp-xs);
}

/* labels */
.ct-label {
  font-size  : 14px;
  font-weight: 600;
  color      : var(--ct-text);
  display    : flex;
  align-items: center;
  gap        : var(--ct-sp-xs);
}

.ct-required { color: var(--ct-danger); font-weight: 700; }
.ct-optional { font-size: 12px; color: var(--ct-text-muted); font-weight: 400; }

/* input wrapper (for future icons/addons) */
.ct-input-wrap {
  position: relative;
  display : flex;
}

/* text / number / date inputs */
.ct-input,
.ct-select,
.ct-textarea {
  width             : 100%;
  padding           : 12px 16px;
  font-size         : 15px;
  font-family       : var(--ct-font);
  color             : var(--ct-text);
  background        : var(--ct-input-bg);
  border            : 2px solid var(--ct-input-border);
  border-radius     : var(--ct-r-md);
  outline           : none;
  transition        : border-color var(--ct-speed) var(--ct-ease),
                      box-shadow  var(--ct-speed) var(--ct-ease),
                      background  var(--ct-speed) var(--ct-ease);
  -webkit-appearance: none;
  appearance        : none;
}

.ct-input:hover,
.ct-select:hover,
.ct-textarea:hover {
  border-color: #cbd5e1;
}

.ct-input:focus,
.ct-select:focus,
.ct-textarea:focus {
  border-color: var(--ct-input-focus);
  box-shadow  : 0 0 0 4px rgba(99, 102, 241, .12);
  background  : #fff;
}

.ct-input.ct-has-error {
  border-color: var(--ct-danger);
  box-shadow  : 0 0 0 4px rgba(239, 68, 68, .10);
}

.ct-textarea {
  resize    : vertical;
  min-height: 100px;
}

/* select arrow */
.ct-select {
  padding-right    : 40px;
  cursor           : pointer;
  background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2364748b' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat  : no-repeat;
  background-position: right 14px center;
  background-size    : 12px;
}

/* error messages */
.ct-error {
  display   : block;
  min-height: 18px;
  font-size : 12px;
  font-weight: 500;
  color     : var(--ct-danger);
  margin-top: 2px;
}

/* input addons (prefix / suffix inside input-wrap) */
.ct-input-prefix,
.ct-input-suffix {
  position       : absolute;
  top            : 50%;
  transform      : translateY(-50%);
  font-size      : 14px;
  color          : var(--ct-text-muted);
  pointer-events : none;
  font-weight    : 600;
}
.ct-input-prefix { left : 14px; }
.ct-input-suffix { right: 14px; }
.ct-input-wrap .ct-input.ct-has-prefix { padding-left : 40px; }
.ct-input-wrap .ct-input.ct-has-suffix { padding-right: 40px; }

/* ----------------------------------------------------------
   7. BUTTONS
   ---------------------------------------------------------- */
.ct-btn-group {
  display        : flex;
  gap            : var(--ct-sp-md);
  justify-content: center;
  flex-wrap      : wrap;
}

.ct-btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  gap            : var(--ct-sp-sm);
  padding        : 14px 32px;
  font-size      : 15px;
  font-weight    : 600;
  font-family    : var(--ct-font);
  line-height    : 1;
  border         : 2px solid transparent;
  border-radius  : var(--ct-r-md);
  cursor         : pointer;
  transition     : all var(--ct-speed) var(--ct-ease);
  text-decoration: none;
  -webkit-appearance: none;
  appearance     : none;
  user-select    : none;
}

.ct-btn:active { transform: scale(.97); }

.ct-btn-icon {
  font-size   : 18px;
  line-height : 1;
  display     : inline-flex;
}

/* primary */
.ct-btn-primary {
  background : linear-gradient(135deg, var(--ct-primary), var(--ct-primary-hover));
  color      : var(--ct-text-white);
  box-shadow : 0 4px 14px var(--ct-primary-glow);
}
.ct-btn-primary:hover {
  background : linear-gradient(135deg, var(--ct-primary-hover), #4338ca);
  box-shadow : 0 6px 22px var(--ct-primary-glow);
  transform  : translateY(-2px);
}

/* outline / reset */
.ct-btn-outline {
  background  : transparent;
  color       : var(--ct-text-secondary);
  border-color: var(--ct-input-border);
}
.ct-btn-outline:hover {
  background  : var(--ct-input-bg);
  border-color: #cbd5e1;
  color       : var(--ct-text);
}

/* secondary */
.ct-btn-secondary {
  background : var(--ct-input-bg);
  color      : var(--ct-text);
  border-color: var(--ct-input-border);
}
.ct-btn-secondary:hover {
  background  : #e2e8f0;
  border-color: #cbd5e1;
}

/* danger */
.ct-btn-danger {
  background : var(--ct-danger);
  color      : #fff;
}
.ct-btn-danger:hover {
  background: #dc2626;
  transform : translateY(-2px);
}

/* small variant */
.ct-btn-sm {
  padding  : 10px 20px;
  font-size: 13px;
}

/* ----------------------------------------------------------
   8. RESULTS AREA
   ---------------------------------------------------------- */
.ct-result {
  padding    : var(--ct-sp-xl);
  border-top : 1px solid rgba(0, 0, 0, .05);
  background : linear-gradient(135deg,
                rgba(99, 102, 241, .025),
                rgba(236, 72, 153, .025));
  animation  : ctFadeUp .5s var(--ct-ease);
}

@keyframes ctFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.ct-result[hidden] { display: none; }

.ct-result-heading {
  font-size  : 18px;
  font-weight: 700;
  text-align : center;
  color      : var(--ct-text);
  margin-bottom: var(--ct-sp-lg);
}

/* result cards grid */
.ct-result-grid {
  display: grid;
  gap    : var(--ct-sp-md);
}
.ct-result-grid.ct-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ct-result-grid.ct-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ct-result-grid.ct-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* individual result card */
.ct-result-card {
  text-align   : center;
  padding      : var(--ct-sp-lg) var(--ct-sp-md);
  background   : var(--ct-input-bg);
  border       : 1px solid var(--ct-input-border);
  border-radius: var(--ct-r-md);
  transition   : transform var(--ct-speed) var(--ct-ease),
                 box-shadow var(--ct-speed) var(--ct-ease);
}
.ct-result-card:hover {
  transform : translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .07);
}

/* accent card (highlighted number) */
.ct-result-card.ct-result-accent {
  background  : linear-gradient(135deg, var(--ct-primary), var(--ct-primary-hover));
  border-color: transparent;
}
.ct-result-card.ct-result-accent .ct-result-value,
.ct-result-card.ct-result-accent .ct-result-label {
  color: #fff;
}

.ct-result-value {
  display    : block;
  font-size  : 38px;
  font-weight: 800;
  line-height: 1.15;
  color      : var(--ct-primary);
}

.ct-result-label {
  display       : block;
  margin-top    : var(--ct-sp-xs);
  font-size     : 12px;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color         : var(--ct-text-secondary);
}

/* summary sentence */
.ct-result-summary {
  margin-top   : var(--ct-sp-lg);
  padding      : var(--ct-sp-md) var(--ct-sp-lg);
  background   : rgba(99, 102, 241, .06);
  border-left  : 4px solid var(--ct-primary);
  border-radius: 0 var(--ct-r-sm) var(--ct-r-sm) 0;
  font-size    : 15px;
  font-weight  : 600;
  color        : var(--ct-text);
  text-align   : center;
}
.ct-result-summary:empty { display: none; }

/* ----------------------------------------------------------
   9. DETAIL BOX (breakdown table-like)
   ---------------------------------------------------------- */
.ct-detail-box {
  margin-top   : var(--ct-sp-lg);
  padding      : var(--ct-sp-lg);
  background   : #fff;
  border       : 1px solid var(--ct-input-border);
  border-radius: var(--ct-r-md);
}

.ct-detail-title {
  font-size    : 15px;
  font-weight  : 700;
  color        : var(--ct-text);
  margin-bottom: var(--ct-sp-md);
  display      : flex;
  align-items  : center;
  gap          : var(--ct-sp-sm);
}

.ct-detail-list {
  list-style: none;
  display   : grid;
  gap       : var(--ct-sp-sm);
}

.ct-detail-item {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  padding        : var(--ct-sp-sm) var(--ct-sp-md);
  background     : var(--ct-input-bg);
  border-radius  : var(--ct-r-sm);
  font-size      : 14px;
  transition     : background var(--ct-speed) var(--ct-ease);
}
.ct-detail-item:hover { background: rgba(99, 102, 241, .05); }

.ct-detail-key {
  color      : var(--ct-text-secondary);
  font-weight: 500;
  display    : flex;
  align-items: center;
  gap        : var(--ct-sp-sm);
}

.ct-detail-val {
  color      : var(--ct-text);
  font-weight: 700;
  text-align : right;
}

/* ----------------------------------------------------------
   10. TABS (for multi-mode tools: unit converter, etc.)
   ---------------------------------------------------------- */
.ct-tabs {
  display       : flex;
  gap           : var(--ct-sp-xs);
  padding       : var(--ct-sp-xs);
  background    : var(--ct-input-bg);
  border-radius : var(--ct-r-md);
  margin-bottom : var(--ct-sp-lg);
  overflow-x    : auto;
  -webkit-overflow-scrolling: touch;
}

.ct-tab {
  flex       : 1;
  padding    : 10px 16px;
  font-size  : 13px;
  font-weight: 600;
  font-family: var(--ct-font);
  text-align : center;
  border     : none;
  background : transparent;
  color      : var(--ct-text-secondary);
  border-radius: var(--ct-r-sm);
  cursor     : pointer;
  transition : all var(--ct-speed) var(--ct-ease);
  white-space: nowrap;
}
.ct-tab:hover           { color: var(--ct-text); background: rgba(0,0,0,.04); }
.ct-tab.ct-tab-active   { color: #fff; background: var(--ct-primary); box-shadow: 0 2px 8px var(--ct-primary-glow); }

.ct-tab-panel           { display: none; }
.ct-tab-panel.ct-active { display: block; animation: ctFadeUp .3s var(--ct-ease); }

/* ----------------------------------------------------------
   11. RANGE / SLIDER
   ---------------------------------------------------------- */
.ct-range-group {
  display       : flex;
  flex-direction: column;
  gap           : var(--ct-sp-sm);
}

.ct-range-header {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
}

.ct-range-val {
  font-size  : 14px;
  font-weight: 700;
  color      : var(--ct-primary);
  background : rgba(99, 102, 241, .08);
  padding    : 4px 12px;
  border-radius: var(--ct-r-sm);
}

.ct-range {
  -webkit-appearance: none;
  appearance        : none;
  width             : 100%;
  height            : 8px;
  background        : var(--ct-input-border);
  border-radius     : 4px;
  outline           : none;
  cursor            : pointer;
}
.ct-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width      : 22px;
  height     : 22px;
  border-radius: 50%;
  background : var(--ct-primary);
  border     : 3px solid #fff;
  box-shadow : 0 2px 8px rgba(0,0,0,.18);
  cursor     : grab;
}
.ct-range::-moz-range-thumb {
  width      : 22px;
  height     : 22px;
  border-radius: 50%;
  background : var(--ct-primary);
  border     : 3px solid #fff;
  box-shadow : 0 2px 8px rgba(0,0,0,.18);
  cursor     : grab;
}

/* ----------------------------------------------------------
   12. TOGGLE SWITCH
   ---------------------------------------------------------- */
.ct-switch-wrap {
  display    : flex;
  align-items: center;
  gap        : var(--ct-sp-sm);
}

.ct-switch {
  position  : relative;
  width     : 48px;
  height    : 26px;
  display   : inline-block;
  flex-shrink: 0;
}
.ct-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.ct-switch-slider {
  position     : absolute;
  inset        : 0;
  background   : var(--ct-input-border);
  border-radius: 26px;
  cursor       : pointer;
  transition   : background var(--ct-speed) var(--ct-ease);
}
.ct-switch-slider::after {
  content      : '';
  position     : absolute;
  top          : 3px;
  left         : 3px;
  width        : 20px;
  height       : 20px;
  border-radius: 50%;
  background   : #fff;
  box-shadow   : 0 1px 4px rgba(0,0,0,.15);
  transition   : transform var(--ct-speed) var(--ct-ease);
}
.ct-switch input:checked + .ct-switch-slider {
  background: var(--ct-primary);
}
.ct-switch input:checked + .ct-switch-slider::after {
  transform: translateX(22px);
}

/* ----------------------------------------------------------
   13. ALERT / INFO BOX
   ---------------------------------------------------------- */
.ct-alert {
  padding      : var(--ct-sp-md) var(--ct-sp-lg);
  border-radius: var(--ct-r-md);
  font-size    : 14px;
  font-weight  : 500;
  margin-bottom: var(--ct-sp-md);
  display      : flex;
  align-items  : flex-start;
  gap          : var(--ct-sp-sm);
}
.ct-alert-info    { background: rgba(59,130,246,.08);  color: #1e40af; border-left: 4px solid var(--ct-info);    }
.ct-alert-success { background: rgba(16,185,129,.08);  color: #065f46; border-left: 4px solid var(--ct-success); }
.ct-alert-warning { background: rgba(245,158,11,.08);  color: #92400e; border-left: 4px solid var(--ct-warning); }
.ct-alert-danger  { background: rgba(239,68,68,.08);   color: #991b1b; border-left: 4px solid var(--ct-danger);  }

/* ----------------------------------------------------------
   14. BADGE
   ---------------------------------------------------------- */
.ct-badge {
  display       : inline-flex;
  align-items   : center;
  padding       : 4px 12px;
  font-size     : 12px;
  font-weight   : 700;
  border-radius : 20px;
  letter-spacing: .5px;
}
.ct-badge-primary { background: rgba(99,102,241,.12); color: var(--ct-primary); }
.ct-badge-success { background: rgba(16,185,129,.12); color: var(--ct-success); }
.ct-badge-warning { background: rgba(245,158,11,.12); color: var(--ct-warning); }
.ct-badge-danger  { background: rgba(239,68,68,.12);  color: var(--ct-danger);  }

/* ----------------------------------------------------------
   15. TABLE (responsive)
   ---------------------------------------------------------- */
.ct-table-wrap {
  width     : 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border    : 1px solid var(--ct-input-border);
  border-radius: var(--ct-r-md);
  margin-bottom: var(--ct-sp-md);
}

.ct-table {
  width          : 100%;
  border-collapse: collapse;
  font-size      : 14px;
}
.ct-table th,
.ct-table td {
  padding   : 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--ct-input-border);
}
.ct-table th {
  background : var(--ct-input-bg);
  font-weight: 700;
  font-size  : 13px;
  color      : var(--ct-text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ct-table tr:last-child td { border-bottom: none; }
.ct-table tr:hover td      { background: rgba(99,102,241,.03); }

/* ----------------------------------------------------------
   16. PROGRESS BAR
   ---------------------------------------------------------- */
.ct-progress {
  width        : 100%;
  height       : 10px;
  background   : var(--ct-input-border);
  border-radius: 10px;
  overflow     : hidden;
  margin       : var(--ct-sp-sm) 0;
}
.ct-progress-bar {
  height       : 100%;
  background   : linear-gradient(90deg, var(--ct-primary), var(--ct-primary-light));
  border-radius: 10px;
  transition   : width .6s var(--ct-ease);
}

/* ----------------------------------------------------------
   17. DIVIDER
   ---------------------------------------------------------- */
.ct-divider {
  border      : none;
  border-top  : 1px solid var(--ct-input-border);
  margin      : var(--ct-sp-lg) 0;
}

.ct-divider-text {
  display    : flex;
  align-items: center;
  gap        : var(--ct-sp-md);
  color      : var(--ct-text-muted);
  font-size  : 13px;
  font-weight: 600;
  margin     : var(--ct-sp-lg) 0;
}
.ct-divider-text::before,
.ct-divider-text::after {
  content   : '';
  flex      : 1;
  height    : 1px;
  background: var(--ct-input-border);
}

/* ----------------------------------------------------------
   18. UTILITY CLASSES
   ---------------------------------------------------------- */
.ct-text-center  { text-align : center !important; }
.ct-text-right   { text-align : right  !important; }
.ct-mt-sm        { margin-top : var(--ct-sp-sm) !important; }
.ct-mt-md        { margin-top : var(--ct-sp-md) !important; }
.ct-mt-lg        { margin-top : var(--ct-sp-lg) !important; }
.ct-mb-sm        { margin-bottom: var(--ct-sp-sm) !important; }
.ct-mb-md        { margin-bottom: var(--ct-sp-md) !important; }
.ct-mb-lg        { margin-bottom: var(--ct-sp-lg) !important; }
.ct-hidden       { display: none !important; }
.ct-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------
   19. LOADING SPINNER
   ---------------------------------------------------------- */
.ct-spinner {
  display       : inline-block;
  width         : 24px;
  height        : 24px;
  border        : 3px solid var(--ct-input-border);
  border-top-color: var(--ct-primary);
  border-radius : 50%;
  animation     : ctSpin .7s linear infinite;
}
@keyframes ctSpin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------
   20. RESPONSIVE BREAKPOINTS
   ---------------------------------------------------------- */

/* ≤ 1199 px  — stack to single column */
@media (max-width: 1199px) {
  .ct-layout {
    grid-template-columns: 1fr;
    max-width            : 780px;
  }

  .ct-ad {
    position: static;
  }

  .ct-ad-left  { order: -1; }
  .ct-tool-container { order: 0; }
  .ct-ad-right { order: 1;  }

  .ct-ad-slot,
  .ct-ad-placeholder {
    min-height: 100px;
  }
}

/* ≤ 992 px — hide ads on tablets and prep for mobile */
@media (max-width: 992px) {
  .ct-ad {
    display: none;
  }

  .ct-layout {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

/* ≤ 768 px — mobile tweaks */
@media (max-width: 768px) {
  .ct-tool-section {
    padding: var(--ct-sp-xl) var(--ct-sp-sm);
    min-height: auto;
  }

  /* Hide ad sidebars on tablet/mobile */
  .ct-ad {
    display: none !important;
  }

  .ct-layout {
    grid-template-columns: 1fr;
    gap: var(--ct-sp-md);
    max-width: 100%;
    margin: 0 auto;
  }

  .ct-tool-container {
    max-width: 100%;
    width: 100%;
  }

  .ct-card-header {
    padding: var(--ct-sp-lg) var(--ct-sp-md);
  }
  .ct-card-title {
    font-size: 23px;
  }
  .ct-card-icon {
    font-size: 40px;
  }

  .ct-card-body {
    padding: var(--ct-sp-lg) var(--ct-sp-md);
  }

  .ct-form-row.ct-cols-2,
  .ct-form-row.ct-cols-3,
  .ct-form-row.ct-cols-4 {
    grid-template-columns: 1fr;
  }

  /* Stack result grids on tablet */
  .ct-result-grid.ct-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ct-result-grid.ct-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ct-tabs {
    flex-wrap: wrap;
    gap: var(--ct-sp-sm);
  }

  .ct-tab {
    flex: 1;
    min-width: 70px;
    padding: 8px 10px;
    font-size: 13px;
  }

  .ct-btn-group {
    flex-direction: column;
  }
  .ct-btn { width: 100%; justify-content: center; }

  .ct-result {
    padding: var(--ct-sp-lg) var(--ct-sp-md);
  }

  .ct-result-value {
    font-size: 30px;
  }

  .ct-detail-item {
    flex-direction: column;
    align-items   : flex-start;
    gap           : 2px;
  }
  .ct-detail-val {
    text-align: left;
  }
}

/* ≤ 480 px — extra-small */
@media (max-width: 480px) {
  .ct-tool-section {
    padding: var(--ct-sp-lg) 8px;
  }

  .ct-card-header {
    padding: var(--ct-sp-md) var(--ct-sp-sm);
  }

  .ct-card-title {
    font-size: 20px;
    margin-bottom: var(--ct-sp-sm);
  }

  .ct-card-icon {
    font-size: 32px;
    margin-bottom: 4px;
  }

  .ct-card-subtitle {
    font-size: 13px;
  }

  .ct-card-body {
    padding: var(--ct-sp-md) var(--ct-sp-sm);
  }

  .ct-form-row {
    margin-bottom: var(--ct-sp-md);
    gap: var(--ct-sp-sm);
  }

  .ct-form-group {
    gap: 4px;
  }

  .ct-label {
    font-size: 13px;
  }

  .ct-input,
  .ct-select,
  .ct-textarea {
    padding: 10px 12px;
    font-size: 14px;
  }

  .ct-input-prefix {
    font-size: 13px;
  }

  .ct-range-group {
    margin-bottom: var(--ct-sp-md);
  }

  .ct-tabs {
    gap: 4px;
  }

  .ct-tab {
    padding: 7px 8px;
    font-size: 11px;
    min-width: 55px;
  }

  .ct-result-grid.ct-cols-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ct-sp-sm);
  }

  .ct-result-value {
    font-size: 24px;
  }

  .ct-result-label {
    font-size  : 10px;
    letter-spacing: .8px;
  }

  .ct-result-card {
    padding: var(--ct-sp-sm) 8px;
  }

  .ct-detail-box {
    padding: var(--ct-sp-md);
  }

  .ct-btn {
    padding: 10px 12px;
    font-size: 14px;
  }

  .ct-btn-group {
    gap: var(--ct-sp-sm);
  }

  /* Ensure touch targets are at least 44x44px on mobile */
  .ct-input,
  .ct-select,
  .ct-button,
  .ct-btn,
  .ct-tab {
    min-height: 44px;
  }
}

/* ≤ 360 px — very small phones */
@media (max-width: 360px) {
  .ct-tool-section {
    padding: var(--ct-sp-lg) 6px;
  }

  .ct-card-header {
    padding: var(--ct-sp-md) 8px;
  }

  .ct-card-body {
    padding: var(--ct-sp-md) 8px;
  }

  .ct-card-title {
    font-size: 18px;
  }

  .ct-card-icon {
    font-size: 28px;
  }

  .ct-input,
  .ct-select,
  .ct-textarea {
    padding: 9px 10px;
    font-size: 13px;
  }

  .ct-tab {
    padding: 6px 6px;
    font-size: 10px;
    min-width: 50px;
  }

  /* Stack all result grid columns */
  .ct-result-grid.ct-cols-2,
  .ct-result-grid.ct-cols-3,
  .ct-result-grid.ct-cols-4 {
    grid-template-columns: 1fr;
  }

  .ct-result-value {
    font-size: 20px;
  }

  .ct-result-label {
    font-size: 9px;
  }

  .ct-btn {
    padding: 8px 10px;
    font-size: 13px;
  }

  .ct-result {
    padding: var(--ct-sp-md) 8px;
  }

  .ct-result-summary {
    padding: var(--ct-sp-sm) var(--ct-sp-md);
    font-size: 13px;
  }
}

/* ----------------------------------------------------------
   21. PRINT (hide ads, simplify)
   ---------------------------------------------------------- */
@media print {
  .ct-tool-section {
    background: #fff !important;
    padding   : 0 !important;
  }
  .ct-ad,
  .ct-section-bg-shapes { display: none !important; }
  .ct-card {
    box-shadow: none !important;
    border    : 1px solid #ddd !important;
  }
}
/* ----------------------------------------------------------
   LIVE AGE — pulse animation for seconds card + badge
   ---------------------------------------------------------- */
.ct-age-live-pulse {
  animation: ctLivePulse 1s ease-in-out infinite;
}

@keyframes ctLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .4); }
  50%      { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

.ct-badge-success.ct-live-dot {
  position: relative;
  padding-left: 22px;
}

.ct-badge-success.ct-live-dot::before {
  content       : '';
  position      : absolute;
  left          : 8px;
  top           : 50%;
  transform     : translateY(-50%);
  width         : 8px;
  height        : 8px;
  border-radius : 50%;
  background    : #ef4444;
  animation     : ctDotBlink 1s ease-in-out infinite;
}

@keyframes ctDotBlink {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1);   }
  50%      { opacity: .4; transform: translateY(-50%) scale(.7); }
}

/* Seconds card live border glow */
.ct-age-seconds-live {
  border-color: var(--ct-success) !important;
  background  : rgba(16, 185, 129, .06) !important;
}

.ct-age-seconds-live .ct-result-value {
  color: var(--ct-success) !important;
}
/* ----------------------------------------------------------
   BMI CALCULATOR — COMPLETE TOOL-SPECIFIC STYLES (FIXED)
   ---------------------------------------------------------- */

/* Category text in result card */
.ct-bmi-cat-text {
  font-size   : 22px !important;
  font-weight : 800 !important;
  line-height : 1.3 !important;
}

/* =========================================
   BMI VISUAL GAUGE — FULL REDESIGN
   ========================================= */
.ct-bmi-gauge-wrap {
  padding      : 0;
  margin-top   : var(--ct-sp-lg);
  margin-bottom: var(--ct-sp-lg);
}

.ct-bmi-gauge {
  position     : relative;
  width        : 100%;
  padding-top  : 44px;
  margin-bottom: 0;
}

/* ---- Color Bar ---- */
.ct-bmi-gauge-bar {
  display       : flex;
  flex-direction: row;
  width         : 100%;
  height        : 22px;
  border-radius : 12px;
  overflow      : hidden;
  box-shadow    : inset 0 2px 6px rgba(0, 0, 0, .12),
                  0 2px 8px rgba(0, 0, 0, .06);
}

.ct-bmi-zone {
  height     : 100%;
  min-height : 22px;
  display    : block;
  flex-shrink: 0;
  flex-grow  : 0;
}

/* Zone widths: BMI 10–50 scale */
.ct-bmi-under  { flex-basis: 21.25%; background: linear-gradient(180deg, #93c5fd, #3b82f6); }
.ct-bmi-normal { flex-basis: 16.25%; background: linear-gradient(180deg, #6ee7b7, #10b981); }
.ct-bmi-over   { flex-basis: 12.5%;  background: linear-gradient(180deg, #fde68a, #f59e0b); }
.ct-bmi-obese1 { flex-basis: 12.5%;  background: linear-gradient(180deg, #fdba74, #f97316); }
.ct-bmi-obese2 { flex-basis: 12.5%;  background: linear-gradient(180deg, #fca5a5, #ef4444); }
.ct-bmi-obese3 { flex-basis: 25%;    background: linear-gradient(180deg, #ef4444, #b91c1c); }

/* ---- Animated Pointer ---- */
.ct-bmi-pointer {
  position       : absolute;
  top            : 0;
  left           : 0;
  transform      : translateX(-50%);
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 2px;
  transition     : left 1.2s cubic-bezier(.4, 0, .2, 1);
  z-index        : 5;
  filter         : drop-shadow(0 3px 6px rgba(0, 0, 0, .25));
}

.ct-bmi-pointer-val {
  display       : inline-block;
  padding       : 5px 14px;
  background    : var(--ct-text, #1e293b);
  color         : #fff;
  font-size     : 14px;
  font-weight   : 800;
  border-radius : 8px;
  white-space   : nowrap;
  line-height   : 1.3;
  letter-spacing: .3px;
}

.ct-bmi-pointer-arrow {
  display      : block;
  width        : 0;
  height       : 0;
  border-left  : 8px solid transparent;
  border-right : 8px solid transparent;
  border-top   : 10px solid var(--ct-text, #1e293b);
}

/* ---- Labels Below Gauge ---- */
.ct-bmi-gauge-labels {
  display        : flex;
  flex-direction : row;
  justify-content: space-between;
  align-items    : stretch;
  width          : 100%;
  margin-top     : 10px;
  gap            : 4px;
}

.ct-bmi-gauge-labels span {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  text-align     : center;
  font-size      : 11px;
  font-weight    : 600;
  line-height    : 1.35;
  padding        : 8px 4px;
  border-radius  : 8px;
  color          : #fff;
  min-height     : 48px;
  flex-shrink    : 0;
  flex-grow      : 0;
}

/* Label Colors matching zones */
.ct-bmi-gauge-labels span:nth-child(1) {
  flex-basis: 21.25%;
  background: rgba(59, 130, 246, .15);
  color     : #2563eb;
  border    : 1px solid rgba(59, 130, 246, .25);
}
.ct-bmi-gauge-labels span:nth-child(2) {
  flex-basis: 16.25%;
  background: rgba(16, 185, 129, .15);
  color     : #059669;
  border    : 1px solid rgba(16, 185, 129, .25);
}
.ct-bmi-gauge-labels span:nth-child(3) {
  flex-basis: 12.5%;
  background: rgba(245, 158, 11, .15);
  color     : #d97706;
  border    : 1px solid rgba(245, 158, 11, .25);
}
.ct-bmi-gauge-labels span:nth-child(4) {
  flex-basis: 12.5%;
  background: rgba(249, 115, 22, .15);
  color     : #ea580c;
  border    : 1px solid rgba(249, 115, 22, .25);
}
.ct-bmi-gauge-labels span:nth-child(5) {
  flex-basis: 12.5%;
  background: rgba(239, 68, 68, .15);
  color     : #dc2626;
  border    : 1px solid rgba(239, 68, 68, .25);
}
.ct-bmi-gauge-labels span:nth-child(6) {
  flex-basis: 25%;
  background: rgba(185, 28, 28, .15);
  color     : #991b1b;
  border    : 1px solid rgba(185, 28, 28, .25);
}

/* =========================================
   CATEGORY CARD COLOR VARIANTS
   ========================================= */
.ct-bmi-card-under {
  border     : 2px solid #60a5fa !important;
  background : rgba(96, 165, 250, .08) !important;
}
.ct-bmi-card-normal {
  border     : 2px solid #34d399 !important;
  background : rgba(52, 211, 153, .08) !important;
}
.ct-bmi-card-over {
  border     : 2px solid #fbbf24 !important;
  background : rgba(251, 191, 36, .08) !important;
}
.ct-bmi-card-obese1 {
  border     : 2px solid #fb923c !important;
  background : rgba(251, 146, 60, .08) !important;
}
.ct-bmi-card-obese2 {
  border     : 2px solid #f87171 !important;
  background : rgba(248, 113, 113, .08) !important;
}
.ct-bmi-card-obese3 {
  border     : 2px solid #dc2626 !important;
  background : rgba(220, 38, 38, .08) !important;
}

/* Category text colors */
.ct-bmi-card-under  .ct-bmi-cat-text { color: #2563eb !important; }
.ct-bmi-card-normal .ct-bmi-cat-text { color: #059669 !important; }
.ct-bmi-card-over   .ct-bmi-cat-text { color: #d97706 !important; }
.ct-bmi-card-obese1 .ct-bmi-cat-text { color: #ea580c !important; }
.ct-bmi-card-obese2 .ct-bmi-cat-text { color: #dc2626 !important; }
.ct-bmi-card-obese3 .ct-bmi-cat-text { color: #991b1b !important; }

/* =========================================
   RESPONSIVE — GAUGE SPECIFIC
   ========================================= */

/* Tablet */
@media (max-width: 768px) {
  .ct-bmi-gauge-labels span {
    font-size  : 9px;
    padding    : 6px 2px;
    min-height : 42px;
  }

  .ct-bmi-gauge-bar {
    height: 18px;
  }

  .ct-bmi-pointer-val {
    font-size: 12px;
    padding  : 4px 10px;
  }

  .ct-bmi-cat-text {
    font-size: 18px !important;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .ct-bmi-gauge-labels span {
    font-size  : 8px;
    padding    : 5px 2px;
    min-height : 38px;
    border-radius: 6px;
  }

  .ct-bmi-gauge-labels span br {
    display: block;
  }

  .ct-bmi-gauge-bar {
    height: 16px;
  }

  .ct-bmi-gauge {
    padding-top: 38px;
  }

  .ct-bmi-pointer-val {
    font-size: 11px;
    padding  : 3px 8px;
  }

  .ct-bmi-pointer-arrow {
    border-left-width : 6px;
    border-right-width: 6px;
    border-top-width  : 8px;
  }

  .ct-bmi-cat-text {
    font-size: 16px !important;
  }
}

/* Very small */
@media (max-width: 360px) {
  .ct-bmi-gauge-labels {
    flex-wrap  : wrap;
    gap        : 3px;
  }

  .ct-bmi-gauge-labels span {
    flex-basis : calc(33.33% - 3px) !important;
    font-size  : 9px;
    min-height : 36px;
  }
}
/* ----------------------------------------------------------
   CURRENCY CONVERTER — Tool-specific styles
   ---------------------------------------------------------- */

/* ===== LIVE STATUS BAR ===== */
.ct-cur-status {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 10px 16px;
  background     : var(--ct-input-bg);
  border         : 1px solid var(--ct-input-border);
  border-radius  : var(--ct-r-md);
  margin-bottom  : var(--ct-sp-lg);
  flex-wrap      : wrap;
  gap            : 8px;
}

.ct-cur-status-left {
  display    : flex;
  align-items: center;
  gap        : 8px;
}

.ct-cur-dot {
  width        : 10px;
  height       : 10px;
  border-radius: 50%;
  background   : var(--ct-text-muted);
  flex-shrink  : 0;
  transition   : background .3s ease;
}

.ct-cur-dot.ct-cur-dot-live {
  background: var(--ct-success);
  animation : ctCurDotPulse 2s ease-in-out infinite;
}

.ct-cur-dot.ct-cur-dot-error {
  background: var(--ct-danger);
}

.ct-cur-dot.ct-cur-dot-loading {
  background: var(--ct-warning);
  animation : ctCurDotPulse 1s ease-in-out infinite;
}

@keyframes ctCurDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); }
  50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

.ct-cur-status-text {
  font-size  : 13px;
  font-weight: 600;
  color      : var(--ct-text-secondary);
}

/* ===== CONVERTER 2-PANEL LAYOUT ===== */
.ct-cur-converter {
  display    : flex;
  align-items: flex-start;
  gap        : 12px;
  margin-bottom: var(--ct-sp-lg);
}

.ct-cur-panel {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  gap           : 8px;
  padding       : 20px;
  background    : var(--ct-input-bg);
  border        : 2px solid var(--ct-input-border);
  border-radius : var(--ct-r-lg);
  transition    : border-color .3s ease, box-shadow .3s ease;
}

.ct-cur-panel:focus-within {
  border-color: var(--ct-primary);
  box-shadow  : 0 0 0 4px rgba(99, 102, 241, .1);
}

/* Amount Input — Large & Prominent */
.ct-cur-amount-input {
  font-size   : 28px !important;
  font-weight : 800 !important;
  padding     : 12px 14px !important;
  background  : #fff !important;
  text-align  : left;
  border      : 2px solid var(--ct-input-border) !important;
}

.ct-cur-amount-input:focus {
  border-color: var(--ct-primary) !important;
}

.ct-cur-to-input {
  color: var(--ct-primary) !important;
}

/* Currency Select inside panel */
.ct-cur-select {
  font-size  : 14px;
  font-weight: 700;
  padding    : 10px 40px 10px 14px !important;
}

/* Currency Info (flag + name) */
.ct-cur-info {
  font-size  : 13px;
  font-weight: 600;
  color      : var(--ct-text-secondary);
  padding    : 0 2px;
  min-height : 20px;
  display    : flex;
  align-items: center;
  gap        : 6px;
}

/* ===== SWAP BUTTON ===== */
.ct-cur-swap-btn {
  flex-shrink    : 0;
  width          : 48px;
  height         : 48px;
  border         : 2px solid var(--ct-input-border);
  border-radius  : 50%;
  background     : #fff;
  color          : var(--ct-primary);
  font-size      : 22px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  cursor         : pointer;
  transition     : all .3s cubic-bezier(.4, 0, .2, 1);
  margin-top     : 46px;
  box-shadow     : 0 2px 8px rgba(0, 0, 0, .08);
  font-family    : var(--ct-font);
  padding        : 0;
  line-height    : 1;
}

.ct-cur-swap-btn:hover {
  background    : var(--ct-primary);
  color         : #fff;
  border-color  : var(--ct-primary);
  transform     : rotate(180deg);
  box-shadow    : 0 4px 16px var(--ct-primary-glow);
}

.ct-cur-swap-btn:active {
  transform: rotate(180deg) scale(.92);
}

.ct-cur-swap-icon {
  display: inline-block;
  transition: inherit;
}

/* ===== QUICK RATE LINE ===== */
.ct-cur-quick-rate {
  text-align : center;
  font-size  : 14px;
  font-weight: 700;
  color      : var(--ct-primary);
  background : rgba(99, 102, 241, .06);
  padding    : 8px 16px;
  border-radius: var(--ct-r-sm);
  margin-bottom: var(--ct-sp-md);
  min-height : 36px;
  display    : flex;
  align-items: center;
  justify-content: center;
  gap        : 6px;
}

.ct-cur-quick-rate:empty {
  display: none;
}

/* ===== POPULAR QUICK-SELECT PILLS ===== */
.ct-cur-popular {
  margin-bottom: var(--ct-sp-lg);
}

.ct-cur-popular-label {
  display    : block;
  font-size  : 12px;
  font-weight: 700;
  color      : var(--ct-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom : 8px;
}

.ct-cur-pills {
  display  : flex;
  flex-wrap: wrap;
  gap      : 6px;
}

.ct-cur-pill {
  display       : inline-flex;
  align-items   : center;
  gap           : 4px;
  padding       : 6px 14px;
  font-size     : 12px;
  font-weight   : 700;
  font-family   : var(--ct-font);
  color         : var(--ct-text-secondary);
  background    : var(--ct-input-bg);
  border        : 1.5px solid var(--ct-input-border);
  border-radius : 20px;
  cursor        : pointer;
  transition    : all .2s ease;
  white-space   : nowrap;
}

.ct-cur-pill:hover {
  border-color: var(--ct-primary);
  color       : var(--ct-primary);
  background  : rgba(99, 102, 241, .06);
}

.ct-cur-pill.ct-cur-pill-active {
  background  : var(--ct-primary);
  color       : #fff;
  border-color: var(--ct-primary);
}

/* ===== MAIN RESULT DISPLAY ===== */
.ct-cur-main-result {
  text-align   : center;
  padding      : var(--ct-sp-lg) var(--ct-sp-md);
  background   : linear-gradient(135deg, rgba(99,102,241,.06), rgba(236,72,153,.04));
  border-radius: var(--ct-r-lg);
  margin-bottom: var(--ct-sp-lg);
}

.ct-cur-from-display {
  font-size  : 18px;
  font-weight: 600;
  color      : var(--ct-text-secondary);
  margin-bottom: 6px;
}

.ct-cur-equals {
  font-size  : 16px;
  color      : var(--ct-text-muted);
  margin     : 4px 0;
}

.ct-cur-to-display {
  font-size  : 36px;
  font-weight: 800;
  color      : var(--ct-primary);
  line-height: 1.2;
  word-break : break-word;
}

.ct-cur-to-code {
  font-size  : 20px;
  font-weight: 700;
  color      : var(--ct-text-secondary);
  margin-left: 6px;
}

/* ===== RATE LINES ===== */
.ct-cur-rate-lines {
  display        : flex;
  justify-content: center;
  gap            : var(--ct-sp-lg);
  flex-wrap      : wrap;
  margin-bottom  : var(--ct-sp-lg);
}

.ct-cur-rate-line {
  display       : inline-flex;
  align-items   : center;
  gap           : 6px;
  padding       : 8px 18px;
  background    : var(--ct-input-bg);
  border        : 1px solid var(--ct-input-border);
  border-radius : var(--ct-r-sm);
  font-size     : 14px;
  font-weight   : 600;
  color         : var(--ct-text);
}

.ct-cur-rate-line:empty {
  display: none;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .ct-cur-converter {
    flex-direction: column;
    align-items   : stretch;
  }

  .ct-cur-swap-btn {
    margin     : 0 auto;
    transform  : rotate(90deg);
  }

  .ct-cur-swap-btn:hover {
    transform: rotate(270deg);
  }

  .ct-cur-amount-input {
    font-size: 22px !important;
  }

  .ct-cur-to-display {
    font-size: 28px;
  }

  .ct-cur-rate-lines {
    flex-direction: column;
    align-items   : center;
  }
}

@media (max-width: 480px) {
  .ct-cur-panel {
    padding: 14px;
  }

  .ct-cur-amount-input {
    font-size: 20px !important;
  }

  .ct-cur-to-display {
    font-size: 24px;
  }

  .ct-cur-status {
    flex-direction: column;
    align-items   : flex-start;
  }
}
/* ----------------------------------------------------------
   TIP CALCULATOR — Tool-specific styles
   ---------------------------------------------------------- */

/* ===== TIP PRESET BUTTONS ===== */
.ct-tip-presets {
  display  : flex;
  flex-wrap: wrap;
  gap      : 8px;
  margin-bottom: var(--ct-sp-sm);
}

.ct-tip-preset {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  padding        : 10px 18px;
  min-width      : 58px;
  font-size      : 14px;
  font-weight    : 700;
  font-family    : var(--ct-font);
  color          : var(--ct-text-secondary);
  background     : var(--ct-input-bg);
  border         : 2px solid var(--ct-input-border);
  border-radius  : var(--ct-r-md);
  cursor         : pointer;
  transition     : all .25s cubic-bezier(.4,0,.2,1);
  user-select    : none;
  white-space    : nowrap;
}

.ct-tip-preset:hover {
  border-color: var(--ct-primary-light);
  color       : var(--ct-primary);
  background  : rgba(99, 102, 241, .06);
  transform   : translateY(-2px);
  box-shadow  : 0 4px 12px rgba(99, 102, 241, .12);
}

.ct-tip-preset-active,
.ct-tip-preset-active:hover {
  background  : linear-gradient(135deg, var(--ct-primary), var(--ct-primary-hover));
  color       : #fff !important;
  border-color: var(--ct-primary) !important;
  box-shadow  : 0 4px 16px var(--ct-primary-glow);
  transform   : translateY(-2px);
}

.ct-tip-preset-custom {
  flex-grow: 1;
  min-width: 100px;
}

/* Custom tip input wrapper */
.ct-tip-custom-wrap {
  margin-top : var(--ct-sp-sm);
  max-width  : 260px;
  animation  : ctFadeUp .3s var(--ct-ease);
}

.ct-tip-custom-wrap[hidden] {
  display: none;
}

/* ===== PEOPLE STEPPER ===== */
.ct-tip-stepper {
  display       : flex;
  align-items   : center;
  gap           : 0;
  border        : 2px solid var(--ct-input-border);
  border-radius : var(--ct-r-md);
  overflow      : hidden;
  background    : var(--ct-input-bg);
  transition    : border-color .3s ease;
}

.ct-tip-stepper:focus-within {
  border-color: var(--ct-primary);
  box-shadow  : 0 0 0 4px rgba(99, 102, 241, .1);
}

.ct-tip-step-btn {
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 48px;
  height         : 48px;
  font-size      : 22px;
  font-weight    : 800;
  font-family    : var(--ct-font);
  color          : var(--ct-primary);
  background     : rgba(99, 102, 241, .06);
  border         : none;
  cursor         : pointer;
  transition     : all .2s ease;
  user-select    : none;
  padding        : 0;
  line-height    : 1;
  flex-shrink    : 0;
}

.ct-tip-step-btn:hover {
  background: rgba(99, 102, 241, .15);
  color     : var(--ct-primary-hover);
}

.ct-tip-step-btn:active {
  background: rgba(99, 102, 241, .25);
  transform : scale(.92);
}

.ct-tip-people-input {
  width       : 100% !important;
  text-align  : center !important;
  font-size   : 20px !important;
  font-weight : 800 !important;
  border      : none !important;
  border-left : 1px solid var(--ct-input-border) !important;
  border-right: 1px solid var(--ct-input-border) !important;
  border-radius: 0 !important;
  background  : #fff !important;
  padding     : 10px 8px !important;
  outline     : none !important;
  box-shadow  : none !important;
  -moz-appearance   : textfield;
}

.ct-tip-people-input::-webkit-inner-spin-button,
.ct-tip-people-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ===== TIP QUALITY RATING ===== */
.ct-tip-rating {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 10px;
  padding        : 14px 20px;
  border-radius  : var(--ct-r-md);
  margin-top     : var(--ct-sp-md);
  font-size      : 15px;
  font-weight    : 700;
  text-align     : center;
  transition     : all .3s ease;
}

.ct-tip-rating:empty {
  display: none;
}

.ct-tip-rating-low {
  background: rgba(239, 68, 68, .08);
  color     : #dc2626;
  border    : 1px solid rgba(239, 68, 68, .2);
}

.ct-tip-rating-fair {
  background: rgba(245, 158, 11, .08);
  color     : #d97706;
  border    : 1px solid rgba(245, 158, 11, .2);
}

.ct-tip-rating-good {
  background: rgba(16, 185, 129, .08);
  color     : #059669;
  border    : 1px solid rgba(16, 185, 129, .2);
}

.ct-tip-rating-great {
  background: rgba(99, 102, 241, .08);
  color     : var(--ct-primary);
  border    : 1px solid rgba(99, 102, 241, .2);
}

.ct-tip-rating-generous {
  background: linear-gradient(135deg, rgba(236,72,153,.08), rgba(99,102,241,.08));
  color     : #a855f7;
  border    : 1px solid rgba(168, 85, 247, .2);
}

/* Active row highlight in comparison table */
.ct-tip-compare-active {
  background: rgba(99, 102, 241, .08) !important;
  font-weight: 800;
}

.ct-tip-compare-active td {
  color: var(--ct-primary) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .ct-tip-presets {
    gap: 6px;
  }

  .ct-tip-preset {
    padding  : 8px 12px;
    min-width: 48px;
    font-size: 13px;
  }

  .ct-tip-step-btn {
    width    : 44px;
    height   : 44px;
    font-size: 20px;
  }

  .ct-tip-people-input {
    font-size: 18px !important;
  }
}

@media (max-width: 480px) {
  .ct-tip-presets {
    gap: 5px;
  }

  .ct-tip-preset {
    padding  : 8px 10px;
    min-width: 42px;
    font-size: 12px;
  }

  .ct-tip-preset-custom {
    min-width: 80px;
  }

  .ct-tip-step-btn {
    width    : 40px;
    height   : 40px;
    font-size: 18px;
  }

  .ct-tip-rating {
    flex-direction: column;
    gap           : 4px;
    font-size     : 14px;
  }
}
/* ----------------------------------------------------------
   AREA CALCULATOR — Tool-specific styles
   ---------------------------------------------------------- */

/* ===== SHAPE SELECTOR GRID ===== */
.ct-area-shapes {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap                  : 8px;
  margin-bottom        : var(--ct-sp-lg);
}

.ct-area-shape {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 6px;
  padding        : 14px 8px 12px;
  background     : var(--ct-input-bg);
  border         : 2px solid var(--ct-input-border);
  border-radius  : var(--ct-r-md);
  cursor         : pointer;
  transition     : all .25s cubic-bezier(.4, 0, .2, 1);
  font-family    : var(--ct-font);
  user-select    : none;
  position       : relative;
  overflow       : hidden;
}

.ct-area-shape::before {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(236,72,153,.05));
  opacity   : 0;
  transition: opacity .3s ease;
}

.ct-area-shape:hover {
  border-color: var(--ct-primary-light);
  transform   : translateY(-3px);
  box-shadow  : 0 6px 18px rgba(99, 102, 241, .12);
}

.ct-area-shape:hover::before { opacity: 1; }

.ct-area-shape-active,
.ct-area-shape-active:hover {
  border-color: var(--ct-primary) !important;
  background  : rgba(99, 102, 241, .06) !important;
  box-shadow  : 0 4px 16px var(--ct-primary-glow) !important;
  transform   : translateY(-3px) !important;
}

.ct-area-shape-active::before { opacity: 1 !important; }

.ct-area-shape-name {
  font-size   : 11px;
  font-weight : 700;
  color       : var(--ct-text-secondary);
  text-align  : center;
  line-height : 1.2;
  position    : relative;
  z-index     : 1;
}

.ct-area-shape-active .ct-area-shape-name {
  color: var(--ct-primary);
}

/* ===== CSS-DRAWN SHAPE ICONS ===== */
.ct-area-shape-icon {
  display     : block;
  flex-shrink : 0;
  position    : relative;
  z-index     : 1;
}

.ct-area-icon-rect {
  width        : 34px;
  height       : 22px;
  background   : linear-gradient(135deg, #3b82f6, #2563eb);
  border-radius: 3px;
}

.ct-area-icon-sq {
  width        : 26px;
  height       : 26px;
  background   : linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-radius: 3px;
}

.ct-area-icon-circ {
  width        : 28px;
  height       : 28px;
  background   : linear-gradient(135deg, #10b981, #059669);
  border-radius: 50%;
}

.ct-area-icon-tri {
  width     : 30px;
  height    : 26px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  clip-path : polygon(50% 0%, 0% 100%, 100% 100%);
}

.ct-area-icon-trap {
  width     : 32px;
  height    : 22px;
  background: linear-gradient(135deg, #ec4899, #db2777);
  clip-path : polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

.ct-area-icon-para {
  width     : 34px;
  height    : 22px;
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  clip-path : polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

.ct-area-icon-elli {
  width        : 34px;
  height       : 22px;
  background   : linear-gradient(135deg, #14b8a6, #0d9488);
  border-radius: 50%;
}

.ct-area-icon-rhom {
  width     : 26px;
  height    : 30px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  clip-path : polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.ct-area-icon-pent {
  width     : 28px;
  height    : 28px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  clip-path : polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.ct-area-icon-hex {
  width     : 30px;
  height    : 28px;
  background: linear-gradient(135deg, #f97316, #ea580c);
  clip-path : polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.ct-area-icon-sec {
  width        : 28px;
  height       : 28px;
  background   : conic-gradient(from 0deg, #a855f7 0deg, #7c3aed 90deg, transparent 90deg);
  border-radius: 50%;
}

/* ===== SHAPE PANELS ===== */
.ct-area-panel {
  display   : none;
  animation : ctFadeUp .3s var(--ct-ease);
}

.ct-area-panel-active {
  display: block;
}

.ct-area-panel-title {
  font-size    : 15px;
  font-weight  : 700;
  color        : var(--ct-text);
  margin-bottom: var(--ct-sp-md);
  padding-bottom: var(--ct-sp-sm);
  border-bottom: 2px solid var(--ct-input-border);
  display      : flex;
  align-items  : center;
  gap          : 6px;
}

/* Triangle sub-method panels */
.ct-area-tri-sub {
  display: none;
}

.ct-area-tri-active {
  display  : block;
  animation: ctFadeUp .25s var(--ct-ease);
}

/* ===== FORMULA DISPLAY ===== */
.ct-area-formula {
  margin-top     : var(--ct-sp-lg);
  padding        : 16px 20px;
  background     : linear-gradient(135deg, rgba(99,102,241,.06), rgba(236,72,153,.04));
  border         : 1px solid rgba(99, 102, 241, .15);
  border-radius  : var(--ct-r-md);
  text-align     : center;
}

.ct-area-formula:empty { display: none; }

.ct-area-formula-label {
  display      : block;
  font-size    : 11px;
  font-weight  : 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color        : var(--ct-text-muted);
  margin-bottom: 6px;
}

.ct-area-formula-text {
  display    : block;
  font-size  : 18px;
  font-weight: 800;
  color      : var(--ct-primary);
  font-family: 'Courier New', monospace;
  letter-spacing: .5px;
}

.ct-area-formula-sub {
  display    : block;
  font-size  : 13px;
  font-weight: 600;
  color      : var(--ct-text-secondary);
  margin-top : 4px;
}

/* ===== CONVERSION TABLE HIGHLIGHT ===== */
.ct-area-conv-current {
  background : rgba(99, 102, 241, .06) !important;
  font-weight: 800;
}

.ct-area-conv-current td {
  color: var(--ct-primary) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .ct-area-shapes {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 6px;
  }

  .ct-area-shape {
    padding: 10px 6px;
  }

  .ct-area-shape-name {
    font-size: 10px;
  }

  .ct-area-shape-icon {
    transform: scale(.85);
  }
}

@media (max-width: 480px) {
  .ct-area-shapes {
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }

  .ct-area-shape {
    padding: 10px 4px 8px;
  }

  .ct-area-shape-name {
    font-size: 9px;
  }

  .ct-area-formula-text {
    font-size: 15px;
  }
}

@media (max-width: 360px) {
  .ct-area-shapes {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ----------------------------------------------------------
   PERCENTAGE CALCULATOR — Tool-specific styles
   ---------------------------------------------------------- */

/* ===== MODE SELECTOR GRID ===== */
.ct-pct-modes {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap                  : 8px;
  margin-bottom        : var(--ct-sp-xl);
}

.ct-pct-mode {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 6px;
  padding        : 14px 6px 12px;
  background     : var(--ct-input-bg);
  border         : 2px solid var(--ct-input-border);
  border-radius  : var(--ct-r-md);
  cursor         : pointer;
  transition     : all .25s cubic-bezier(.4, 0, .2, 1);
  font-family    : var(--ct-font);
  user-select    : none;
  text-align     : center;
}

.ct-pct-mode:hover {
  border-color: var(--ct-primary-light);
  transform   : translateY(-3px);
  box-shadow  : 0 6px 18px rgba(99, 102, 241, .12);
}

.ct-pct-mode-active,
.ct-pct-mode-active:hover {
  border-color: var(--ct-primary) !important;
  background  : rgba(99, 102, 241, .06) !important;
  box-shadow  : 0 4px 16px var(--ct-primary-glow) !important;
  transform   : translateY(-3px) !important;
}

.ct-pct-mode-icon {
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 40px;
  height         : 40px;
  border-radius  : 10px;
  background     : linear-gradient(135deg, var(--ct-primary), var(--ct-primary-hover));
  color          : #fff;
  font-size      : 18px;
  font-weight    : 800;
  line-height    : 1;
  flex-shrink    : 0;
}

.ct-pct-mode-active .ct-pct-mode-icon {
  background: linear-gradient(135deg, var(--ct-secondary), #be185d);
  box-shadow: 0 4px 12px rgba(236, 72, 153, .3);
}

.ct-pct-mode-label {
  font-size  : 11px;
  font-weight: 700;
  color      : var(--ct-text-secondary);
  line-height: 1.3;
}

.ct-pct-mode-active .ct-pct-mode-label {
  color: var(--ct-primary);
}

/* ===== MODE PANELS ===== */
.ct-pct-panel {
  display: none;
}

.ct-pct-panel-active {
  display  : block;
  animation: ctFadeUp .3s var(--ct-ease);
}

.ct-pct-panel-head {
  display      : flex;
  align-items  : center;
  gap          : 14px;
  padding      : 16px 20px;
  background   : linear-gradient(135deg, rgba(99,102,241,.06), rgba(236,72,153,.03));
  border       : 1px solid rgba(99, 102, 241, .1);
  border-radius: var(--ct-r-md);
  margin-bottom: var(--ct-sp-lg);
}

.ct-pct-panel-head strong {
  display    : block;
  font-size  : 16px;
  font-weight: 800;
  color      : var(--ct-text);
}

.ct-pct-panel-head small {
  display    : block;
  font-size  : 13px;
  font-weight: 500;
  color      : var(--ct-text-secondary);
  margin-top : 2px;
}

.ct-pct-panel-icon {
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 44px;
  height         : 44px;
  border-radius  : 12px;
  background     : linear-gradient(135deg, var(--ct-primary), var(--ct-primary-hover));
  color          : #fff;
  font-size      : 20px;
  font-weight    : 800;
  flex-shrink    : 0;
  box-shadow     : 0 4px 12px var(--ct-primary-glow);
}

/* ===== SENTENCE-STYLE INPUT LAYOUT ===== */
.ct-pct-sentence {
  display        : flex;
  flex-wrap      : wrap;
  align-items    : center;
  gap            : 10px;
  padding        : 20px;
  background     : var(--ct-input-bg);
  border         : 2px solid var(--ct-input-border);
  border-radius  : var(--ct-r-lg);
  font-size      : 18px;
  font-weight    : 700;
  color          : var(--ct-text);
  line-height    : 1.5;
}

.ct-pct-inline-input {
  position: relative;
  display : inline-flex;
  align-items: center;
}

.ct-pct-inline-input .ct-input {
  width         : 110px;
  text-align    : center;
  font-size     : 20px !important;
  font-weight   : 800 !important;
  padding       : 10px 14px !important;
  border-radius : var(--ct-r-md) !important;
  background    : #fff !important;
  border        : 2px solid var(--ct-primary-light) !important;
  color         : var(--ct-primary) !important;
}

.ct-pct-inline-input .ct-input:focus {
  border-color: var(--ct-primary) !important;
  box-shadow  : 0 0 0 4px rgba(99, 102, 241, .15) !important;
}

.ct-pct-inline-wide .ct-input {
  width: 150px;
}

.ct-pct-inline-unit {
  position   : absolute;
  right      : 10px;
  top        : 50%;
  transform  : translateY(-50%);
  font-size  : 16px;
  font-weight: 800;
  color      : var(--ct-primary);
  pointer-events: none;
}

/* Fraction slash */
.ct-pct-frac-slash {
  font-size  : 32px;
  font-weight: 800;
  color      : var(--ct-primary);
  line-height: 1;
  margin     : 0 2px;
}

.ct-pct-frac-eq {
  font-size  : 20px;
  font-weight: 800;
  color      : var(--ct-text-muted);
  margin-left: 6px;
}

/* ===== MAIN ANSWER DISPLAY ===== */
.ct-pct-answer {
  text-align   : center;
  padding      : var(--ct-sp-xl) var(--ct-sp-lg);
  margin-bottom: var(--ct-sp-lg);
}

.ct-pct-answer:empty { display: none; }

.ct-pct-answer-label {
  display       : block;
  font-size     : 13px;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color         : var(--ct-text-muted);
  margin-bottom : 8px;
}

.ct-pct-answer-value {
  display    : block;
  font-size  : 48px;
  font-weight: 900;
  line-height: 1.15;
  background : linear-gradient(135deg, var(--ct-primary), var(--ct-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip        : text;
}

.ct-pct-answer-sub {
  display    : block;
  font-size  : 16px;
  font-weight: 600;
  color      : var(--ct-text-secondary);
  margin-top : 6px;
}

/* ===== VISUAL PROGRESS ===== */
.ct-pct-visual {
  margin-bottom: var(--ct-sp-lg);
  padding      : 0 4px;
}

.ct-pct-visual[hidden] { display: none; }

.ct-pct-visual-labels {
  display        : flex;
  justify-content: space-between;
  font-size      : 12px;
  font-weight    : 700;
  color          : var(--ct-text-muted);
  margin-bottom  : 6px;
}

.ct-pct-visual-labels span:nth-child(2) {
  color      : var(--ct-primary);
  font-size  : 13px;
  font-weight: 800;
}

/* ===== EQUATION DISPLAY ===== */
.ct-pct-equation {
  text-align    : center;
  padding       : 16px 20px;
  margin-top    : var(--ct-sp-md);
  background    : linear-gradient(135deg, rgba(99,102,241,.05), rgba(236,72,153,.03));
  border        : 1px solid rgba(99, 102, 241, .12);
  border-radius : var(--ct-r-md);
}

.ct-pct-equation:empty { display: none; }

.ct-pct-eq-label {
  display       : block;
  font-size     : 11px;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color         : var(--ct-text-muted);
  margin-bottom : 6px;
}

.ct-pct-eq-text {
  display       : block;
  font-size     : 20px;
  font-weight   : 800;
  color         : var(--ct-primary);
  font-family   : 'Courier New', Consolas, monospace;
  letter-spacing: .5px;
  word-break    : break-all;
}

/* Highlight row in reference table */
.ct-pct-ref-active {
  background : rgba(99, 102, 241, .08) !important;
  font-weight: 800;
}

.ct-pct-ref-active td {
  color: var(--ct-primary) !important;
}

/* ===== STEP-BY-STEP — step numbering ===== */
.ct-pct-step-num {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : 24px;
  height         : 24px;
  border-radius  : 50%;
  background     : var(--ct-primary);
  color          : #fff;
  font-size      : 12px;
  font-weight    : 800;
  flex-shrink    : 0;
  margin-right   : 4px;
}

/* Change direction indicator (up/down arrow) */
.ct-pct-dir-up {
  color: var(--ct-success) !important;
}

.ct-pct-dir-down {
  color: var(--ct-danger) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .ct-pct-modes {
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 6px;
  }

  .ct-pct-mode {
    padding: 10px 4px;
  }

  .ct-pct-mode-icon {
    width    : 34px;
    height   : 34px;
    font-size: 15px;
  }

  .ct-pct-mode-label {
    font-size: 10px;
  }

  .ct-pct-sentence {
    font-size: 15px;
    padding  : 14px;
    gap      : 8px;
  }

  .ct-pct-inline-input .ct-input {
    width    : 90px;
    font-size: 17px !important;
  }

  .ct-pct-inline-wide .ct-input {
    width: 120px;
  }

  .ct-pct-answer-value {
    font-size: 36px;
  }

  .ct-pct-panel-head {
    padding: 12px 14px;
    gap    : 10px;
  }

  .ct-pct-panel-icon {
    width    : 38px;
    height   : 38px;
    font-size: 17px;
  }
}

@media (max-width: 480px) {
  .ct-pct-modes {
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }

  .ct-pct-mode-icon {
    width    : 30px;
    height   : 30px;
    font-size: 13px;
    border-radius: 8px;
  }

  .ct-pct-mode-label {
    font-size: 9px;
  }

  .ct-pct-mode-label br {
    display: none;
  }

  .ct-pct-sentence {
    font-size: 14px;
    padding  : 12px;
    gap      : 6px;
  }

  .ct-pct-inline-input .ct-input {
    width    : 75px;
    font-size: 15px !important;
    padding  : 8px 10px !important;
  }

  .ct-pct-inline-wide .ct-input {
    width: 100px;
  }

  .ct-pct-frac-slash {
    font-size: 24px;
  }

  .ct-pct-answer-value {
    font-size: 30px;
  }

  .ct-pct-eq-text {
    font-size: 16px;
  }
}

@media (max-width: 360px) {
  .ct-pct-modes {
    grid-template-columns: repeat(3, 1fr);
  }

  .ct-pct-mode {
    padding: 8px 2px;
  }
}
/* ----------------------------------------------------------
   COMPOUND INTEREST CALCULATOR — Tool-specific styles
   ---------------------------------------------------------- */

/* ===== STACKED BAR CHART ===== */
.ct-cmp-chart-wrap {
  padding      : var(--ct-sp-lg);
  background   : var(--ct-input-bg);
  border       : 1px solid var(--ct-input-border);
  border-radius: var(--ct-r-md);
}

.ct-cmp-stacked-bar {
  display       : flex;
  width         : 100%;
  height        : 42px;
  border-radius : var(--ct-r-md);
  overflow      : hidden;
  box-shadow    : inset 0 2px 6px rgba(0, 0, 0, .08);
  margin-bottom : 12px;
}

.ct-cmp-bar-principal,
.ct-cmp-bar-contrib,
.ct-cmp-bar-interest {
  height     : 100%;
  min-width  : 0;
  transition : flex-basis 1.2s cubic-bezier(.4, 0, .2, 1);
  position   : relative;
  display    : flex;
  align-items: center;
  justify-content: center;
  font-size  : 11px;
  font-weight: 800;
  color      : #fff;
  white-space: nowrap;
  overflow   : hidden;
}

.ct-cmp-bar-principal {
  background  : linear-gradient(135deg, #6366f1, #4f46e5);
  flex-basis  : 0%;
}

.ct-cmp-bar-contrib {
  background  : linear-gradient(135deg, #3b82f6, #2563eb);
  flex-basis  : 0%;
}

.ct-cmp-bar-interest {
  background  : linear-gradient(135deg, #10b981, #059669);
  flex-basis  : 0%;
}

/* Legend */
.ct-cmp-bar-legend {
  display        : flex;
  justify-content: center;
  flex-wrap      : wrap;
  gap            : 16px;
}

.ct-cmp-legend-item {
  display    : inline-flex;
  align-items: center;
  gap        : 6px;
  font-size  : 13px;
  font-weight: 600;
  color      : var(--ct-text-secondary);
}

.ct-cmp-dot {
  width        : 12px;
  height       : 12px;
  border-radius: 3px;
  flex-shrink  : 0;
}

.ct-cmp-dot-principal { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.ct-cmp-dot-contrib   { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.ct-cmp-dot-interest  { background: linear-gradient(135deg, #10b981, #059669); }

/* ===== COMPOUND VS SIMPLE ADVANTAGE ===== */
.ct-cmp-advantage {
  margin-top    : var(--ct-sp-md);
  padding       : 12px 20px;
  border-radius : var(--ct-r-md);
  text-align    : center;
  font-size     : 15px;
  font-weight   : 700;
}

.ct-cmp-advantage:empty { display: none; }

.ct-cmp-advantage-positive {
  background: rgba(16, 185, 129, .08);
  color     : #059669;
  border    : 1px solid rgba(16, 185, 129, .2);
}

/* ===== FORMULA DISPLAY ===== */
.ct-cmp-formula {
  margin-top    : var(--ct-sp-lg);
  padding       : 20px 24px;
  background    : linear-gradient(135deg, rgba(99,102,241,.06), rgba(236,72,153,.04));
  border        : 1px solid rgba(99, 102, 241, .12);
  border-radius : var(--ct-r-md);
  text-align    : center;
}

.ct-cmp-formula:empty { display: none; }

.ct-cmp-formula-label {
  display       : block;
  font-size     : 11px;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color         : var(--ct-text-muted);
  margin-bottom : 8px;
}

.ct-cmp-formula-text {
  display       : block;
  font-size     : 18px;
  font-weight   : 800;
  color         : var(--ct-primary);
  font-family   : 'Courier New', Consolas, monospace;
  letter-spacing: .3px;
  line-height   : 1.6;
  word-break    : break-word;
}

.ct-cmp-formula-sub {
  display    : block;
  font-size  : 12px;
  font-weight: 600;
  color      : var(--ct-text-secondary);
  margin-top : 8px;
  line-height: 1.6;
}

/* ===== GROWTH BAR in table ===== */
.ct-cmp-mini-bar {
  display       : inline-block;
  height        : 8px;
  border-radius : 4px;
  background    : linear-gradient(90deg, var(--ct-primary), var(--ct-primary-light));
  vertical-align: middle;
  margin-right  : 6px;
  min-width     : 4px;
  max-width     : 100px;
  transition    : width .6s cubic-bezier(.4, 0, .2, 1);
}

/* Highlight start and end rows */
.ct-cmp-row-start {
  background: rgba(99, 102, 241, .04) !important;
}

.ct-cmp-row-end {
  background: rgba(16, 185, 129, .06) !important;
  font-weight: 700;
}

.ct-cmp-row-end td {
  color: var(--ct-success) !important;
  font-weight: 700 !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .ct-cmp-stacked-bar {
    height: 34px;
  }

  .ct-cmp-bar-legend {
    gap: 10px;
  }

  .ct-cmp-legend-item {
    font-size: 11px;
  }

  .ct-cmp-formula-text {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .ct-cmp-stacked-bar {
    height: 28px;
  }

  .ct-cmp-bar-principal,
  .ct-cmp-bar-contrib,
  .ct-cmp-bar-interest {
    font-size: 9px;
  }

  .ct-cmp-bar-legend {
    flex-direction: column;
    align-items   : flex-start;
    gap           : 6px;
  }

  .ct-cmp-formula-text {
    font-size: 12px;
  }

  .ct-cmp-advantage {
    font-size: 13px;
  }
}
/* ----------------------------------------------------------
   COMPOUND INTEREST — RESPONSIVE OVERFLOW FIX (COMPLETE)
   ---------------------------------------------------------- */

/* ===== RESULT VALUES — PREVENT OVERFLOW ===== */
.ct-tool-section[data-tool="compound"] .ct-result-value {
  font-size      : clamp(18px, 4vw, 38px);
  word-break     : break-word;
  overflow-wrap  : break-word;
  hyphens        : auto;
  line-height    : 1.2;
  max-width      : 100%;
  display        : block;
  padding        : 0 4px;
}

/* ===== RESULT CARDS — FLEX SHRINK ===== */
.ct-tool-section[data-tool="compound"] .ct-result-card {
  min-width  : 0;
  overflow   : hidden;
  word-break : break-word;
  padding    : var(--ct-sp-md) var(--ct-sp-sm);
}

/* ===== RESULT GRID — RESPONSIVE ===== */
.ct-tool-section[data-tool="compound"] .ct-result-grid.ct-cols-3 {
  gap: var(--ct-sp-sm);
}

.ct-tool-section[data-tool="compound"] .ct-result-grid.ct-cols-2 {
  gap: var(--ct-sp-sm);
}

/* ===== DETAIL LIST — VALUE WRAPPING ===== */
.ct-tool-section[data-tool="compound"] .ct-detail-item {
  flex-wrap : wrap;
  gap       : 4px;
}

.ct-tool-section[data-tool="compound"] .ct-detail-val {
  word-break    : break-word;
  overflow-wrap : break-word;
  max-width     : 100%;
  text-align    : right;
  flex-shrink   : 1;
  min-width     : 0;
}

.ct-tool-section[data-tool="compound"] .ct-detail-key {
  flex-shrink: 0;
  min-width  : 0;
  max-width  : 55%;
}

/* ===== SUMMARY — TEXT WRAP ===== */
.ct-tool-section[data-tool="compound"] .ct-result-summary {
  word-break   : break-word;
  overflow-wrap: break-word;
  hyphens      : auto;
  font-size    : 14px;
  line-height  : 1.6;
}

/* ===== FORMULA — PREVENT OVERFLOW ===== */
.ct-tool-section[data-tool="compound"] .ct-cmp-formula {
  overflow     : hidden;
  max-width    : 100%;
}

.ct-tool-section[data-tool="compound"] .ct-cmp-formula-text {
  word-break   : break-all;
  overflow-wrap: break-word;
  font-size    : clamp(12px, 2.5vw, 18px);
  line-height  : 1.8;
  max-width    : 100%;
}

.ct-tool-section[data-tool="compound"] .ct-cmp-formula-sub {
  word-break   : break-all;
  overflow-wrap: break-word;
  font-size    : clamp(10px, 2vw, 12px);
  line-height  : 1.8;
}

/* ===== ADVANTAGE BOX — WRAP ===== */
.ct-tool-section[data-tool="compound"] .ct-cmp-advantage {
  word-break   : break-word;
  overflow-wrap: break-word;
  font-size    : clamp(12px, 2.5vw, 15px);
  line-height  : 1.5;
}

/* ===== TABLE — HORIZONTAL SCROLL + COMPACT ===== */
.ct-tool-section[data-tool="compound"] .ct-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width : 100%;
}

.ct-tool-section[data-tool="compound"] .ct-table {
  min-width  : 560px;
  font-size  : 13px;
}

.ct-tool-section[data-tool="compound"] .ct-table th,
.ct-tool-section[data-tool="compound"] .ct-table td {
  padding    : 8px 10px;
  white-space: nowrap;
  font-size  : 12px;
}

.ct-tool-section[data-tool="compound"] .ct-table th {
  font-size  : 11px;
  padding    : 8px 8px;
}

/* ===== STACKED BAR — RESPONSIVE ===== */
.ct-tool-section[data-tool="compound"] .ct-cmp-stacked-bar {
  max-width : 100%;
  overflow  : hidden;
}

.ct-tool-section[data-tool="compound"] .ct-cmp-bar-principal,
.ct-tool-section[data-tool="compound"] .ct-cmp-bar-contrib,
.ct-tool-section[data-tool="compound"] .ct-cmp-bar-interest {
  overflow  : hidden;
  min-width : 0;
  font-size : clamp(8px, 1.8vw, 11px);
}

/* ===== CHART WRAP — OVERFLOW ===== */
.ct-tool-section[data-tool="compound"] .ct-cmp-chart-wrap {
  overflow  : hidden;
  max-width : 100%;
}

/* ===== LEGEND — RESPONSIVE ===== */
.ct-tool-section[data-tool="compound"] .ct-cmp-bar-legend {
  flex-wrap : wrap;
  gap       : 8px;
}

.ct-tool-section[data-tool="compound"] .ct-cmp-legend-item {
  font-size : clamp(10px, 2vw, 13px);
  min-width : 0;
  word-break: break-word;
}

/* ===== MINI BAR IN TABLE ===== */
.ct-tool-section[data-tool="compound"] .ct-cmp-mini-bar {
  max-width : 60px;
}

/* =============================================================
   BREAKPOINT: ≤ 1199px (Tablet Landscape)
   ============================================================= */
@media (max-width: 1199px) {
  .ct-tool-section[data-tool="compound"] .ct-result-value {
    font-size: clamp(16px, 3.5vw, 28px);
  }
}

/* =============================================================
   BREAKPOINT: ≤ 768px (Tablet / Small Screens)
   ============================================================= */
@media (max-width: 768px) {
  /* Cards → 1 column for 3-col grids */
  .ct-tool-section[data-tool="compound"] .ct-result-grid.ct-cols-3 {
    grid-template-columns: 1fr;
    gap: var(--ct-sp-sm);
  }

  .ct-tool-section[data-tool="compound"] .ct-result-grid.ct-cols-2 {
    grid-template-columns: 1fr;
    gap: var(--ct-sp-sm);
  }

  /* Result values — bigger on single column */
  .ct-tool-section[data-tool="compound"] .ct-result-value {
    font-size  : 22px;
    text-align : center;
  }

  .ct-tool-section[data-tool="compound"] .ct-result-card {
    padding   : var(--ct-sp-md);
    text-align: center;
  }

  .ct-tool-section[data-tool="compound"] .ct-result-label {
    font-size: 11px;
  }

  /* Detail items → stack vertically */
  .ct-tool-section[data-tool="compound"] .ct-detail-item {
    flex-direction: column;
    align-items   : flex-start;
    gap           : 2px;
    padding       : var(--ct-sp-sm) var(--ct-sp-md);
  }

  .ct-tool-section[data-tool="compound"] .ct-detail-key {
    max-width  : 100%;
    font-size  : 13px;
  }

  .ct-tool-section[data-tool="compound"] .ct-detail-val {
    text-align : left;
    font-size  : 14px;
    max-width  : 100%;
    padding-left: 28px;
  }

  /* Summary */
  .ct-tool-section[data-tool="compound"] .ct-result-summary {
    font-size  : 13px;
    padding    : var(--ct-sp-sm) var(--ct-sp-md);
  }

  /* Formula */
  .ct-tool-section[data-tool="compound"] .ct-cmp-formula {
    padding: 14px 12px;
  }

  .ct-tool-section[data-tool="compound"] .ct-cmp-formula-text {
    font-size  : 13px;
  }

  .ct-tool-section[data-tool="compound"] .ct-cmp-formula-sub {
    font-size  : 11px;
  }

  /* Table */
  .ct-tool-section[data-tool="compound"] .ct-table {
    min-width: 500px;
  }

  .ct-tool-section[data-tool="compound"] .ct-table th,
  .ct-tool-section[data-tool="compound"] .ct-table td {
    padding  : 6px 6px;
    font-size: 11px;
  }

  /* Stacked bar */
  .ct-tool-section[data-tool="compound"] .ct-cmp-stacked-bar {
    height: 32px;
  }

  /* Legend → column */
  .ct-tool-section[data-tool="compound"] .ct-cmp-bar-legend {
    flex-direction: column;
    align-items   : flex-start;
    gap           : 4px;
  }

  /* Advantage box */
  .ct-tool-section[data-tool="compound"] .ct-cmp-advantage {
    font-size: 13px;
    padding  : 10px 14px;
  }

  /* Mini bar */
  .ct-tool-section[data-tool="compound"] .ct-cmp-mini-bar {
    max-width: 40px;
  }

  /* Chart wrap */
  .ct-tool-section[data-tool="compound"] .ct-cmp-chart-wrap {
    padding: var(--ct-sp-md);
  }

  /* Compare section */
  .ct-tool-section[data-tool="compound"] .ct-cmp-compare .ct-result-grid.ct-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* =============================================================
   BREAKPOINT: ≤ 480px (Small Mobile)
   ============================================================= */
@media (max-width: 480px) {
  /* Result value even smaller */
  .ct-tool-section[data-tool="compound"] .ct-result-value {
    font-size  : 18px;
    letter-spacing: -0.5px;
  }

  .ct-tool-section[data-tool="compound"] .ct-result-card {
    padding: 12px 10px;
  }

  .ct-tool-section[data-tool="compound"] .ct-result-label {
    font-size     : 10px;
    letter-spacing: .5px;
  }

  /* Detail list — more compact */
  .ct-tool-section[data-tool="compound"] .ct-detail-item {
    padding: 6px var(--ct-sp-sm);
  }

  .ct-tool-section[data-tool="compound"] .ct-detail-key {
    font-size: 12px;
  }

  .ct-tool-section[data-tool="compound"] .ct-detail-val {
    font-size   : 13px;
    padding-left: 24px;
  }

  /* Formula */
  .ct-tool-section[data-tool="compound"] .ct-cmp-formula {
    padding: 10px 8px;
  }

  .ct-tool-section[data-tool="compound"] .ct-cmp-formula-text {
    font-size: 11px;
  }

  .ct-tool-section[data-tool="compound"] .ct-cmp-formula-sub {
    font-size: 10px;
  }

  /* Summary */
  .ct-tool-section[data-tool="compound"] .ct-result-summary {
    font-size: 12px;
    padding  : 8px 10px;
  }

  /* Stacked bar */
  .ct-tool-section[data-tool="compound"] .ct-cmp-stacked-bar {
    height: 24px;
  }

  .ct-tool-section[data-tool="compound"] .ct-cmp-bar-principal,
  .ct-tool-section[data-tool="compound"] .ct-cmp-bar-contrib,
  .ct-tool-section[data-tool="compound"] .ct-cmp-bar-interest {
    font-size: 8px;
  }

  /* Legend */
  .ct-tool-section[data-tool="compound"] .ct-cmp-legend-item {
    font-size: 10px;
  }

  .ct-tool-section[data-tool="compound"] .ct-cmp-dot {
    width : 10px;
    height: 10px;
  }

  /* Table */
  .ct-tool-section[data-tool="compound"] .ct-table {
    min-width: 450px;
  }

  .ct-tool-section[data-tool="compound"] .ct-table th,
  .ct-tool-section[data-tool="compound"] .ct-table td {
    padding  : 5px 4px;
    font-size: 10px;
  }

  /* Advantage */
  .ct-tool-section[data-tool="compound"] .ct-cmp-advantage {
    font-size: 11px;
    padding  : 8px 10px;
  }

  /* Mini bar hidden on very small */
  .ct-tool-section[data-tool="compound"] .ct-cmp-mini-bar {
    max-width: 30px;
  }

  /* Chart wrap */
  .ct-tool-section[data-tool="compound"] .ct-cmp-chart-wrap {
    padding: 10px;
  }

  /* Detail box */
  .ct-tool-section[data-tool="compound"] .ct-detail-box {
    padding: var(--ct-sp-sm);
  }

  .ct-tool-section[data-tool="compound"] .ct-detail-title {
    font-size: 13px;
  }

  /* Result heading */
  .ct-tool-section[data-tool="compound"] .ct-result-heading {
    font-size: 16px;
  }

  /* Divider text */
  .ct-tool-section[data-tool="compound"] .ct-divider-text {
    font-size: 11px;
  }
}

/* =============================================================
   BREAKPOINT: ≤ 360px (Very Small)
   ============================================================= */
@media (max-width: 360px) {
  .ct-tool-section[data-tool="compound"] .ct-result-value {
    font-size: 15px;
  }

  .ct-tool-section[data-tool="compound"] .ct-result-card {
    padding: 10px 8px;
  }

  .ct-tool-section[data-tool="compound"] .ct-result-label {
    font-size: 9px;
  }

  .ct-tool-section[data-tool="compound"] .ct-detail-key {
    font-size: 11px;
  }

  .ct-tool-section[data-tool="compound"] .ct-detail-val {
    font-size: 12px;
  }

  .ct-tool-section[data-tool="compound"] .ct-cmp-formula-text {
    font-size: 10px;
  }

  .ct-tool-section[data-tool="compound"] .ct-table {
    min-width: 400px;
  }

  .ct-tool-section[data-tool="compound"] .ct-table th,
  .ct-tool-section[data-tool="compound"] .ct-table td {
    font-size: 9px;
    padding  : 4px 3px;
  }
}
/* ----------------------------------------------------------
   CALCULATOR (BASIC + SCIENTIFIC) — Tool-specific styles
   Phone-native dark theme
   ---------------------------------------------------------- */

/* ===== CALCULATOR CONTAINER ===== */
.ct-calc {
  background   : #000;
  border-radius: 0 0 var(--ct-r-xl) var(--ct-r-xl);
  overflow     : hidden;
  user-select  : none;
  -webkit-user-select: none;
  max-width    : 100%;
}

/* ===== MODE TOGGLE ===== */
.ct-calc-toggle {
  display        : flex;
  padding        : 10px 16px 6px;
  gap            : 4px;
  background     : #000;
}

.ct-calc-toggle-btn {
  flex           : 1;
  padding        : 8px 0;
  font-size      : 13px;
  font-weight    : 700;
  font-family    : var(--ct-font);
  text-align     : center;
  color          : #8e8e93;
  background     : transparent;
  border         : none;
  border-radius  : 8px;
  cursor         : pointer;
  transition     : all .25s ease;
  letter-spacing : .3px;
}

.ct-calc-toggle-btn:hover {
  color: #fff;
}

.ct-calc-toggle-active {
  color      : #fff !important;
  background : #2c2c2e !important;
}

/* ===== DISPLAY ===== */
.ct-calc-display {
  position   : relative;
  padding    : 16px 24px 20px;
  min-height : 120px;
  display    : flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  background : #000;
  overflow   : hidden;
}

.ct-calc-history {
  font-size   : 16px;
  font-weight : 500;
  color       : #636366;
  text-align  : right;
  min-height  : 24px;
  max-width   : 100%;
  overflow    : hidden;
  text-overflow: ellipsis;
  white-space : nowrap;
  word-break  : break-all;
  direction   : rtl;
}

.ct-calc-expr {
  font-size   : 52px;
  font-weight : 300;
  color       : #fff;
  text-align  : right;
  line-height : 1.15;
  max-width   : 100%;
  overflow-x  : auto;
  overflow-y  : hidden;
  white-space : nowrap;
  word-break  : break-all;
  transition  : font-size .15s ease;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ct-calc-expr::-webkit-scrollbar {
  display: none;
}

/* Memory badge */
.ct-calc-mem-badge {
  position     : absolute;
  top          : 14px;
  left         : 20px;
  font-size    : 11px;
  font-weight  : 800;
  color        : #fff;
  background   : rgba(255, 149, 0, .3);
  padding      : 2px 8px;
  border-radius: 4px;
  letter-spacing: 1px;
}

.ct-calc-mem-badge[hidden] { display: none; }

/* ===== BUTTON ROWS ===== */
.ct-calc-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap    : 1px;
  padding: 0 1px;
}

.ct-calc-row-mem {
  /* memory buttons slightly smaller */
}

/* ===== BUTTONS BASE ===== */
.ct-calc-btn {
  display        : flex;
  align-items    : center;
  justify-content: center;
  height         : 62px;
  font-size      : 22px;
  font-weight    : 500;
  font-family    : var(--ct-font);
  border         : none;
  cursor         : pointer;
  transition     : background .12s ease, transform .1s ease, filter .1s ease;
  -webkit-tap-highlight-color: transparent;
  outline        : none;
  position       : relative;
  overflow       : hidden;
  padding        : 0;
  line-height    : 1;
  border-radius  : 0;
}

.ct-calc-btn::after {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: rgba(255,255,255,0);
  transition: background .15s ease;
  pointer-events: none;
}

.ct-calc-btn:active {
  transform: scale(.94);
}

.ct-calc-btn:active::after {
  background: rgba(255,255,255,.15);
}

/* ===== NUMBER BUTTONS ===== */
.ct-calc-num {
  background : #333333;
  color      : #fff;
  font-size  : 26px;
  font-weight: 400;
}

.ct-calc-num:hover {
  background: #3d3d3d;
}

/* ===== ZERO BUTTON (span 2) ===== */
.ct-calc-zero {
  grid-column    : span 2;
  justify-content: flex-start;
  padding-left   : 28px;
  border-radius  : 0;
}

/* ===== OPERATOR BUTTONS ===== */
.ct-calc-op {
  background : #ff9500;
  color      : #fff;
  font-size  : 30px;
  font-weight: 500;
}

.ct-calc-op:hover {
  background: #ffaa33;
}

.ct-calc-op.ct-calc-op-active {
  background: #fff;
  color     : #ff9500;
}

/* ===== EQUALS BUTTON ===== */
.ct-calc-eq {
  background : #ff9500;
  color      : #fff;
  font-size  : 30px;
  font-weight: 500;
}

.ct-calc-eq:hover {
  background: #ffaa33;
}

/* ===== TOP ROW BUTTONS (AC, DEL, %) ===== */
.ct-calc-top {
  background : #a5a5a5;
  color      : #000;
  font-size  : 20px;
  font-weight: 600;
}

.ct-calc-top:hover {
  background: #b8b8b8;
}

/* ===== FUNCTION BUTTONS (Scientific) ===== */
.ct-calc-fn {
  background    : #2c2c2e;
  color         : #fff;
  font-size     : 16px;
  font-weight   : 500;
  letter-spacing: .2px;
}

.ct-calc-fn:hover {
  background: #3a3a3c;
}

/* 2nd button active state */
.ct-calc-2nd-btn.ct-calc-2nd-active {
  background: #636366;
  color     : #000;
  font-weight: 700;
}

/* DEG/RAD button */
.ct-calc-deg-btn {
  font-size  : 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
}

/* ===== MEMORY BUTTONS ===== */
.ct-calc-mem {
  background : #1c1c1e;
  color      : #8e8e93;
  font-size  : 14px;
  font-weight: 700;
  height     : 40px;
}

.ct-calc-mem:hover {
  color: #fff;
}

/* ===== SCIENTIFIC PANEL ===== */
.ct-calc-sci {
  border-top: 1px solid #1c1c1e;
}

.ct-calc-sci[hidden] { display: none; }

/* ===== FIRST/LAST ROW ROUNDING ===== */
.ct-calc-main .ct-calc-row:last-child .ct-calc-zero {
  border-bottom-left-radius: var(--ct-r-xl);
}

.ct-calc-main .ct-calc-row:last-child .ct-calc-eq {
  border-bottom-right-radius: var(--ct-r-xl);
}

/* ===== BUTTON RIPPLE EFFECT ===== */
@keyframes ctCalcRipple {
  0%   { transform: scale(0); opacity: .5; }
  100% { transform: scale(4); opacity: 0; }
}

.ct-calc-btn .ct-calc-ripple {
  position      : absolute;
  width         : 50px;
  height        : 50px;
  border-radius : 50%;
  background    : rgba(255,255,255,.3);
  transform     : scale(0);
  animation     : ctCalcRipple .5s ease-out;
  pointer-events: none;
}

/* ===== 2ND SWAP BUTTON LABEL CHANGE ===== */
.ct-calc-2nd-swap {
  position: relative;
}

.ct-calc-2nd-swap .ct-calc-2nd-label {
  position  : absolute;
  top       : 4px;
  left      : 50%;
  transform : translateX(-50%);
  font-size : 9px;
  color     : #ff9500;
  font-weight: 700;
  opacity   : 0;
  transition: opacity .2s ease;
}

.ct-calc-2nd-on .ct-calc-2nd-swap .ct-calc-2nd-label {
  opacity: 1;
}

/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width: 768px) {
  .ct-calc-btn {
    height   : 58px;
    font-size: 20px;
  }

  .ct-calc-num {
    font-size: 24px;
  }

  .ct-calc-op,
  .ct-calc-eq {
    font-size: 28px;
  }

  .ct-calc-fn {
    font-size: 14px;
  }

  .ct-calc-display {
    padding   : 14px 18px 16px;
    min-height: 100px;
  }

  .ct-calc-expr {
    font-size: 44px;
  }

  .ct-calc-history {
    font-size: 14px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .ct-calc-btn {
    height   : 54px;
    font-size: 18px;
  }

  .ct-calc-num {
    font-size: 22px;
  }

  .ct-calc-op,
  .ct-calc-eq {
    font-size: 26px;
  }

  .ct-calc-fn {
    font-size: 13px;
    height   : 48px;
  }

  .ct-calc-mem {
    font-size: 12px;
    height   : 36px;
  }

  .ct-calc-top {
    font-size: 18px;
  }

  .ct-calc-display {
    padding   : 12px 14px 14px;
    min-height: 90px;
  }

  .ct-calc-expr {
    font-size: 38px;
  }

  .ct-calc-history {
    font-size: 13px;
  }

  .ct-calc-zero {
    padding-left: 22px;
  }

  .ct-calc-toggle {
    padding: 8px 10px 4px;
  }

  .ct-calc-toggle-btn {
    font-size: 12px;
    padding  : 6px 0;
  }

  .ct-calc-deg-btn {
    font-size: 12px !important;
  }
}

/* Very small */
@media (max-width: 360px) {
  .ct-calc-btn {
    height   : 48px;
    font-size: 16px;
  }

  .ct-calc-num {
    font-size: 20px;
  }

  .ct-calc-op,
  .ct-calc-eq {
    font-size: 22px;
  }

  .ct-calc-fn {
    font-size: 12px;
    height   : 42px;
  }

  .ct-calc-mem {
    font-size: 11px;
    height   : 32px;
  }

  .ct-calc-expr {
    font-size: 32px;
  }

  .ct-calc-display {
    min-height: 80px;
    padding   : 10px 12px;
  }
}

/* Desktop — cap calculator width for aesthetics */
@media (min-width: 769px) {
  .ct-calc {
    max-width    : 420px;
    margin       : 0 auto;
    border-radius: var(--ct-r-xl);
  }

  .ct-calc-main .ct-calc-row:last-child .ct-calc-zero {
    border-bottom-left-radius: var(--ct-r-xl);
  }

  .ct-calc-main .ct-calc-row:last-child .ct-calc-eq {
    border-bottom-right-radius: var(--ct-r-xl);
  }

  .ct-calc-btn {
    height   : 64px;
    border-radius: 0;
  }

  /* Add slight rounding on desktop for premium feel */
  .ct-calc-row {
    gap: 2px;
    padding: 0 2px;
  }

  .ct-calc-btn {
    border-radius: 4px;
    margin: 1px 0;
  }
}
/* ----------------------------------------------------------
   BINARY DECIMAL CONVERTER — PREMIUM STYLES
   FULLY RESPONSIVE — verified at all breakpoints
   ---------------------------------------------------------- */

/* ===== MODE SELECTOR ===== */
.ct-bin-modes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: var(--ct-sp-xl);
}

.ct-bin-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px 12px;
  background: var(--ct-input-bg);
  border: 2px solid var(--ct-input-border);
  border-radius: var(--ct-r-lg);
  cursor: pointer;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  font-family: var(--ct-font);
  user-select: none;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ct-bin-mode::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,.07), rgba(16,185,129,.05));
  opacity: 0;
  transition: opacity .3s ease;
}

.ct-bin-mode:hover {
  border-color: var(--ct-primary-light);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(99,102,241,.12);
}

.ct-bin-mode:hover::before { opacity: 1; }

.ct-bin-mode-active,
.ct-bin-mode-active:hover {
  border-color: var(--ct-primary) !important;
  background: rgba(99,102,241,.04) !important;
  box-shadow: 0 6px 24px var(--ct-primary-glow) !important;
  transform: translateY(-3px) !important;
}

.ct-bin-mode-active::before { opacity: 1 !important; }

.ct-bin-mode-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(99,102,241,.04));
  font-size: 18px;
  position: relative;
  z-index: 1;
  transition: all .3s ease;
}

.ct-bin-mode-active .ct-bin-mode-icon {
  background: linear-gradient(135deg, var(--ct-primary), var(--ct-primary-hover));
  box-shadow: 0 4px 12px var(--ct-primary-glow);
}

.ct-bin-mode-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--ct-text-secondary);
  position: relative;
  z-index: 1;
}

.ct-bin-mode-active .ct-bin-mode-name {
  color: var(--ct-primary);
  font-weight: 800;
}

/* ===== PANELS ===== */
.ct-bin-panel { display: none; }
.ct-bin-panel-active { display: block; animation: ctFadeUp .3s var(--ct-ease); }

.ct-bin-panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(16,185,129,.03));
  border: 1px solid rgba(99,102,241,.12);
  border-left: 4px solid var(--ct-primary);
  border-radius: var(--ct-r-md);
  margin-bottom: var(--ct-sp-lg);
  box-shadow: 0 4px 14px rgba(99,102,241,.05);
}

.ct-bin-panel-head span:first-child { font-size: 28px; flex-shrink: 0; }
.ct-bin-panel-head strong { display: block; font-size: 15px; color: var(--ct-text); }
.ct-bin-panel-head small { display: block; font-size: 12px; color: var(--ct-text-secondary); margin-top: 2px; }

/* ===== MONO INPUT ===== */
.ct-bin-mono-input {
  font-family: 'Courier New', Consolas, monospace !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}

/* ===== HINT BAR ===== */
.ct-bin-hint {
  padding: 8px 14px;
  background: rgba(99,102,241,.05);
  border: 1px solid rgba(99,102,241,.1);
  border-radius: var(--ct-r-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--ct-text-secondary);
  margin-top: var(--ct-sp-sm);
}

/* ===== OPERATION BUTTONS ===== */
.ct-bin-op-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.ct-bin-op-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--ct-font);
  color: var(--ct-text-secondary);
  background: #fff;
  border: 2px solid var(--ct-input-border);
  border-radius: var(--ct-r-sm);
  cursor: pointer;
  transition: all .25s ease;
}

.ct-bin-op-btn:hover {
  border-color: var(--ct-primary-light);
  color: var(--ct-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(99,102,241,.1);
}

.ct-bin-op-active,
.ct-bin-op-active:hover {
  background: linear-gradient(135deg, var(--ct-primary), var(--ct-primary-hover)) !important;
  color: #fff !important;
  border-color: var(--ct-primary) !important;
  box-shadow: 0 4px 14px var(--ct-primary-glow) !important;
  transform: translateY(-2px) !important;
}

/* ===== ANSWER DISPLAY ===== */
.ct-bin-answer {
  text-align: center;
  padding: var(--ct-sp-xl) var(--ct-sp-md);
  word-break: break-word;
  overflow-wrap: break-word;
  background: linear-gradient(180deg, rgba(99,102,241,.03), transparent);
  border-radius: var(--ct-r-lg);
  margin-bottom: var(--ct-sp-md);
}

.ct-bin-answer:empty { display: none; }

.ct-bin-answer-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ct-text-muted);
  margin-bottom: 10px;
  padding: 4px 16px;
  background: rgba(0,0,0,.03);
  border-radius: 20px;
}

.ct-bin-answer-value {
  display: block;
  font-size: clamp(22px, 6vw, 40px);
  font-weight: 900;
  line-height: 1.2;
  font-family: 'Courier New', Consolas, monospace;
  color: var(--ct-primary);
  word-break: break-all;
  overflow-wrap: break-word;
}

.ct-bin-answer-sub {
  display: block;
  font-size: clamp(13px, 2.5vw, 16px);
  font-weight: 600;
  color: var(--ct-text-secondary);
  margin-top: 8px;
  word-break: break-word;
}

/* ===== CONVERSION CARDS ===== */
.ct-bin-conv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: var(--ct-sp-lg);
}

.ct-bin-conv-card {
  padding: 16px 14px;
  background: #fff;
  border: 2px solid var(--ct-input-border);
  border-radius: var(--ct-r-md);
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  word-break: break-all;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.ct-bin-conv-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.07);
  border-color: var(--ct-primary-light);
}

.ct-bin-conv-card-active {
  border-color: var(--ct-primary) !important;
  background: rgba(99,102,241,.04) !important;
}

.ct-bin-conv-card-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ct-text-muted);
  margin-bottom: 6px;
  padding: 2px 10px;
  background: rgba(0,0,0,.04);
  border-radius: 10px;
}

.ct-bin-conv-card-active .ct-bin-conv-card-tag {
  background: rgba(99,102,241,.1);
  color: var(--ct-primary);
}

.ct-bin-conv-card-val {
  display: block;
  font-size: clamp(16px, 3.5vw, 22px);
  font-weight: 800;
  font-family: 'Courier New', Consolas, monospace;
  color: var(--ct-text);
  line-height: 1.3;
  word-break: break-all;
  overflow-wrap: break-word;
  margin-bottom: 4px;
}

.ct-bin-conv-card-active .ct-bin-conv-card-val {
  color: var(--ct-primary);
}

.ct-bin-conv-card-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ct-text-muted);
}

/* Copy hint */
.ct-bin-conv-card::after {
  content: '📋 Click to copy';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--ct-text-muted);
  opacity: 0;
  transition: opacity .2s ease;
  white-space: nowrap;
}

.ct-bin-conv-card:hover::after {
  opacity: 1;
}

/* ===== BIT VISUALIZATION ===== */
.ct-bin-bits-wrap {
  margin: var(--ct-sp-lg) 0;
  padding: var(--ct-sp-lg);
  background: var(--ct-input-bg);
  border: 1px solid var(--ct-input-border);
  border-radius: var(--ct-r-md);
}

.ct-bin-bits-wrap[hidden] { display: none; }

.ct-bin-bits {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  margin-bottom: 10px;
}

.ct-bin-bit {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  font-family: 'Courier New', monospace;
  border-radius: 6px;
  border: 2px solid var(--ct-input-border);
  transition: all .2s ease;
  flex-shrink: 0;
}

.ct-bin-bit-1 {
  background: linear-gradient(135deg, var(--ct-primary), var(--ct-primary-hover));
  color: #fff;
  border-color: var(--ct-primary);
  box-shadow: 0 2px 8px var(--ct-primary-glow);
}

.ct-bin-bit-0 {
  background: #fff;
  color: var(--ct-text-muted);
  border-color: var(--ct-input-border);
}

.ct-bin-bit-sep {
  width: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--ct-text-muted);
  flex-shrink: 0;
}

.ct-bin-bits-info {
  text-align: center;
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 600;
  color: var(--ct-text-secondary);
  word-break: break-word;
}

/* ===== STEP NUMBERS ===== */
.ct-bin-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ct-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  margin-right: 6px;
}

/* ===== RESULT OVERRIDES ===== */
.ct-tool-section[data-tool="binary"] .ct-result-value {
  font-size: clamp(15px, 3.5vw, 34px);
  word-break: break-all;
  overflow-wrap: break-word;
  line-height: 1.2;
  max-width: 100%;
}

.ct-tool-section[data-tool="binary"] .ct-result-summary {
  word-break: break-word;
  overflow-wrap: break-word;
  font-size: clamp(12px, 2.5vw, 15px);
  line-height: 1.7;
}

.ct-tool-section[data-tool="binary"] .ct-detail-val {
  word-break: break-all;
  overflow-wrap: break-word;
  font-family: 'Courier New', monospace;
  font-weight: 700;
}

/* ===== RESPONSIVE: 768px ===== */
@media (max-width: 768px) {
  .ct-bin-modes {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .ct-bin-mode { padding: 10px 4px 8px; gap: 5px; }
  .ct-bin-mode-icon { width: 34px; height: 34px; font-size: 15px; }
  .ct-bin-mode-name { font-size: 10px; }

  .ct-bin-mono-input { font-size: 15px !important; }

  .ct-bin-panel-head { padding: 12px 14px; gap: 10px; }
  .ct-bin-panel-head span:first-child { font-size: 22px; }
  .ct-bin-panel-head strong { font-size: 14px; }

  .ct-bin-conv-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .ct-bin-bit { width: 30px; height: 30px; font-size: 14px; }

  .ct-bin-op-btn { padding: 7px 12px; font-size: 12px; }

  .ct-tool-section[data-tool="binary"] .ct-detail-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .ct-tool-section[data-tool="binary"] .ct-detail-val {
    text-align: left;
    padding-left: 28px;
  }

  .ct-bin-bits-wrap { padding: var(--ct-sp-md); }
}

/* ===== RESPONSIVE: 480px ===== */
@media (max-width: 480px) {
  .ct-bin-modes {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }

  .ct-bin-mode { padding: 8px 3px 6px; gap: 4px; }
  .ct-bin-mode-icon { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }
  .ct-bin-mode-name { font-size: 9px; }

  .ct-bin-mono-input { font-size: 14px !important; letter-spacing: .5px !important; }

  .ct-bin-conv-cards {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .ct-bin-conv-card { padding: 12px 10px; }
  .ct-bin-conv-card-val { font-size: 16px; }
  .ct-bin-conv-card::after { display: none; }

  .ct-bin-bit { width: 26px; height: 26px; font-size: 12px; border-radius: 4px; }
  .ct-bin-bit-sep { width: 5px; font-size: 8px; }

  .ct-bin-op-btn { padding: 6px 10px; font-size: 11px; }

  .ct-bin-panel-head { padding: 10px 12px; gap: 8px; }
  .ct-bin-panel-head span:first-child { font-size: 20px; }
  .ct-bin-panel-head strong { font-size: 13px; }
  .ct-bin-panel-head small { font-size: 11px; }

  .ct-bin-hint { font-size: 11px; padding: 6px 10px; }
}

/* ===== RESPONSIVE: 360px ===== */
@media (max-width: 360px) {
  .ct-bin-bit { width: 22px; height: 22px; font-size: 11px; }
  .ct-bin-bit-sep { width: 4px; }

  .ct-bin-op-btn { padding: 5px 8px; font-size: 10px; }

  .ct-bin-conv-card-val { font-size: 14px; }
  .ct-bin-conv-card-tag { font-size: 9px; }
}
/* ----------------------------------------------------------
   LOAN EMI CALCULATOR — Tool-specific styles
   ---------------------------------------------------------- */

/* ===== TENURE WRAP (input + unit select side by side) ===== */
.ct-emi-tenure-wrap {
  display: flex;
  gap    : 0;
}

.ct-emi-tenure-input {
  flex         : 1;
  border-radius: var(--ct-r-md) 0 0 var(--ct-r-md) !important;
  border-right : none !important;
}

.ct-emi-tenure-unit {
  width        : 110px;
  flex-shrink  : 0;
  border-radius: 0 var(--ct-r-md) var(--ct-r-md) 0 !important;
  border-left  : 1px solid var(--ct-input-border) !important;
  font-size    : 13px !important;
  padding      : 10px 30px 10px 10px !important;
}

/* ===== CSS-ONLY DONUT CHART ===== */
.ct-emi-donut-wrap {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 32px;
  flex-wrap      : wrap;
  padding        : var(--ct-sp-lg) 0;
}

.ct-emi-donut {
  position     : relative;
  width        : 180px;
  height       : 180px;
  border-radius: 50%;
  flex-shrink  : 0;
  transition   : all 1s cubic-bezier(.4, 0, .2, 1);
}

.ct-emi-donut-center {
  position       : absolute;
  top            : 50%;
  left           : 50%;
  transform      : translate(-50%, -50%);
  text-align     : center;
  width          : 110px;
  height         : 110px;
  background     : var(--ct-card-bg);
  border-radius  : 50%;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  box-shadow     : inset 0 0 8px rgba(0, 0, 0, .04);
}

.ct-emi-donut-label {
  font-size   : 11px;
  font-weight : 700;
  color       : var(--ct-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ct-emi-donut-total {
  font-size   : 15px;
  font-weight : 800;
  color       : var(--ct-text);
  word-break  : break-word;
  max-width   : 100px;
  text-align  : center;
  line-height : 1.2;
  margin-top  : 2px;
}

/* Legend */
.ct-emi-donut-legend {
  display       : flex;
  flex-direction: column;
  gap           : 14px;
}

.ct-emi-legend-item {
  display    : flex;
  align-items: flex-start;
  gap        : 10px;
}

.ct-emi-leg-dot {
  width        : 16px;
  height       : 16px;
  border-radius: 4px;
  flex-shrink  : 0;
  margin-top   : 2px;
}

.ct-emi-leg-principal { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.ct-emi-leg-interest  { background: linear-gradient(135deg, #f59e0b, #d97706); }

.ct-emi-legend-item strong {
  display   : block;
  font-size : 13px;
  color     : var(--ct-text);
}

.ct-emi-legend-item span {
  font-size  : 15px;
  font-weight: 800;
  color      : var(--ct-text);
}

.ct-emi-legend-item small {
  font-size  : 12px;
  font-weight: 600;
  color      : var(--ct-text-muted);
  margin-left: 4px;
}

/* ===== AMORTIZATION HEADER ===== */
.ct-emi-amort-header {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  flex-wrap      : wrap;
  gap            : 10px;
}

.ct-emi-amort-toggle {
  display: flex;
  gap    : 4px;
}

.ct-emi-view-btn {
  padding  : 6px 14px !important;
  font-size: 12px !important;
}

.ct-emi-view-active,
.ct-emi-view-active:hover {
  background  : var(--ct-primary) !important;
  color       : #fff !important;
  border-color: var(--ct-primary) !important;
}

/* ===== FORMULA ===== */
.ct-emi-formula {
  margin-top    : var(--ct-sp-lg);
  padding       : 20px 24px;
  background    : linear-gradient(135deg, rgba(99,102,241,.06), rgba(236,72,153,.04));
  border        : 1px solid rgba(99, 102, 241, .12);
  border-radius : var(--ct-r-md);
  text-align    : center;
}

.ct-emi-formula:empty { display: none; }

.ct-emi-formula-label {
  display       : block;
  font-size     : 11px;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color         : var(--ct-text-muted);
  margin-bottom : 8px;
}

.ct-emi-formula-text {
  display       : block;
  font-size     : 17px;
  font-weight   : 800;
  color         : var(--ct-primary);
  font-family   : 'Courier New', monospace;
  word-break    : break-word;
  line-height   : 1.6;
}

.ct-emi-formula-sub {
  display    : block;
  font-size  : 12px;
  font-weight: 600;
  color      : var(--ct-text-secondary);
  margin-top : 6px;
  word-break : break-word;
}

/* Amortization row highlights */
.ct-emi-row-last {
  background : rgba(16, 185, 129, .06) !important;
}
.ct-emi-row-last td {
  color      : var(--ct-success) !important;
  font-weight: 700 !important;
}

/* Balance progress bar in table */
.ct-emi-bal-bar {
  display       : inline-block;
  height        : 6px;
  border-radius : 3px;
  background    : linear-gradient(90deg, var(--ct-primary), var(--ct-primary-light));
  vertical-align: middle;
  margin-left   : 6px;
  min-width     : 2px;
  max-width     : 80px;
}

/* ===== RESPONSIVE — EMI SPECIFIC ===== */

/* Result values overflow fix */
.ct-tool-section[data-tool="emi"] .ct-result-value {
  font-size     : clamp(16px, 3.5vw, 38px);
  word-break    : break-word;
  overflow-wrap : break-word;
  line-height   : 1.2;
  max-width     : 100%;
  padding       : 0 2px;
}

.ct-tool-section[data-tool="emi"] .ct-result-card {
  min-width : 0;
  overflow  : hidden;
  padding   : var(--ct-sp-md) var(--ct-sp-sm);
}

.ct-tool-section[data-tool="emi"] .ct-detail-val {
  word-break   : break-word;
  overflow-wrap: break-word;
}

@media (max-width: 768px) {
  .ct-tool-section[data-tool="emi"] .ct-result-grid.ct-cols-3 {
    grid-template-columns: 1fr;
    gap: var(--ct-sp-sm);
  }

  .ct-emi-donut-wrap {
    flex-direction: column;
    gap           : 20px;
  }

  .ct-emi-donut {
    width : 150px;
    height: 150px;
  }

  .ct-emi-donut-center {
    width : 90px;
    height: 90px;
  }

  .ct-emi-donut-total {
    font-size: 13px;
  }

  .ct-emi-donut-legend {
    flex-direction: row;
    gap           : 20px;
    flex-wrap     : wrap;
    justify-content: center;
  }

  .ct-emi-tenure-unit {
    width: 95px;
  }

  .ct-tool-section[data-tool="emi"] .ct-detail-item {
    flex-direction: column;
    align-items   : flex-start;
    gap           : 2px;
  }

  .ct-tool-section[data-tool="emi"] .ct-detail-val {
    text-align  : left;
    padding-left: 28px;
  }

  .ct-emi-formula-text {
    font-size: 14px;
  }

  .ct-emi-amort-header {
    flex-direction: column;
    align-items   : flex-start;
  }
}

@media (max-width: 480px) {
  .ct-emi-donut {
    width : 130px;
    height: 130px;
  }

  .ct-emi-donut-center {
    width : 78px;
    height: 78px;
  }

  .ct-emi-donut-total {
    font-size : 12px;
    max-width : 70px;
  }

  .ct-emi-donut-label {
    font-size: 9px;
  }

  .ct-emi-formula-text {
    font-size: 12px;
  }

  .ct-emi-bal-bar {
    max-width: 40px;
  }
}
/* ----------------------------------------------------------
   SPEED DISTANCE TIME — PREMIUM PROFESSIONAL STYLES
   FULLY RESPONSIVE — checked at all breakpoints
   ---------------------------------------------------------- */

/* ===== MODE SELECTOR ===== */
.ct-spd-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: var(--ct-sp-xl);
}

.ct-spd-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 10px 14px;
  background: var(--ct-input-bg);
  border: 2px solid var(--ct-input-border);
  border-radius: var(--ct-r-lg);
  cursor: pointer;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  font-family: var(--ct-font);
  user-select: none;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ct-spd-mode::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,.07), rgba(236,72,153,.04));
  opacity: 0;
  transition: opacity .3s ease;
}

.ct-spd-mode:hover {
  border-color: var(--ct-primary-light);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(99,102,241,.14);
}

.ct-spd-mode:hover::before { opacity: 1; }

.ct-spd-mode-active,
.ct-spd-mode-active:hover {
  border-color: var(--ct-primary) !important;
  background: rgba(99,102,241,.04) !important;
  box-shadow: 0 8px 28px var(--ct-primary-glow),
              inset 0 0 0 1px rgba(99,102,241,.08) !important;
  transform: translateY(-4px) !important;
}

.ct-spd-mode-active::before { opacity: 1 !important; }

.ct-spd-mode-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(99,102,241,.04));
  font-size: 22px;
  position: relative;
  z-index: 1;
  transition: all .3s ease;
}

.ct-spd-mode-active .ct-spd-mode-icon {
  background: linear-gradient(135deg, var(--ct-primary), var(--ct-primary-hover));
  box-shadow: 0 4px 14px var(--ct-primary-glow);
  transform: scale(1.05);
}

.ct-spd-mode-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--ct-text-secondary);
  position: relative;
  z-index: 1;
}

.ct-spd-mode-active .ct-spd-mode-name {
  color: var(--ct-primary);
}

.ct-spd-mode-formula {
  font-size: 11px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  color: var(--ct-text-muted);
  background: rgba(0,0,0,.04);
  padding: 3px 10px;
  border-radius: 12px;
  position: relative;
  z-index: 1;
}

.ct-spd-mode-active .ct-spd-mode-formula {
  background: rgba(99,102,241,.08);
  color: var(--ct-primary);
}

/* ===== PANELS ===== */
.ct-spd-panel { display: none; }
.ct-spd-panel-active { display: block; animation: ctFadeUp .3s var(--ct-ease); }

.ct-spd-panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(236,72,153,.03));
  border: 1px solid rgba(99,102,241,.12);
  border-left: 4px solid var(--ct-primary);
  border-radius: var(--ct-r-md);
  margin-bottom: var(--ct-sp-lg);
  box-shadow: 0 4px 14px rgba(99,102,241,.05);
}

.ct-spd-panel-head span:first-child { font-size: 28px; flex-shrink: 0; }
.ct-spd-panel-head strong { display: block; font-size: 15px; color: var(--ct-text); }
.ct-spd-panel-head small { display: block; font-size: 12px; color: var(--ct-text-secondary); margin-top: 2px; }

/* ===== INPUT PAIR (input + unit select) ===== */
.ct-spd-input-pair {
  display: flex;
  gap: 0;
}

.ct-spd-input-pair .ct-input {
  flex: 1;
  min-width: 0;
  border-radius: var(--ct-r-md) 0 0 var(--ct-r-md) !important;
  border-right: none !important;
}

.ct-spd-unit-sel {
  width: 100px !important;
  flex-shrink: 0;
  border-radius: 0 var(--ct-r-md) var(--ct-r-md) 0 !important;
  border-left: 1px solid var(--ct-input-border) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 28px 10px 10px !important;
  background-position: right 8px center !important;
}

/* ===== ANSWER DISPLAY ===== */
.ct-spd-answer {
  text-align: center;
  padding: var(--ct-sp-xl) var(--ct-sp-md);
  word-break: break-word;
  overflow-wrap: break-word;
  background: linear-gradient(180deg, rgba(99,102,241,.03), transparent);
  border-radius: var(--ct-r-lg);
  margin-bottom: var(--ct-sp-md);
}

.ct-spd-answer:empty { display: none; }

.ct-spd-answer-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ct-text-muted);
  margin-bottom: 10px;
  padding: 4px 16px;
  background: rgba(0,0,0,.03);
  border-radius: 20px;
}

.ct-spd-answer-value {
  display: block;
  font-size: clamp(30px, 8vw, 52px);
  font-weight: 900;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--ct-primary), var(--ct-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  word-break: break-word;
}

.ct-spd-answer-sub {
  display: block;
  font-size: clamp(13px, 2.5vw, 16px);
  font-weight: 600;
  color: var(--ct-text-secondary);
  margin-top: 8px;
  word-break: break-word;
}

/* ===== SPEED GAUGE ===== */
.ct-spd-gauge-wrap {
  margin: var(--ct-sp-lg) 0;
  padding: var(--ct-sp-lg);
  background: var(--ct-input-bg);
  border: 1px solid var(--ct-input-border);
  border-radius: var(--ct-r-md);
}

.ct-spd-gauge-wrap[hidden] { display: none; }

.ct-spd-gauge {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ct-spd-gauge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--ct-r-sm);
  transition: background .2s ease;
}

.ct-spd-gauge-row:hover {
  background: rgba(0,0,0,.02);
}

.ct-spd-gauge-row-you {
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(99,102,241,.04)) !important;
  border: 2px solid rgba(99,102,241,.2);
  border-radius: var(--ct-r-md);
  padding: 10px 12px;
}

.ct-spd-gauge-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.ct-spd-gauge-name {
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 700;
  color: var(--ct-text-secondary);
  min-width: 80px;
  flex-shrink: 0;
}

.ct-spd-gauge-row-you .ct-spd-gauge-name {
  color: var(--ct-primary);
  font-weight: 800;
}

.ct-spd-gauge-bar-wrap {
  flex: 1;
  height: 10px;
  background: var(--ct-input-border);
  border-radius: 5px;
  overflow: hidden;
  min-width: 40px;
}

.ct-spd-gauge-bar {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--ct-input-border), #94a3b8);
  transition: width .8s cubic-bezier(.4,0,.2,1);
}

.ct-spd-gauge-row-you .ct-spd-gauge-bar {
  background: linear-gradient(90deg, var(--ct-primary), var(--ct-primary-light)) !important;
}

.ct-spd-gauge-val {
  font-size: clamp(10px, 1.8vw, 12px);
  font-weight: 800;
  color: var(--ct-text-muted);
  min-width: 70px;
  text-align: right;
  flex-shrink: 0;
  word-break: break-word;
}

.ct-spd-gauge-row-you .ct-spd-gauge-val {
  color: var(--ct-primary);
}

/* ===== CONVERSION GRID ===== */
.ct-spd-conv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.ct-spd-conv-card {
  padding: 14px 12px;
  background: #fff;
  border: 1px solid var(--ct-input-border);
  border-radius: var(--ct-r-sm);
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
  word-break: break-word;
  overflow: hidden;
}

.ct-spd-conv-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.ct-spd-conv-card-active {
  border-color: var(--ct-primary) !important;
  background: rgba(99,102,241,.04) !important;
}

.ct-spd-conv-val {
  display: block;
  font-size: clamp(15px, 3vw, 20px);
  font-weight: 800;
  color: var(--ct-primary);
  line-height: 1.2;
  word-break: break-word;
}

.ct-spd-conv-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ct-text-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-top: 4px;
}

/* ===== STEP NUMBERS ===== */
.ct-spd-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ct-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  margin-right: 6px;
}

/* ===== RESULT OVERRIDES ===== */
.ct-tool-section[data-tool="speed"] .ct-result-value {
  font-size: clamp(16px, 4vw, 34px);
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.2;
  max-width: 100%;
  padding: 0 2px;
}

.ct-tool-section[data-tool="speed"] .ct-result-card {
  min-width: 0;
  overflow: hidden;
  padding: var(--ct-sp-md) var(--ct-sp-sm);
  word-break: break-word;
}

.ct-tool-section[data-tool="speed"] .ct-result-summary {
  word-break: break-word;
  overflow-wrap: break-word;
  font-size: clamp(12px, 2.5vw, 15px);
  line-height: 1.7;
}

.ct-tool-section[data-tool="speed"] .ct-detail-val {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ===== RESPONSIVE: 768px ===== */
@media (max-width: 768px) {
  .ct-spd-modes {
    gap: 8px;
  }

  .ct-spd-mode {
    padding: 14px 6px 10px;
    gap: 5px;
  }

  .ct-spd-mode-icon {
    width: 38px;
    height: 38px;
    font-size: 18px;
    border-radius: 10px;
  }

  .ct-spd-mode-name { font-size: 11px; }
  .ct-spd-mode-formula { font-size: 10px; padding: 2px 8px; }

  .ct-spd-panel-head {
    padding: 12px 14px;
    gap: 10px;
  }

  .ct-spd-panel-head span:first-child { font-size: 22px; }
  .ct-spd-panel-head strong { font-size: 14px; }

  .ct-spd-unit-sel {
    width: 85px !important;
    font-size: 11px !important;
    padding: 10px 22px 10px 8px !important;
  }

  .ct-tool-section[data-tool="speed"] .ct-result-grid {
    grid-template-columns: 1fr !important;
    gap: var(--ct-sp-sm);
  }

  .ct-tool-section[data-tool="speed"] .ct-detail-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .ct-tool-section[data-tool="speed"] .ct-detail-val {
    text-align: left;
    padding-left: 28px;
  }

  .ct-spd-conv-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 6px;
  }

  .ct-spd-gauge-name { min-width: 65px; }
  .ct-spd-gauge-val { min-width: 55px; }

  .ct-spd-gauge-wrap {
    padding: var(--ct-sp-md);
  }
}

/* ===== RESPONSIVE: 480px ===== */
@media (max-width: 480px) {
  .ct-spd-modes {
    gap: 6px;
  }

  .ct-spd-mode {
    padding: 10px 4px 8px;
    gap: 4px;
  }

  .ct-spd-mode-icon {
    width: 32px;
    height: 32px;
    font-size: 15px;
    border-radius: 8px;
  }

  .ct-spd-mode-name { font-size: 10px; }
  .ct-spd-mode-formula { font-size: 9px; padding: 2px 6px; }

  .ct-spd-input-pair {
    flex-direction: column;
    gap: 0;
  }

  .ct-spd-input-pair .ct-input {
    border-radius: var(--ct-r-md) var(--ct-r-md) 0 0 !important;
    border-right: 2px solid var(--ct-input-border) !important;
    border-bottom: none !important;
  }

  .ct-spd-unit-sel {
    width: 100% !important;
    border-radius: 0 0 var(--ct-r-md) var(--ct-r-md) !important;
    border-left: 2px solid var(--ct-input-border) !important;
    border-top: 1px solid var(--ct-input-border) !important;
  }

  .ct-spd-panel-head {
    padding: 10px 12px;
    gap: 8px;
  }

  .ct-spd-panel-head span:first-child { font-size: 20px; }
  .ct-spd-panel-head strong { font-size: 13px; }
  .ct-spd-panel-head small { font-size: 11px; }

  .ct-spd-conv-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }

  .ct-spd-conv-card { padding: 10px 8px; }
  .ct-spd-conv-val { font-size: 14px; }
  .ct-spd-conv-label { font-size: 9px; }

  .ct-spd-gauge-row { gap: 6px; padding: 6px 8px; }
  .ct-spd-gauge-icon { font-size: 14px; width: 22px; }
  .ct-spd-gauge-name { min-width: 55px; font-size: 10px; }
  .ct-spd-gauge-val { min-width: 50px; font-size: 10px; }
  .ct-spd-gauge-bar-wrap { height: 8px; }

  .ct-spd-gauge-wrap { padding: 10px; }
}

/* ===== RESPONSIVE: 360px ===== */
@media (max-width: 360px) {
  .ct-spd-mode {
    padding: 8px 3px 6px;
  }

  .ct-spd-mode-icon {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .ct-spd-mode-name { font-size: 9px; }
  .ct-spd-mode-formula { font-size: 8px; }

  .ct-spd-conv-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  .ct-spd-gauge-name { min-width: 45px; font-size: 9px; }
  .ct-spd-gauge-val { min-width: 40px; font-size: 9px; }
  .ct-spd-gauge-icon { font-size: 12px; width: 18px; }
  .ct-spd-gauge-bar-wrap { height: 6px; }
}
/* ----------------------------------------------------------
   CALORIE CALCULATOR — PREMIUM PROFESSIONAL STYLES
   FULLY RESPONSIVE — verified at all breakpoints
   ---------------------------------------------------------- */

/* ===== GENDER TOGGLE ===== */
.ct-cal-gender {
  display: flex;
  gap: 10px;
}

.ct-cal-gender-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--ct-input-bg);
  border: 2px solid var(--ct-input-border);
  border-radius: var(--ct-r-lg);
  cursor: pointer;
  transition: all .3s ease;
  font-family: var(--ct-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--ct-text-secondary);
}

.ct-cal-gender-btn:hover {
  border-color: var(--ct-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(99,102,241,.1);
}

.ct-cal-gender-active,
.ct-cal-gender-active:hover {
  border-color: var(--ct-primary) !important;
  background: rgba(99,102,241,.06) !important;
  color: var(--ct-primary) !important;
  box-shadow: 0 4px 16px var(--ct-primary-glow) !important;
}

.ct-cal-gender-icon { font-size: 24px; }

/* ===== HEIGHT WRAP (input + unit) ===== */
.ct-cal-height-wrap {
  display: flex;
  gap: 0;
}

.ct-cal-ht-input {
  flex: 1;
  min-width: 0;
  border-radius: var(--ct-r-md) 0 0 var(--ct-r-md) !important;
  border-right: none !important;
}

.ct-cal-ht-unit {
  width: 70px !important;
  flex-shrink: 0;
  border-radius: 0 var(--ct-r-md) var(--ct-r-md) 0 !important;
  border-left: 1px solid var(--ct-input-border) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 10px 22px 10px 8px !important;
}

/* ft-in sub-fields */
.ct-cal-ftin {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}

.ct-cal-ftin[hidden] { display: none; }

.ct-cal-ftin .ct-input {
  width: 60px !important;
  text-align: center;
  font-weight: 700;
}

.ct-cal-ftin-sep {
  font-size: 18px;
  font-weight: 800;
  color: var(--ct-text-muted);
}

/* ===== ACTIVITY CARDS ===== */
.ct-cal-activity {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}

.ct-cal-act-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px 12px;
  background: var(--ct-input-bg);
  border: 2px solid var(--ct-input-border);
  border-radius: var(--ct-r-lg);
  cursor: pointer;
  transition: all .3s ease;
  font-family: var(--ct-font);
  text-align: center;
}

.ct-cal-act-btn:hover {
  border-color: var(--ct-primary-light);
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(99,102,241,.12);
}

.ct-cal-act-active,
.ct-cal-act-active:hover {
  border-color: var(--ct-primary) !important;
  background: rgba(99,102,241,.06) !important;
  box-shadow: 0 6px 22px var(--ct-primary-glow) !important;
  transform: translateY(-3px) !important;
}

.ct-cal-act-emoji { font-size: 26px; }
.ct-cal-act-btn strong { font-size: 12px; color: var(--ct-text); }
.ct-cal-act-btn small { font-size: 10px; color: var(--ct-text-muted); }
.ct-cal-act-active strong { color: var(--ct-primary); }

/* ===== GOAL BUTTONS ===== */
.ct-cal-goals {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.ct-cal-goal-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 6px 10px;
  background: var(--ct-input-bg);
  border: 2px solid var(--ct-input-border);
  border-radius: var(--ct-r-md);
  cursor: pointer;
  transition: all .25s ease;
  font-family: var(--ct-font);
  text-align: center;
}

.ct-cal-goal-btn:hover {
  border-color: var(--ct-primary-light);
  transform: translateY(-2px);
}

.ct-cal-goal-active,
.ct-cal-goal-active:hover {
  border-color: var(--ct-primary) !important;
  background: rgba(99,102,241,.06) !important;
  box-shadow: 0 4px 14px var(--ct-primary-glow) !important;
}

.ct-cal-goal-btn span:first-child { font-size: 18px; }
.ct-cal-goal-btn strong { font-size: 11px; color: var(--ct-text); }
.ct-cal-goal-btn small { font-size: 9px; color: var(--ct-text-muted); }
.ct-cal-goal-active strong { color: var(--ct-primary); }

/* ===== ANSWER ===== */
.ct-cal-answer {
  text-align: center;
  padding: var(--ct-sp-xl) var(--ct-sp-md);
  word-break: break-word;
}

.ct-cal-answer:empty { display: none; }

.ct-cal-answer-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--ct-text-muted);
  margin-bottom: 10px;
  padding: 4px 16px;
  background: rgba(0,0,0,.03);
  border-radius: 20px;
}

.ct-cal-answer-value {
  display: block;
  font-size: clamp(32px, 8vw, 56px);
  font-weight: 900;
  line-height: 1.1;
  background: linear-gradient(135deg, #f97316, #ef4444, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ct-cal-answer-sub {
  display: block;
  font-size: clamp(13px, 2.5vw, 16px);
  font-weight: 600;
  color: var(--ct-text-secondary);
  margin-top: 6px;
}

/* ===== CARDS GRID ===== */
.ct-cal-cards-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: 8px !important;
}

/* ===== MACRO DONUT + CARDS ===== */
.ct-cal-macro-wrap {
  margin: var(--ct-sp-lg) 0;
  padding: var(--ct-sp-lg);
  background: var(--ct-input-bg);
  border: 1px solid var(--ct-input-border);
  border-radius: var(--ct-r-md);
}

.ct-cal-macro-content {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--ct-sp-md);
}

/* Donut */
.ct-cal-donut {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  transition: all .8s ease;
}

.ct-cal-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100px;
  height: 100px;
  background: var(--ct-card-bg);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 8px rgba(0,0,0,.03);
}

.ct-cal-donut-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ct-text-muted);
}

.ct-cal-donut-val {
  font-size: clamp(14px, 3vw, 18px);
  font-weight: 900;
  color: var(--ct-text);
  word-break: break-word;
}

.ct-cal-donut-unit {
  font-size: 9px;
  font-weight: 700;
  color: var(--ct-text-muted);
}

/* Macro cards */
.ct-cal-macro-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 180px;
}

.ct-cal-macro-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--ct-input-border);
  border-radius: var(--ct-r-md);
  transition: transform .2s ease;
}

.ct-cal-macro-card:hover {
  transform: translateX(4px);
}

.ct-cal-macro-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}

.ct-cal-macro-dot-protein { background: linear-gradient(135deg, #ef4444, #dc2626); }
.ct-cal-macro-dot-carbs   { background: linear-gradient(135deg, #f59e0b, #d97706); }
.ct-cal-macro-dot-fat     { background: linear-gradient(135deg, #3b82f6, #2563eb); }

.ct-cal-macro-info { flex: 1; min-width: 0; }
.ct-cal-macro-name { display: block; font-size: 13px; font-weight: 800; color: var(--ct-text); }
.ct-cal-macro-val  { display: block; font-size: 12px; font-weight: 600; color: var(--ct-text-secondary); word-break: break-word; }

/* ===== MEAL DISTRIBUTION ===== */
.ct-cal-meals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: var(--ct-sp-md);
}

.ct-cal-meal-card {
  padding: 14px 12px;
  background: #fff;
  border: 1px solid var(--ct-input-border);
  border-radius: var(--ct-r-md);
  text-align: center;
  transition: transform .2s ease;
  word-break: break-word;
}

.ct-cal-meal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

.ct-cal-meal-emoji { display: block; font-size: 28px; margin-bottom: 6px; }
.ct-cal-meal-name  { display: block; font-size: 12px; font-weight: 800; color: var(--ct-text); margin-bottom: 2px; }
.ct-cal-meal-cal   { display: block; font-size: clamp(16px, 3vw, 20px); font-weight: 900; color: var(--ct-primary); }
.ct-cal-meal-pct   { display: block; font-size: 10px; font-weight: 700; color: var(--ct-text-muted); }

/* ===== GOAL TABLE ACTIVE ROW ===== */
.ct-cal-goal-row-active {
  background: rgba(99,102,241,.06) !important;
}

.ct-cal-goal-row-active td {
  color: var(--ct-primary) !important;
  font-weight: 700 !important;
}

/* ===== RESPONSIVE OVERRIDES ===== */
.ct-tool-section[data-tool="calorie"] .ct-result-value {
  font-size: clamp(15px, 3.5vw, 34px);
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.2;
  max-width: 100%;
  padding: 0 2px;
}

.ct-tool-section[data-tool="calorie"] .ct-result-card {
  min-width: 0;
  overflow: hidden;
  padding: var(--ct-sp-md) var(--ct-sp-sm);
  word-break: break-word;
}

.ct-tool-section[data-tool="calorie"] .ct-result-summary {
  word-break: break-word;
  font-size: clamp(12px, 2.5vw, 15px);
  line-height: 1.7;
}

.ct-tool-section[data-tool="calorie"] .ct-detail-val {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ===== 768px ===== */
@media (max-width: 768px) {
  .ct-cal-activity {
    grid-template-columns: repeat(3, 1fr);
  }

  .ct-cal-goals {
    grid-template-columns: repeat(3, 1fr);
  }

  .ct-cal-gender-btn {
    padding: 12px 14px;
    font-size: 14px;
  }

  .ct-cal-macro-content {
    flex-direction: column;
    gap: 20px;
  }

  .ct-cal-donut {
    width: 150px;
    height: 150px;
  }

  .ct-cal-donut-center {
    width: 90px;
    height: 90px;
  }

  .ct-cal-macro-cards {
    min-width: 0;
    width: 100%;
  }

  .ct-cal-meals {
    grid-template-columns: repeat(2, 1fr);
  }

  .ct-tool-section[data-tool="calorie"] .ct-result-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .ct-tool-section[data-tool="calorie"] .ct-detail-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .ct-tool-section[data-tool="calorie"] .ct-detail-val {
    text-align: left;
    padding-left: 28px;
  }

  .ct-cal-act-btn { padding: 10px 6px; }
  .ct-cal-act-emoji { font-size: 22px; }
  .ct-cal-act-btn strong { font-size: 11px; }
  .ct-cal-act-btn small { font-size: 9px; }
}

/* ===== 480px ===== */
@media (max-width: 480px) {
  .ct-cal-activity {
    grid-template-columns: repeat(2, 1fr);
  }

  .ct-cal-goals {
    grid-template-columns: repeat(3, 1fr);
  }

  .ct-cal-goal-btn {
    padding: 8px 4px;
  }

  .ct-cal-goal-btn span:first-child { font-size: 16px; }
  .ct-cal-goal-btn strong { font-size: 10px; }
  .ct-cal-goal-btn small { font-size: 8px; }

  .ct-cal-gender-btn {
    padding: 10px 10px;
    font-size: 13px;
    gap: 8px;
  }

  .ct-cal-gender-icon { font-size: 20px; }

  .ct-cal-donut {
    width: 130px;
    height: 130px;
  }

  .ct-cal-donut-center {
    width: 78px;
    height: 78px;
  }

  .ct-cal-donut-val { font-size: 14px; }

  .ct-cal-meals {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .ct-cal-meal-card { padding: 10px 8px; }
  .ct-cal-meal-emoji { font-size: 22px; }

  .ct-cal-act-btn { padding: 8px 4px; }
  .ct-cal-act-emoji { font-size: 20px; }
  .ct-cal-act-btn strong { font-size: 10px; }
  .ct-cal-act-btn small { font-size: 8px; }

  .ct-tool-section[data-tool="calorie"] .ct-result-grid {
    grid-template-columns: 1fr !important;
  }

  .ct-cal-macro-card {
    padding: 10px 12px;
    gap: 10px;
  }

  .ct-cal-ftin .ct-input { width: 50px !important; }
  .ct-cal-ht-unit { width: 60px !important; padding: 10px 18px 10px 6px !important; font-size: 11px !important; }
}

/* ===== 360px ===== */
@media (max-width: 360px) {
  .ct-cal-goals {
    grid-template-columns: repeat(2, 1fr);
  }

  .ct-cal-activity {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }

  .ct-cal-gender-btn {
    padding: 8px;
    font-size: 12px;
    gap: 6px;
  }

  .ct-cal-gender-icon { font-size: 18px; }

  .ct-cal-donut {
    width: 110px;
    height: 110px;
  }

  .ct-cal-donut-center {
    width: 66px;
    height: 66px;
  }

  .ct-cal-donut-val { font-size: 12px; }

  .ct-cal-meals {
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }

  .ct-cal-meal-emoji { font-size: 20px; }
  .ct-cal-meal-cal { font-size: 15px; }
}
/* ----------------------------------------------------------
   GST CALCULATOR — PREMIUM STYLES, FULLY RESPONSIVE
   ---------------------------------------------------------- */

/* ===== MODE SELECTOR ===== */
.ct-gst-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: var(--ct-sp-xl);
}
.ct-gst-mode {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 16px 8px 14px; background: var(--ct-input-bg);
  border: 2px solid var(--ct-input-border); border-radius: var(--ct-r-lg);
  cursor: pointer; transition: all .3s ease; font-family: var(--ct-font);
  user-select: none; text-align: center; position: relative; overflow: hidden;
}
.ct-gst-mode::before { content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(99,102,241,.07),rgba(16,185,129,.04));
  opacity:0; transition:opacity .3s ease; }
.ct-gst-mode:hover { border-color:var(--ct-primary-light); transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(99,102,241,.14); }
.ct-gst-mode:hover::before { opacity:1; }
.ct-gst-mode-active, .ct-gst-mode-active:hover {
  border-color:var(--ct-primary)!important; background:rgba(99,102,241,.04)!important;
  box-shadow:0 8px 28px var(--ct-primary-glow)!important; transform:translateY(-4px)!important; }
.ct-gst-mode-active::before { opacity:1!important; }
.ct-gst-mode-icon {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(99,102,241,.04));
  font-size:20px; position:relative; z-index:1; transition:all .3s ease; }
.ct-gst-mode-active .ct-gst-mode-icon {
  background:linear-gradient(135deg,var(--ct-primary),var(--ct-primary-hover));
  box-shadow:0 4px 12px var(--ct-primary-glow); }
.ct-gst-mode-name { font-size:13px; font-weight:800; color:var(--ct-text-secondary);
  position:relative; z-index:1; }
.ct-gst-mode-active .ct-gst-mode-name { color:var(--ct-primary); }
.ct-gst-mode-desc { font-size:10px; font-weight:600; color:var(--ct-text-muted);
  position:relative; z-index:1; }

/* ===== SETTINGS ROW ===== */
.ct-gst-settings { margin-bottom: var(--ct-sp-lg); }

/* ===== PANELS ===== */
.ct-gst-panel { display:none; }
.ct-gst-panel-active { display:block; animation:ctFadeUp .3s var(--ct-ease); }
.ct-gst-panel-head {
  display:flex; align-items:center; gap:14px; padding:16px 20px;
  background:linear-gradient(135deg,rgba(99,102,241,.06),rgba(16,185,129,.03));
  border:1px solid rgba(99,102,241,.12); border-left:4px solid var(--ct-primary);
  border-radius:var(--ct-r-md); margin-bottom:var(--ct-sp-lg);
  box-shadow:0 4px 14px rgba(99,102,241,.05); }
.ct-gst-panel-head span:first-child { font-size:28px; flex-shrink:0; }
.ct-gst-panel-head strong { display:block; font-size:15px; color:var(--ct-text); }
.ct-gst-panel-head small { display:block; font-size:12px; color:var(--ct-text-secondary); margin-top:2px; }

/* ===== QUICK RATE PILLS ===== */
.ct-gst-quick-rates { margin-top:var(--ct-sp-md); }
.ct-gst-qr-label { display:block; font-size:11px; font-weight:700; color:var(--ct-text-muted);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.ct-gst-pills { display:flex; flex-wrap:wrap; gap:6px; }
.ct-gst-pill {
  padding:7px 16px; font-size:13px; font-weight:700; font-family:var(--ct-font);
  color:var(--ct-text-secondary); background:#fff; border:2px solid var(--ct-input-border);
  border-radius:24px; cursor:pointer; transition:all .25s ease; }
.ct-gst-pill:hover { border-color:var(--ct-primary-light); color:var(--ct-primary);
  transform:translateY(-2px); box-shadow:0 4px 10px rgba(99,102,241,.1); }
.ct-gst-pill-active, .ct-gst-pill-active:hover {
  background:linear-gradient(135deg,var(--ct-primary),var(--ct-primary-hover))!important;
  color:#fff!important; border-color:var(--ct-primary)!important;
  box-shadow:0 4px 14px var(--ct-primary-glow)!important; }

/* ===== INVOICE ITEM ROWS ===== */
.ct-gst-items { display:flex; flex-direction:column; gap:10px; }
.ct-gst-item-row {
  display:grid; grid-template-columns:1fr 60px 1fr 80px 36px;
  gap:8px; align-items:end; padding:12px 14px;
  background:var(--ct-input-bg); border:1px solid var(--ct-input-border);
  border-radius:var(--ct-r-md); animation:ctFadeUp .25s var(--ct-ease); }
.ct-gst-item-row .ct-form-group { margin:0; }
.ct-gst-item-row .ct-label { font-size:11px; margin-bottom:4px; }
.ct-gst-item-row .ct-input { font-size:13px; padding:8px 10px; }
.ct-gst-item-del {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:rgba(239,68,68,.08); border:1.5px solid rgba(239,68,68,.2);
  border-radius:var(--ct-r-sm); color:var(--ct-danger); font-size:16px;
  cursor:pointer; transition:all .2s ease; font-family:var(--ct-font);
  padding:0; line-height:1; }
.ct-gst-item-del:hover { background:var(--ct-danger); color:#fff; border-color:var(--ct-danger); }

/* ===== ANSWER ===== */
.ct-gst-answer {
  text-align:center; padding:var(--ct-sp-xl) var(--ct-sp-md);
  word-break:break-word; overflow-wrap:break-word;
  background:linear-gradient(180deg,rgba(99,102,241,.03),transparent);
  border-radius:var(--ct-r-lg); margin-bottom:var(--ct-sp-md); }
.ct-gst-answer:empty { display:none; }
.ct-gst-answer-label {
  display:inline-block; font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:2px; color:var(--ct-text-muted); margin-bottom:10px;
  padding:4px 16px; background:rgba(0,0,0,.03); border-radius:20px; }
.ct-gst-answer-value {
  display:block; font-size:clamp(28px,7vw,48px); font-weight:900; line-height:1.1;
  background:linear-gradient(135deg,var(--ct-primary),var(--ct-secondary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; word-break:break-word; }
.ct-gst-answer-sub {
  display:block; font-size:clamp(13px,2.5vw,16px); font-weight:600;
  color:var(--ct-text-secondary); margin-top:6px; word-break:break-word; }

/* ===== BAR ===== */
.ct-gst-bar-wrap { margin:var(--ct-sp-lg) 0; padding:16px;
  background:var(--ct-input-bg); border:1px solid var(--ct-input-border);
  border-radius:var(--ct-r-md); }
.ct-gst-bar-wrap[hidden] { display:none; }
.ct-gst-bar { display:flex; width:100%; height:26px; border-radius:13px; overflow:hidden;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.08); }
.ct-gst-bar-base { height:100%; background:linear-gradient(135deg,#818cf8,#6366f1,#4f46e5);
  transition:flex-basis 1s cubic-bezier(.4,0,.2,1); flex-basis:0%;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(9px,1.8vw,11px); font-weight:800; color:#fff; overflow:hidden; min-width:0; }
.ct-gst-bar-tax { height:100%; background:linear-gradient(135deg,#34d399,#10b981,#059669);
  transition:flex-basis 1s cubic-bezier(.4,0,.2,1); flex-basis:0%;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(9px,1.8vw,11px); font-weight:800; color:#fff; overflow:hidden; min-width:0; }
.ct-gst-bar-legend { display:flex; justify-content:center; gap:20px; margin-top:10px; flex-wrap:wrap; }
.ct-gst-bar-legend > span { display:inline-flex; align-items:center; gap:6px;
  font-size:clamp(10px,2vw,13px); font-weight:700; color:var(--ct-text-secondary); }
.ct-gst-dot { width:12px; height:12px; border-radius:3px; flex-shrink:0; }
.ct-gst-dot-base { background:linear-gradient(135deg,#818cf8,#4f46e5); }
.ct-gst-dot-tax { background:linear-gradient(135deg,#34d399,#059669); }

/* ===== SPLIT CARDS ===== */
.ct-gst-split-box { margin:var(--ct-sp-lg) 0; padding:var(--ct-sp-lg);
  background:var(--ct-input-bg); border:1px solid var(--ct-input-border);
  border-radius:var(--ct-r-md); }
.ct-gst-split-box[hidden] { display:none; }
.ct-gst-split-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px; margin-top:var(--ct-sp-md); }
.ct-gst-split-card { padding:16px 14px; background:#fff; border:2px solid var(--ct-input-border);
  border-radius:var(--ct-r-md); text-align:center; transition:transform .2s ease;
  word-break:break-word; }
.ct-gst-split-card:hover { transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.06); }
.ct-gst-split-tag { display:inline-block; font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:1px; color:#fff; padding:3px 12px; border-radius:12px;
  margin-bottom:6px; }
.ct-gst-split-tag-cgst { background:linear-gradient(135deg,var(--ct-primary),var(--ct-primary-hover)); }
.ct-gst-split-tag-sgst { background:linear-gradient(135deg,var(--ct-secondary),#be185d); }
.ct-gst-split-tag-igst { background:linear-gradient(135deg,#f59e0b,#d97706); }
.ct-gst-split-tag-total { background:linear-gradient(135deg,#10b981,#059669); }
.ct-gst-split-val { display:block; font-size:clamp(16px,3.5vw,22px); font-weight:800;
  color:var(--ct-text); margin-top:4px; word-break:break-word; }
.ct-gst-split-label { display:block; font-size:11px; font-weight:700; color:var(--ct-text-muted); margin-top:2px; }

/* Active rate row */
.ct-gst-rate-active { background:rgba(99,102,241,.06)!important; }
.ct-gst-rate-active td { color:var(--ct-primary)!important; font-weight:700!important; }

/* ===== RESPONSIVE OVERRIDES ===== */
.ct-tool-section[data-tool="gst"] .ct-result-value {
  font-size:clamp(15px,3.5vw,34px); word-break:break-word; overflow-wrap:break-word;
  line-height:1.2; max-width:100%; padding:0 2px; }
.ct-tool-section[data-tool="gst"] .ct-result-card {
  min-width:0; overflow:hidden; padding:var(--ct-sp-md) var(--ct-sp-sm); word-break:break-word; }
.ct-tool-section[data-tool="gst"] .ct-result-summary {
  word-break:break-word; font-size:clamp(12px,2.5vw,15px); line-height:1.7; }
.ct-tool-section[data-tool="gst"] .ct-detail-val {
  word-break:break-word; overflow-wrap:break-word; }

/* 768px */
@media (max-width:768px) {
  .ct-gst-modes { gap:8px; }
  .ct-gst-mode { padding:12px 6px 10px; }
  .ct-gst-mode-icon { width:38px; height:38px; font-size:17px; }
  .ct-gst-mode-name { font-size:11px; }
  .ct-gst-mode-desc { font-size:9px; }
  .ct-gst-item-row { grid-template-columns:1fr 1fr; gap:6px; }
  .ct-gst-item-del { grid-column:span 2; justify-self:end; }
  .ct-gst-split-cards { grid-template-columns:repeat(2,1fr); }
  .ct-gst-pill { padding:6px 12px; font-size:12px; }
  .ct-tool-section[data-tool="gst"] .ct-result-grid {
    grid-template-columns:1fr!important; gap:var(--ct-sp-sm); }
  .ct-tool-section[data-tool="gst"] .ct-detail-item {
    flex-direction:column; align-items:flex-start; gap:2px; }
  .ct-tool-section[data-tool="gst"] .ct-detail-val {
    text-align:left; padding-left:28px; }
  .ct-gst-panel-head { padding:12px 14px; gap:10px; }
  .ct-gst-panel-head span:first-child { font-size:22px; }
  .ct-gst-bar { height:22px; }
}

/* 480px */
@media (max-width:480px) {
  .ct-gst-modes { grid-template-columns:1fr; gap:6px; }
  .ct-gst-mode { flex-direction:row; padding:12px 14px; gap:12px; text-align:left; }
  .ct-gst-mode-icon { width:34px; height:34px; font-size:15px; }
  .ct-gst-mode-name { font-size:12px; }
  .ct-gst-item-row { grid-template-columns:1fr; }
  .ct-gst-item-del { grid-column:auto; justify-self:end; }
  .ct-gst-split-cards { grid-template-columns:1fr; }
  .ct-gst-pill { padding:5px 10px; font-size:11px; }
  .ct-gst-panel-head span:first-child { font-size:20px; }
  .ct-gst-panel-head strong { font-size:13px; }
  .ct-gst-bar { height:18px; }
  .ct-gst-bar-legend { gap:10px; }
  .ct-gst-split-card { padding:12px 10px; }
}

/* 360px */
@media (max-width:360px) {
  .ct-gst-pill { padding:4px 8px; font-size:10px; }
  .ct-gst-bar { height:16px; }
  .ct-gst-bar-legend { flex-direction:column; align-items:flex-start; gap:4px; }
}



/* UNIT CONVERTER */
.ct-unit-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--ct-sp-xl)}
.ct-unit-cat{padding:8px 14px;font-size:12px;font-weight:700;font-family:var(--ct-font);color:var(--ct-text-secondary);background:var(--ct-input-bg);border:2px solid var(--ct-input-border);border-radius:24px;cursor:pointer;transition:all .25s ease;white-space:nowrap}
.ct-unit-cat:hover{border-color:var(--ct-primary-light);color:var(--ct-primary);transform:translateY(-2px);box-shadow:0 4px 12px rgba(99,102,241,.1)}
.ct-unit-cat-active,.ct-unit-cat-active:hover{background:linear-gradient(135deg,var(--ct-primary),var(--ct-primary-hover))!important;color:#fff!important;border-color:var(--ct-primary)!important;box-shadow:0 4px 14px var(--ct-primary-glow)!important}
.ct-unit-converter{display:flex;align-items:flex-start;gap:12px;margin-bottom:var(--ct-sp-md)}
.ct-unit-from-box,.ct-unit-to-box{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;padding:18px;background:var(--ct-input-bg);border:2px solid var(--ct-input-border);border-radius:var(--ct-r-lg);transition:border-color .3s ease}
.ct-unit-from-box:focus-within,.ct-unit-to-box:focus-within{border-color:var(--ct-primary);box-shadow:0 0 0 4px rgba(99,102,241,.1)}
.ct-unit-value-input{font-size:24px!important;font-weight:800!important;text-align:center!important;padding:12px!important;color:var(--ct-primary)!important}
.ct-unit-result-input{background:#fff!important;color:var(--ct-success)!important;cursor:default}
.ct-unit-swap{flex-shrink:0;width:44px;height:44px;border:2px solid var(--ct-input-border);border-radius:50%;background:#fff;color:var(--ct-primary);font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;font-family:var(--ct-font);padding:0;margin-top:42px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ct-unit-swap:hover{background:var(--ct-primary);color:#fff;border-color:var(--ct-primary);transform:rotate(180deg);box-shadow:0 4px 14px var(--ct-primary-glow)}
.ct-unit-answer{text-align:center;padding:var(--ct-sp-xl) var(--ct-sp-md);word-break:break-word}
.ct-unit-answer:empty{display:none}
.ct-unit-answer-label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:var(--ct-text-muted);margin-bottom:8px}
.ct-unit-answer-value{display:block;font-size:clamp(24px,6vw,42px);font-weight:900;color:var(--ct-primary);word-break:break-word;line-height:1.2}
.ct-unit-answer-sub{display:block;font-size:clamp(13px,2.5vw,16px);font-weight:600;color:var(--ct-text-secondary);margin-top:6px}
.ct-unit-all-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:var(--ct-sp-md)}
.ct-unit-all-card{padding:12px 10px;background:#fff;border:1px solid var(--ct-input-border);border-radius:var(--ct-r-sm);text-align:center;word-break:break-word;transition:transform .2s ease}
.ct-unit-all-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.06)}
.ct-unit-all-card-active{border-color:var(--ct-primary)!important;background:rgba(99,102,241,.04)!important}
.ct-unit-all-val{display:block;font-size:clamp(14px,2.5vw,18px);font-weight:800;color:var(--ct-text);word-break:break-word;font-family:'Courier New',monospace}
.ct-unit-all-name{display:block;font-size:10px;font-weight:700;color:var(--ct-text-muted);margin-top:3px;text-transform:uppercase;letter-spacing:.5px}
.ct-tool-section[data-tool="unit"] .ct-result-summary{word-break:break-word;font-size:clamp(12px,2.5vw,15px)}
.ct-tool-section[data-tool="unit"] .ct-detail-val{word-break:break-word;overflow-wrap:break-word}
@media(max-width:768px){.ct-unit-converter{flex-direction:column;align-items:stretch}.ct-unit-swap{align-self:center;margin-top:0;transform:rotate(90deg)}.ct-unit-swap:hover{transform:rotate(270deg)}.ct-unit-value-input{font-size:20px!important}.ct-unit-all-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.ct-unit-cat{padding:6px 10px;font-size:11px}.ct-tool-section[data-tool="unit"] .ct-detail-item{flex-direction:column;align-items:flex-start;gap:2px}.ct-tool-section[data-tool="unit"] .ct-detail-val{text-align:left;padding-left:28px}}
@media(max-width:480px){.ct-unit-from-box,.ct-unit-to-box{padding:14px}.ct-unit-value-input{font-size:18px!important}.ct-unit-all-grid{grid-template-columns:repeat(2,1fr);gap:6px}.ct-unit-all-val{font-size:13px}.ct-unit-cat{padding:5px 8px;font-size:10px}}
@media(max-width:360px){.ct-unit-all-grid{grid-template-columns:1fr 1fr;gap:5px}}

/* GPA CALCULATOR */
.ct-gpa-courses{display:flex;flex-direction:column;gap:8px}
.ct-gpa-row{display:grid;grid-template-columns:1fr 80px 100px 36px;gap:8px;align-items:end;padding:12px 14px;background:var(--ct-input-bg);border:1px solid var(--ct-input-border);border-radius:var(--ct-r-md);animation:ctFadeUp .25s var(--ct-ease)}
.ct-gpa-row .ct-form-group{margin:0}
.ct-gpa-row .ct-label{font-size:11px;margin-bottom:4px}
.ct-gpa-row .ct-input,.ct-gpa-row .ct-select{font-size:13px;padding:8px 10px}
.ct-gpa-del{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(239,68,68,.08);border:1.5px solid rgba(239,68,68,.2);border-radius:var(--ct-r-sm);color:var(--ct-danger);font-size:16px;cursor:pointer;transition:all .2s ease;font-family:var(--ct-font);padding:0}
.ct-gpa-del:hover{background:var(--ct-danger);color:#fff;border-color:var(--ct-danger)}
.ct-gpa-answer{text-align:center;padding:var(--ct-sp-xl) var(--ct-sp-md);word-break:break-word}
.ct-gpa-answer:empty{display:none}
.ct-gpa-answer-value{display:block;font-size:clamp(36px,8vw,56px);font-weight:900;line-height:1.1;background:linear-gradient(135deg,var(--ct-primary),var(--ct-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ct-gpa-answer-label{display:block;font-size:clamp(13px,2.5vw,16px);font-weight:700;color:var(--ct-text-secondary);margin-top:6px}
.ct-gpa-answer-badge{display:inline-block;padding:4px 16px;border-radius:20px;font-size:13px;font-weight:800;margin-top:8px}
.ct-gpa-badge-excellent{background:rgba(16,185,129,.1);color:#059669}
.ct-gpa-badge-good{background:rgba(59,130,246,.1);color:#2563eb}
.ct-gpa-badge-average{background:rgba(245,158,11,.1);color:#d97706}
.ct-gpa-badge-poor{background:rgba(239,68,68,.1);color:#dc2626}
.ct-tool-section[data-tool="gpa"] .ct-result-value{font-size:clamp(15px,3.5vw,34px);word-break:break-word;line-height:1.2;max-width:100%}
.ct-tool-section[data-tool="gpa"] .ct-result-card{min-width:0;overflow:hidden;word-break:break-word;padding:var(--ct-sp-md) var(--ct-sp-sm)}
.ct-tool-section[data-tool="gpa"] .ct-detail-val{word-break:break-word}
@media(max-width:768px){.ct-gpa-row{grid-template-columns:1fr 1fr;gap:6px}.ct-gpa-del{grid-column:span 2;justify-self:end}.ct-tool-section[data-tool="gpa"] .ct-result-grid{grid-template-columns:1fr!important}.ct-tool-section[data-tool="gpa"] .ct-detail-item{flex-direction:column;align-items:flex-start;gap:2px}.ct-tool-section[data-tool="gpa"] .ct-detail-val{text-align:left;padding-left:28px}}
@media(max-width:480px){.ct-gpa-row{grid-template-columns:1fr}.ct-gpa-del{grid-column:auto;justify-self:end}.ct-gpa-row .ct-input,.ct-gpa-row .ct-select{font-size:12px;padding:7px 8px}}


/* SALARY CALCULATOR */
.ct-sal-answer{text-align:center;padding:var(--ct-sp-xl) var(--ct-sp-md);word-break:break-word}
.ct-sal-answer:empty{display:none}
.ct-sal-answer-label{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:var(--ct-text-muted);margin-bottom:10px;padding:4px 16px;background:rgba(0,0,0,.03);border-radius:20px}
.ct-sal-answer-value{display:block;font-size:clamp(28px,7vw,48px);font-weight:900;line-height:1.1;background:linear-gradient(135deg,var(--ct-primary),var(--ct-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;word-break:break-word}
.ct-sal-answer-sub{display:block;font-size:clamp(13px,2.5vw,16px);font-weight:600;color:var(--ct-text-secondary);margin-top:6px;word-break:break-word}
.ct-sal-period-active{background:rgba(99,102,241,.06)!important}
.ct-sal-period-active td{color:var(--ct-primary)!important;font-weight:700!important}
.ct-tool-section[data-tool="salary"] .ct-result-value{font-size:clamp(15px,3.5vw,34px);word-break:break-word;line-height:1.2;max-width:100%}
.ct-tool-section[data-tool="salary"] .ct-result-card{min-width:0;overflow:hidden;word-break:break-word;padding:var(--ct-sp-md) var(--ct-sp-sm)}
.ct-tool-section[data-tool="salary"] .ct-detail-val{word-break:break-word;overflow-wrap:break-word}
@media(max-width:768px){.ct-tool-section[data-tool="salary"] .ct-result-grid{grid-template-columns:1fr!important}.ct-tool-section[data-tool="salary"] .ct-detail-item{flex-direction:column;align-items:flex-start;gap:2px}.ct-tool-section[data-tool="salary"] .ct-detail-val{text-align:left;padding-left:28px}}

/* ROMAN NUMERAL CONVERTER */
.ct-rom-panel{display:none}
.ct-rom-panel-active{display:block;animation:ctFadeUp .3s var(--ct-ease)}
.ct-rom-answer{text-align:center;padding:var(--ct-sp-xl) var(--ct-sp-md);word-break:break-word}
.ct-rom-answer:empty{display:none}
.ct-rom-answer-label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:var(--ct-text-muted);margin-bottom:10px}
.ct-rom-answer-value{display:block;font-size:clamp(32px,8vw,56px);font-weight:900;line-height:1.1;font-family:'Times New Roman',Georgia,serif;letter-spacing:4px;background:linear-gradient(135deg,#b45309,#d97706,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;word-break:break-word}
.ct-rom-answer-sub{display:block;font-size:clamp(14px,3vw,18px);font-weight:700;color:var(--ct-text-secondary);margin-top:8px}
.ct-rom-breakdown{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:var(--ct-sp-md)}
.ct-rom-brk-item{display:flex;flex-direction:column;align-items:center;padding:12px 16px;background:#fff;border:2px solid var(--ct-input-border);border-radius:var(--ct-r-md);transition:transform .2s ease;min-width:60px}
.ct-rom-brk-item:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.06)}
.ct-rom-brk-symbol{font-size:24px;font-weight:900;font-family:'Times New Roman',serif;color:#b45309;letter-spacing:2px}
.ct-rom-brk-value{font-size:12px;font-weight:700;color:var(--ct-text-secondary);margin-top:4px}
.ct-rom-brk-plus{display:flex;align-items:center;font-size:20px;font-weight:800;color:var(--ct-text-muted)}
.ct-rom-year-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--ct-sp-md)}
.ct-rom-year-pill{padding:7px 16px;font-size:13px;font-weight:700;font-family:var(--ct-font);color:var(--ct-text-secondary);background:var(--ct-input-bg);border:2px solid var(--ct-input-border);border-radius:24px;cursor:pointer;transition:all .25s ease}
.ct-rom-year-pill:hover{border-color:var(--ct-primary-light);color:var(--ct-primary);transform:translateY(-2px);box-shadow:0 4px 10px rgba(99,102,241,.1)}
.ct-tool-section[data-tool="roman"] .ct-result-value{font-size:clamp(15px,3.5vw,34px);word-break:break-word;line-height:1.2;max-width:100%}
.ct-tool-section[data-tool="roman"] .ct-result-card{min-width:0;overflow:hidden;word-break:break-word;padding:var(--ct-sp-md) var(--ct-sp-sm)}
.ct-tool-section[data-tool="roman"] .ct-detail-val{word-break:break-word;overflow-wrap:break-word}
@media(max-width:768px){.ct-rom-brk-item{padding:8px 12px;min-width:48px}.ct-rom-brk-symbol{font-size:20px}.ct-tool-section[data-tool="roman"] .ct-result-grid{grid-template-columns:1fr!important}.ct-tool-section[data-tool="roman"] .ct-detail-item{flex-direction:column;align-items:flex-start;gap:2px}.ct-tool-section[data-tool="roman"] .ct-detail-val{text-align:left;padding-left:28px}.ct-rom-year-pill{padding:5px 12px;font-size:12px}}
@media(max-width:480px){.ct-rom-brk-item{padding:6px 10px;min-width:40px}.ct-rom-brk-symbol{font-size:16px}.ct-rom-brk-value{font-size:10px}.ct-rom-brk-plus{font-size:16px}.ct-rom-year-pill{padding:4px 10px;font-size:11px}}

/* ----------------------------------------------------------
   DATE DIFFERENCE CALCULATOR — FULLY RESPONSIVE
   ---------------------------------------------------------- */
.ct-dd-panel{display:none}
.ct-dd-panel-active{display:block;animation:ctFadeUp .3s var(--ct-ease)}

.ct-dd-dates{display:flex;align-items:flex-start;gap:12px}
.ct-dd-date-box{flex:1;min-width:0;padding:18px;background:var(--ct-input-bg);border:2px solid var(--ct-input-border);border-radius:var(--ct-r-lg);display:flex;flex-direction:column;gap:8px;transition:border-color .3s ease,box-shadow .3s ease}
.ct-dd-date-box:focus-within{border-color:var(--ct-primary);box-shadow:0 0 0 4px rgba(99,102,241,.1)}
.ct-dd-date-info{font-size:12px;font-weight:600;color:var(--ct-text-muted);min-height:18px;word-break:break-word}
.ct-dd-swap-col{display:flex;align-items:center;padding-top:30px;flex-shrink:0}
.ct-dd-swap{width:44px;height:44px;border:2px solid var(--ct-input-border);border-radius:50%;background:#fff;color:var(--ct-primary);font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;font-family:var(--ct-font);padding:0;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ct-dd-swap:hover{background:var(--ct-primary);color:#fff;border-color:var(--ct-primary);transform:rotate(180deg);box-shadow:0 4px 14px var(--ct-primary-glow)}
.ct-dd-incl-toggle{padding:10px 16px;background:var(--ct-input-bg);border-radius:var(--ct-r-sm);display:inline-flex;border:1px solid var(--ct-input-border)}

.ct-dd-wk-checks{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ct-dd-wk-chk{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--ct-input-bg);border:2px solid var(--ct-input-border);border-radius:var(--ct-r-sm);cursor:pointer;font-size:13px;font-weight:700;color:var(--ct-text-secondary);user-select:none;transition:all .2s ease}
.ct-dd-wk-chk:hover{border-color:var(--ct-primary-light)}
.ct-dd-wk-chk input{accent-color:var(--ct-primary);width:16px;height:16px;cursor:pointer}
.ct-dd-wk-chk input:checked+span{color:var(--ct-danger);text-decoration:line-through}

.ct-dd-answer{text-align:center;padding:var(--ct-sp-xl) var(--ct-sp-md);word-break:break-word;overflow-wrap:break-word}
.ct-dd-answer:empty{display:none}
.ct-dd-answer-label{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:var(--ct-text-muted);margin-bottom:10px;padding:4px 16px;background:rgba(0,0,0,.03);border-radius:20px}
.ct-dd-answer-value{display:block;font-size:clamp(26px,6vw,44px);font-weight:900;line-height:1.15;background:linear-gradient(135deg,var(--ct-primary),var(--ct-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;word-break:break-word}
.ct-dd-answer-sub{display:block;font-size:clamp(13px,2.5vw,16px);font-weight:600;color:var(--ct-text-secondary);margin-top:8px;word-break:break-word}

.ct-dd-conv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:var(--ct-sp-md)}
.ct-dd-conv-card{padding:14px 10px;background:#fff;border:1px solid var(--ct-input-border);border-radius:var(--ct-r-sm);text-align:center;transition:transform .2s ease;word-break:break-word;overflow:hidden}
.ct-dd-conv-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.06)}
.ct-dd-conv-val{display:block;font-size:clamp(15px,3vw,20px);font-weight:800;color:var(--ct-primary);word-break:break-word}
.ct-dd-conv-lbl{display:block;font-size:10px;font-weight:700;color:var(--ct-text-muted);text-transform:uppercase;letter-spacing:.8px;margin-top:4px}

.ct-dd-wkday-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;min-height:110px;margin-top:var(--ct-sp-md)}
.ct-dd-wk-col{display:flex;flex-direction:column;align-items:center;gap:4px}
.ct-dd-wk-barw{width:100%;height:80px;display:flex;align-items:flex-end;justify-content:center}
.ct-dd-wk-bar{width:100%;max-width:36px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--ct-primary-light),var(--ct-primary));transition:height .8s cubic-bezier(.4,0,.2,1);min-height:4px}
.ct-dd-wk-bar-we{background:linear-gradient(180deg,#fbbf24,#d97706)}
.ct-dd-wk-cnt{font-size:clamp(10px,2vw,13px);font-weight:800;color:var(--ct-text)}
.ct-dd-wk-nm{font-size:clamp(9px,1.8vw,11px);font-weight:700;color:var(--ct-text-muted);text-transform:uppercase}

.ct-tool-section[data-tool="datediff"] .ct-result-value{font-size:clamp(15px,3.5vw,38px);word-break:break-word;overflow-wrap:break-word;line-height:1.2;max-width:100%;padding:0 2px}
.ct-tool-section[data-tool="datediff"] .ct-result-card{min-width:0;overflow:hidden;padding:var(--ct-sp-md) var(--ct-sp-sm);word-break:break-word}
.ct-tool-section[data-tool="datediff"] .ct-result-summary{word-break:break-word;overflow-wrap:break-word;font-size:clamp(12px,2.5vw,15px);line-height:1.7}
.ct-tool-section[data-tool="datediff"] .ct-detail-val{word-break:break-word;overflow-wrap:break-word}

@media(max-width:768px){
  .ct-dd-dates{flex-direction:column;align-items:stretch}
  .ct-dd-swap-col{padding-top:0;align-self:center}
  .ct-dd-swap{transform:rotate(90deg)}
  .ct-dd-swap:hover{transform:rotate(270deg)}
  .ct-dd-date-box{padding:14px}
  .ct-tool-section[data-tool="datediff"] .ct-result-grid{grid-template-columns:1fr!important;gap:var(--ct-sp-sm)}
  .ct-dd-conv-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .ct-dd-wkday-bars{gap:4px;min-height:90px}
  .ct-dd-wk-barw{height:60px}
  .ct-tool-section[data-tool="datediff"] .ct-detail-item{flex-direction:column;align-items:flex-start;gap:2px}
  .ct-tool-section[data-tool="datediff"] .ct-detail-val{text-align:left;padding-left:28px}
  .ct-dd-incl-toggle{width:100%}
  .ct-dd-wk-chk{padding:6px 10px;font-size:12px}
}
@media(max-width:480px){
  .ct-dd-date-box{padding:12px}
  .ct-dd-conv-grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .ct-dd-conv-val{font-size:15px}
  .ct-dd-wkday-bars{min-height:70px}
  .ct-dd-wk-barw{height:50px}
  .ct-dd-wk-bar{max-width:28px}
  .ct-dd-wk-chk{padding:5px 8px;font-size:11px}
  .ct-dd-wk-chk input{width:14px;height:14px}
}
@media(max-width:360px){
  .ct-dd-conv-grid{grid-template-columns:1fr 1fr;gap:4px}
  .ct-dd-wk-bar{max-width:22px}
  .ct-dd-wkday-bars{gap:3px;min-height:60px}
  .ct-dd-wk-barw{height:40px}
}

/* ----------------------------------------------------------
   DISCOUNT CALCULATOR — FULLY RESPONSIVE
   ---------------------------------------------------------- */
.ct-disc-modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;margin-bottom:var(--ct-sp-xl)}
.ct-disc-mode{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 6px 12px;background:var(--ct-input-bg);border:2px solid var(--ct-input-border);border-radius:var(--ct-r-lg);cursor:pointer;transition:all .3s ease;font-family:var(--ct-font);user-select:none;text-align:center;position:relative;overflow:hidden}
.ct-disc-mode::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(99,102,241,.07),rgba(236,72,153,.04));opacity:0;transition:opacity .3s ease}
.ct-disc-mode:hover{border-color:var(--ct-primary-light);transform:translateY(-3px);box-shadow:0 8px 22px rgba(99,102,241,.12)}
.ct-disc-mode:hover::before{opacity:1}
.ct-disc-mode-active,.ct-disc-mode-active:hover{border-color:var(--ct-primary)!important;background:rgba(99,102,241,.04)!important;box-shadow:0 6px 24px var(--ct-primary-glow)!important;transform:translateY(-3px)!important}
.ct-disc-mode-active::before{opacity:1!important}
.ct-disc-mode-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(99,102,241,.04));font-size:18px;position:relative;z-index:1;transition:all .3s ease}
.ct-disc-mode-active .ct-disc-mode-icon{background:linear-gradient(135deg,var(--ct-primary),var(--ct-primary-hover));box-shadow:0 4px 12px var(--ct-primary-glow)}
.ct-disc-mode-name{font-size:11px;font-weight:700;color:var(--ct-text-secondary);position:relative;z-index:1}
.ct-disc-mode-active .ct-disc-mode-name{color:var(--ct-primary);font-weight:800}

.ct-disc-panel{display:none}.ct-disc-panel-active{display:block;animation:ctFadeUp .3s var(--ct-ease)}

.ct-disc-qp-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--ct-sp-sm);padding:12px 14px;background:var(--ct-input-bg);border:1px solid var(--ct-input-border);border-radius:var(--ct-r-md)}
.ct-disc-qp{padding:7px 16px;font-size:13px;font-weight:700;font-family:var(--ct-font);color:var(--ct-text-secondary);background:#fff;border:2px solid var(--ct-input-border);border-radius:24px;cursor:pointer;transition:all .25s ease}
.ct-disc-qp:hover{border-color:var(--ct-primary-light);color:var(--ct-primary);transform:translateY(-2px);box-shadow:0 4px 10px rgba(99,102,241,.1)}
.ct-disc-qp-active,.ct-disc-qp-active:hover{background:linear-gradient(135deg,var(--ct-primary),var(--ct-primary-hover))!important;color:#fff!important;border-color:var(--ct-primary)!important;box-shadow:0 4px 14px var(--ct-primary-glow)!important}

.ct-disc-cmp-wrap{display:flex;align-items:stretch;gap:14px}
.ct-disc-deal{flex:1;min-width:0;padding:20px;background:#fff;border:2px solid var(--ct-input-border);border-radius:var(--ct-r-xl);display:flex;flex-direction:column;gap:14px;box-shadow:0 4px 14px rgba(0,0,0,.04);position:relative;overflow:hidden}
.ct-disc-deal::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--ct-primary),var(--ct-primary-light))}
.ct-disc-deal:nth-child(3)::before{background:linear-gradient(90deg,var(--ct-secondary),#f472b6)}
.ct-disc-deal-tag{display:inline-flex;align-self:flex-start;padding:4px 14px;font-size:12px;font-weight:800;border-radius:24px;background:linear-gradient(135deg,var(--ct-primary),var(--ct-primary-hover));color:#fff;letter-spacing:.8px;text-transform:uppercase;box-shadow:0 2px 8px var(--ct-primary-glow)}
.ct-disc-deal-tag-b{background:linear-gradient(135deg,var(--ct-secondary),#be185d);box-shadow:0 2px 8px rgba(236,72,153,.3)}
.ct-disc-vs{display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:var(--ct-text-muted);flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--ct-input-bg);border:2px solid var(--ct-input-border);align-self:center;box-shadow:0 2px 8px rgba(0,0,0,.06)}

.ct-disc-answer{text-align:center;padding:var(--ct-sp-xl) var(--ct-sp-md);word-break:break-word;background:linear-gradient(180deg,rgba(16,185,129,.03),transparent);border-radius:var(--ct-r-lg);margin-bottom:var(--ct-sp-md)}
.ct-disc-answer:empty{display:none}
.ct-disc-answer-label{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:var(--ct-text-muted);margin-bottom:8px;padding:4px 16px;background:rgba(0,0,0,.03);border-radius:20px}
.ct-disc-answer-old{display:block;font-size:clamp(16px,3vw,22px);font-weight:600;color:var(--ct-danger);text-decoration:line-through;opacity:.7;margin-bottom:4px}
.ct-disc-answer-new{display:block;font-size:clamp(28px,7vw,48px);font-weight:900;line-height:1.1;background:linear-gradient(135deg,#10b981,#059669);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;word-break:break-word}
.ct-disc-answer-sub{display:block;font-size:clamp(13px,2.5vw,16px);font-weight:600;color:var(--ct-text-secondary);margin-top:6px;word-break:break-word}

.ct-disc-badge{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto var(--ct-sp-lg);padding:12px 24px;background:linear-gradient(135deg,rgba(16,185,129,.06),rgba(5,150,105,.1));border:2px solid rgba(16,185,129,.2);border-radius:50px;font-size:clamp(13px,2.5vw,16px);font-weight:800;color:#059669;width:fit-content;max-width:100%;word-break:break-word;box-shadow:0 4px 14px rgba(16,185,129,.1);animation:ctDiscPop .5s cubic-bezier(.175,.885,.32,1.275)}
.ct-disc-badge[hidden]{display:none}
@keyframes ctDiscPop{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}

.ct-disc-bar-wrap{margin:var(--ct-sp-lg) 0;padding:16px;background:var(--ct-input-bg);border:1px solid var(--ct-input-border);border-radius:var(--ct-r-md)}
.ct-disc-bar-wrap[hidden]{display:none}
.ct-disc-bar{display:flex;width:100%;height:26px;border-radius:13px;overflow:hidden;box-shadow:inset 0 2px 5px rgba(0,0,0,.08)}
.ct-disc-bar-pay{height:100%;background:linear-gradient(135deg,#818cf8,#6366f1,#4f46e5);transition:flex-basis 1s cubic-bezier(.4,0,.2,1);flex-basis:0%;display:flex;align-items:center;justify-content:center;font-size:clamp(9px,1.8vw,11px);font-weight:800;color:#fff;overflow:hidden;min-width:0}
.ct-disc-bar-save{height:100%;background:linear-gradient(135deg,#34d399,#10b981,#059669);transition:flex-basis 1s cubic-bezier(.4,0,.2,1);flex-basis:0%;display:flex;align-items:center;justify-content:center;font-size:clamp(9px,1.8vw,11px);font-weight:800;color:#fff;overflow:hidden;min-width:0}
.ct-disc-bar-leg{display:flex;justify-content:center;gap:20px;margin-top:10px;flex-wrap:wrap}
.ct-disc-bar-leg>span{display:inline-flex;align-items:center;gap:6px;font-size:clamp(10px,2vw,13px);font-weight:700;color:var(--ct-text-secondary)}
.ct-disc-dot{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.ct-disc-dot-pay{background:linear-gradient(135deg,#818cf8,#4f46e5)}
.ct-disc-dot-save{background:linear-gradient(135deg,#34d399,#059669)}

.ct-disc-winner{margin:var(--ct-sp-lg) 0;padding:18px 22px;border-radius:var(--ct-r-lg);text-align:center;font-size:clamp(14px,2.8vw,17px);font-weight:800;word-break:break-word}
.ct-disc-winner[hidden]{display:none}.ct-disc-winner:empty{display:none}
.ct-disc-winner-a{background:rgba(99,102,241,.08);color:var(--ct-primary);border:2px solid rgba(99,102,241,.2)}
.ct-disc-winner-b{background:rgba(236,72,153,.08);color:#be185d;border:2px solid rgba(236,72,153,.2)}
.ct-disc-winner-tie{background:rgba(245,158,11,.08);color:#b45309;border:2px solid rgba(245,158,11,.2)}

.ct-tool-section[data-tool="discount"] .ct-result-value{font-size:clamp(15px,3.5vw,34px);word-break:break-word;overflow-wrap:break-word;line-height:1.2;max-width:100%;padding:0 2px}
.ct-tool-section[data-tool="discount"] .ct-result-card{min-width:0;overflow:hidden;padding:var(--ct-sp-md) var(--ct-sp-sm);word-break:break-word}
.ct-tool-section[data-tool="discount"] .ct-result-summary{word-break:break-word;overflow-wrap:break-word;font-size:clamp(12px,2.5vw,15px);line-height:1.7}
.ct-tool-section[data-tool="discount"] .ct-detail-val{word-break:break-word;overflow-wrap:break-word}

@media(max-width:768px){.ct-disc-modes{grid-template-columns:repeat(3,1fr);gap:6px}.ct-disc-mode{padding:10px 4px 8px}.ct-disc-mode-icon{width:34px;height:34px;font-size:15px}.ct-disc-mode-name{font-size:9px}.ct-disc-cmp-wrap{flex-direction:column}.ct-disc-vs{align-self:center}.ct-disc-deal{padding:16px}.ct-tool-section[data-tool="discount"] .ct-result-grid{grid-template-columns:1fr!important;gap:var(--ct-sp-sm)}.ct-tool-section[data-tool="discount"] .ct-detail-item{flex-direction:column;align-items:flex-start;gap:2px}.ct-tool-section[data-tool="discount"] .ct-detail-val{text-align:left;padding-left:28px}.ct-disc-bar{height:22px}.ct-disc-qp{padding:6px 12px;font-size:12px}}
@media(max-width:480px){.ct-disc-modes{grid-template-columns:repeat(3,1fr);gap:5px}.ct-disc-mode{padding:8px 3px 6px;gap:4px}.ct-disc-mode-icon{width:28px;height:28px;font-size:13px;border-radius:8px}.ct-disc-mode-name{font-size:8px}.ct-disc-deal{padding:14px}.ct-disc-bar{height:18px}.ct-disc-qp{padding:5px 10px;font-size:11px}.ct-disc-badge{padding:8px 16px;font-size:12px}}
@media(max-width:360px){.ct-disc-modes{grid-template-columns:repeat(2,1fr)}.ct-disc-bar{height:16px}.ct-disc-bar-leg{flex-direction:column;align-items:flex-start;gap:4px}}

/* ----------------------------------------------------------
   FRACTION CALCULATOR — FULLY RESPONSIVE
   ---------------------------------------------------------- */
.ct-fr-panel{display:none}.ct-fr-panel-active{display:block;animation:ctFadeUp .3s var(--ct-ease)}

.ct-fr-eq{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:24px 16px;background:var(--ct-input-bg);border:2px solid var(--ct-input-border);border-radius:var(--ct-r-xl);margin-bottom:var(--ct-sp-md)}
.ct-fr-eq-center{justify-content:center}
.ct-fr-inp-grp{display:flex;align-items:center;gap:8px;flex-shrink:0}
.ct-fr-box{display:flex;flex-direction:column;align-items:center}
.ct-fr-box-lg .ct-fr-num,.ct-fr-box-lg .ct-fr-den{width:120px!important}
.ct-fr-num,.ct-fr-den{width:80px!important;height:42px!important;text-align:center!important;font-size:22px!important;font-weight:800!important;padding:6px 8px!important;border:2px solid var(--ct-primary-light)!important;color:var(--ct-primary)!important;background:#fff!important}
.ct-fr-num{border-radius:var(--ct-r-md) var(--ct-r-md) 0 0!important;border-bottom:none!important}
.ct-fr-den{border-radius:0 0 var(--ct-r-md) var(--ct-r-md)!important;border-top:none!important}
.ct-fr-num:focus,.ct-fr-den:focus{border-color:var(--ct-primary)!important;box-shadow:0 0 0 3px rgba(99,102,241,.12)!important;z-index:2}
.ct-fr-line{width:100%;height:3px;background:linear-gradient(90deg,var(--ct-primary),var(--ct-primary-light));border-radius:2px;position:relative;z-index:1}

.ct-fr-ops{display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.ct-fr-op{width:44px;height:38px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;font-family:var(--ct-font);color:var(--ct-text-secondary);background:#fff;border:2px solid var(--ct-input-border);border-radius:var(--ct-r-sm);cursor:pointer;transition:all .25s ease;padding:0;line-height:1}
.ct-fr-op:hover{border-color:var(--ct-primary-light);color:var(--ct-primary);transform:scale(1.08)}
.ct-fr-op-active,.ct-fr-op-active:hover{background:linear-gradient(135deg,var(--ct-primary),var(--ct-primary-hover))!important;color:#fff!important;border-color:var(--ct-primary)!important;box-shadow:0 3px 10px var(--ct-primary-glow)!important;transform:scale(1.08)!important}

.ct-fr-cmp-sym{width:50px;height:50px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;color:var(--ct-primary);background:rgba(99,102,241,.08);border:2px solid rgba(99,102,241,.15);border-radius:50%;flex-shrink:0}

.ct-fr-answer{text-align:center;padding:var(--ct-sp-xl) var(--ct-sp-md);word-break:break-word}
.ct-fr-answer:empty{display:none}
.ct-fr-answer-label{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:2px;color:var(--ct-text-muted);margin-bottom:12px;padding:4px 16px;background:rgba(0,0,0,.03);border-radius:20px}
.ct-fr-answer-main{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}

.ct-fr-disp{display:inline-flex;flex-direction:column;align-items:center}
.ct-fr-disp-num,.ct-fr-disp-den{font-size:clamp(28px,6vw,44px);font-weight:900;line-height:1.1;background:linear-gradient(135deg,var(--ct-primary),var(--ct-primary-hover));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;padding:0 8px}
.ct-fr-disp-line{width:100%;height:4px;background:linear-gradient(90deg,var(--ct-primary),var(--ct-primary-light));border-radius:2px;margin:2px 0}
.ct-fr-disp-eq{font-size:clamp(24px,5vw,36px);font-weight:300;color:var(--ct-text-muted)}
.ct-fr-answer-sub{display:block;font-size:clamp(13px,2.5vw,16px);font-weight:600;color:var(--ct-text-secondary);margin-top:8px}

.ct-fr-step-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--ct-primary);color:#fff;font-size:12px;font-weight:800;flex-shrink:0;margin-right:6px}

.ct-tool-section[data-tool="fraction"] .ct-result-value{font-size:clamp(15px,3.5vw,34px);word-break:break-word;overflow-wrap:break-word;line-height:1.2;max-width:100%}
.ct-tool-section[data-tool="fraction"] .ct-result-card{min-width:0;overflow:hidden;word-break:break-word;padding:var(--ct-sp-md) var(--ct-sp-sm)}
.ct-tool-section[data-tool="fraction"] .ct-result-summary{word-break:break-word;font-size:clamp(12px,2.5vw,15px)}
.ct-tool-section[data-tool="fraction"] .ct-detail-val{word-break:break-word;overflow-wrap:break-word}

@media(max-width:768px){.ct-fr-eq{gap:10px;padding:16px 10px}.ct-fr-num,.ct-fr-den{width:65px!important;height:36px!important;font-size:18px!important}.ct-fr-box-lg .ct-fr-num,.ct-fr-box-lg .ct-fr-den{width:100px!important}.ct-fr-op{width:38px;height:32px;font-size:17px}.ct-fr-cmp-sym{width:40px;height:40px;font-size:22px}
.ct-tool-section[data-tool="fraction"] .ct-result-grid{grid-template-columns:1fr!important}.ct-tool-section[data-tool="fraction"] .ct-detail-item{flex-direction:column;align-items:flex-start;gap:2px}.ct-tool-section[data-tool="fraction"] .ct-detail-val{text-align:left;padding-left:28px}}
@media(max-width:480px){.ct-fr-eq{gap:8px;padding:12px 8px}.ct-fr-num,.ct-fr-den{width:55px!important;height:32px!important;font-size:16px!important;padding:4px 6px!important}.ct-fr-box-lg .ct-fr-num,.ct-fr-box-lg .ct-fr-den{width:80px!important}.ct-fr-op{width:34px;height:28px;font-size:15px}.ct-fr-line{height:2px}.ct-fr-cmp-sym{width:34px;height:34px;font-size:18px}}
@media(max-width:360px){.ct-fr-num,.ct-fr-den{width:48px!important;height:28px!important;font-size:14px!important}.ct-fr-op{width:30px;height:26px;font-size:14px}.ct-fr-eq{gap:6px;padding:10px 6px}}