/* ============================================================
   Piraya Tools — Dark-mode stylesheet
   Pure CSS, no external dependencies.
   ============================================================ */

/* ----------------------------------------------------------
   Design tokens
   ---------------------------------------------------------- */
:root {
   /* Surfaces */
   --bg-void:       #07070d;
   --bg-base:       #0c0c14;
   --bg-surface:    #12121e;
   --bg-card:       #181828;
   --bg-card-hover: #1f1f34;
   --bg-input:      #14141f;

   /* Accent */
   --accent:        #4d8eff;
   --accent-glow:   rgba(77, 142, 255, .15);
   --accent-dim:    #3566c0;
   --accent-text:   #7aafff;

   /* Text */
   --text:          #d8dae0;
   --text-muted:    #7c7e92;
   --text-heading:  #eef0f6;

   /* Borders & misc */
   --border:        #222236;
   --border-subtle: #1a1a2c;
   --radius:        10px;
   --radius-sm:     6px;

   /* Layout */
   --header-h:      72px;
   --tower-w:       160px;
   --content-max:   960px;

   /* Ad sizing */
   --banner-h:      90px;
   --tower-h:       600px;
   --mobile-banner-h: 50px;

   /* Transitions */
   --ease:          cubic-bezier(.22, .61, .36, 1);
}


/* ----------------------------------------------------------
   Reset & base
   ---------------------------------------------------------- */
*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   scroll-behavior: smooth;
   scroll-padding-top: calc(var(--header-h) + 24px);
   overflow-x: hidden;
}

body {
   font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
                "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   background: var(--bg-void);
   color: var(--text);
   line-height: 1.6;
   min-height: 100vh;
   overflow-x: hidden;
}


/* ----------------------------------------------------------
   Typography
   ---------------------------------------------------------- */
h1, h2, h3, h4 {
   color: var(--text-heading);
   font-weight: 700;
   line-height: 1.25;
}

h1 { font-size: 2rem;    letter-spacing: -.03em; }
h2 { font-size: 1.35rem; letter-spacing: -.02em; }
h3 { font-size: 1.05rem; letter-spacing: -.01em; }

a {
   color: var(--accent-text);
   text-decoration: none;
   transition: color .2s var(--ease);
}

a:hover { color: var(--accent); }


/* ----------------------------------------------------------
   Site header
   ---------------------------------------------------------- */
.site-header {
   position: sticky;
   top: 0;
   z-index: 100;
   height: var(--header-h);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 24px;
   background: rgba(7, 7, 13, .85);
   backdrop-filter: blur(14px) saturate(1.4);
   -webkit-backdrop-filter: blur(14px) saturate(1.4);
   border-bottom: 1px solid var(--border-subtle);
}

.site-header__logo {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 1.25rem;
   font-weight: 800;
   letter-spacing: -.04em;
   color: var(--text-heading);
}

.site-header__icon {
   height: 56px;
   width: auto;
}


/* ----------------------------------------------------------
   Hero (home page)
   ---------------------------------------------------------- */
.hero {
   text-align: center;
   padding: 72px 24px 48px;
   max-width: 680px;
   margin: 0 auto;
}

.hero h1 {
   font-size: 2.5rem;
   margin-bottom: 16px;
}

.hero h1 span {
   background: linear-gradient(135deg, var(--accent), #9b6dff);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.hero p {
   font-size: 1.1rem;
   color: var(--text-muted);
   max-width: 500px;
   margin: 0 auto;
}


/* ----------------------------------------------------------
   Tool section (home page)
   ---------------------------------------------------------- */
.tool-sections {
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 24px 80px;
}

.tool-section {
   margin-bottom: 48px;
}

.tool-section__heading {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 20px;
   padding-bottom: 12px;
   border-bottom: 1px solid var(--border);
}

.tool-section__icon {
   width: 32px;
   height: 32px;
   border-radius: var(--radius-sm);
   display: grid;
   place-items: center;
   font-size: 1rem;
   flex-shrink: 0;
}

.tool-section__icon--finance  { background: rgba(52, 211, 153, .12); color: #34d399; }
.tool-section__icon--pdf      { background: rgba(251, 113, 133, .12); color: #fb7185; }
.tool-section__icon--text     { background: rgba(251, 191, 36, .12);  color: #fbbf24; }
.tool-section__icon--dev      { background: rgba(129, 140, 248, .12); color: #818cf8; }
.tool-section__icon--image    { background: rgba(244, 114, 182, .12); color: #f472b6; }
.tool-section__icon--convert  { background: rgba(56, 189, 248, .12);  color: #38bdf8; }

.tool-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 14px;
}

.tool-card {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   padding: 18px;
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   transition: background .25s var(--ease),
               border-color .25s var(--ease),
               transform .25s var(--ease);
   cursor: pointer;
   text-decoration: none;
   color: inherit;
}

.tool-card:hover {
   background: var(--bg-card-hover);
   border-color: var(--accent-dim);
   transform: translateY(-2px);
   color: inherit;
}

.tool-card__icon {
   width: 40px;
   height: 40px;
   border-radius: var(--radius-sm);
   display: grid;
   place-items: center;
   font-size: 1.15rem;
   flex-shrink: 0;
   background: var(--bg-surface);
   border: 1px solid var(--border);
}

.tool-card__text h3 {
   margin-bottom: 4px;
}

.tool-card__text p {
   font-size: .8rem;
   color: var(--text-muted);
   line-height: 1.45;
}


/* ----------------------------------------------------------
   Tool page — layout with ad towers
   ---------------------------------------------------------- */
.tool-layout {
   display: grid;
   grid-template-columns: var(--tower-w) minmax(0, 1fr) var(--tower-w);
   grid-template-rows: auto 1fr;
   gap: 0 20px;
   max-width: calc(var(--content-max) + var(--tower-w) * 2 + 40px);
   margin: 0 auto;
   padding: 24px 24px 80px;
}

/* Top banner spans full width */
.ad-banner-top {
   grid-column: 1 / -1;
   margin-bottom: 24px;
}

/* Left tower */
.ad-tower-left {
   grid-column: 1;
   grid-row: 2;
   position: sticky;
   top: calc(var(--header-h) + 24px);
   align-self: start;
   height: fit-content;
}

/* Content area */
.tool-content {
   grid-column: 2;
   grid-row: 2;
   min-width: 0;
}

/* Right tower */
.ad-tower-right {
   grid-column: 3;
   grid-row: 2;
   position: sticky;
   top: calc(var(--header-h) + 24px);
   align-self: start;
   height: fit-content;
}


/* ----------------------------------------------------------
   Tool page — content card
   ---------------------------------------------------------- */
.tool-page-header {
   margin-bottom: 28px;
}

.tool-page-header h1 {
   margin-bottom: 8px;
}

.tool-page-header p {
   color: var(--text-muted);
   font-size: .95rem;
}

.tool-body {
   background: var(--bg-surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 32px;
   min-height: 400px;
}


/* ----------------------------------------------------------
   Ad placeholders & AdSense containers
   ---------------------------------------------------------- */
.ad-slot {
   background: var(--bg-card);
   border: 1px dashed var(--border);
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text-muted);
   font-size: .7rem;
   text-transform: uppercase;
   letter-spacing: .08em;
   overflow: hidden;
}

.ad-slot--banner {
   width: 100%;
   min-height: var(--banner-h);
}

.ad-slot--tower {
   width: var(--tower-w);
   min-height: var(--tower-h);
}

/* Hide placeholder text when an ad is loaded */
.ad-slot ins.adsbygoogle[data-ad-status="filled"] ~ .ad-slot__label {
   display: none;
}

/* Mobile sticky banner */
.ad-mobile-sticky {
   display: none;
}


/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */
.site-footer {
   border-top: 1px solid var(--border);
   padding: 32px 24px;
   text-align: center;
   font-size: .8rem;
   color: var(--text-muted);
}


/* ----------------------------------------------------------
   Breadcrumb
   ---------------------------------------------------------- */
.breadcrumb {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: .8rem;
   color: var(--text-muted);
   margin-bottom: 20px;
}

.breadcrumb a {
   color: var(--text-muted);
}

.breadcrumb a:hover {
   color: var(--accent-text);
}

.breadcrumb__sep {
   opacity: .4;
}


/* ----------------------------------------------------------
   Responsive — tablet (no towers)
   ---------------------------------------------------------- */
@media (max-width: 1100px) {
   .tool-layout {
      grid-template-columns: 1fr;
   }

   .ad-tower-left,
   .ad-tower-right {
      display: none;
   }

   .ad-banner-top {
      grid-column: 1;
   }

   .tool-content {
      grid-column: 1;
      grid-row: 2;
   }
}


/* ----------------------------------------------------------
   Responsive — mobile
   ---------------------------------------------------------- */
@media (max-width: 640px) {
   :root {
      --header-h: 56px;
   }

   .hero {
      padding: 48px 20px 32px;
   }

   .hero h1 {
      font-size: 1.75rem;
   }

   .tool-grid {
      grid-template-columns: 1fr;
   }

   .tool-body {
      padding: 20px;
   }

   /* Mobile tool page: hide header, footer, desktop banner;
      show sticky ad at the very top */
   body:has(.tool-layout) .site-header,
   body:has(.tool-layout) .site-footer {
      display: none;
   }

   .ad-banner-top {
      display: none;
   }

   .ad-mobile-sticky {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 90;
      padding: 0;
   }

   .ad-mobile-sticky .ad-slot--mobile {
      width: 100%;
      min-height: var(--mobile-banner-h);
      border-radius: 0;
      border-left: none;
      border-right: none;
   }

   /* Push content below sticky ad */
   .tool-layout {
      padding-top: calc(var(--mobile-banner-h) + 24px);
   }
}


/* ==========================================================
   Shared tool calculator styles
   Used by: Compound Interest (ci-), Fixed Ratio (fr-)
   ========================================================== */

/* -- Form layout -- */
.ci-calculator,
.fr-calculator {
   display: flex;
   flex-direction: column;
   gap: 32px;
}

.ci-form,
.fr-form {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 16px;
}

.fr-form {
   grid-template-columns: 1fr 1fr;
}

.ci-field label,
.fr-field label {
   display: block;
   font-size: .78rem;
   font-weight: 600;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: .05em;
   margin-bottom: 6px;
}

.ci-input-wrap,
.fr-input-wrap {
   position: relative;
   display: flex;
   align-items: center;
}

.ci-input-wrap input,
.ci-input-wrap select,
.fr-input-wrap input,
.fr-input-wrap select {
   width: 100%;
   height: 44px;
   padding: 0 14px;
   background: var(--bg-input);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   color: var(--text-heading);
   font-size: .95rem;
   font-family: inherit;
   outline: none;
   transition: border-color .2s var(--ease);
   -moz-appearance: textfield;
}

.ci-input-wrap input::-webkit-inner-spin-button,
.ci-input-wrap input::-webkit-outer-spin-button,
.fr-input-wrap input::-webkit-inner-spin-button,
.fr-input-wrap input::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.ci-input-wrap input:focus,
.ci-input-wrap select:focus,
.fr-input-wrap input:focus,
.fr-input-wrap select:focus {
   border-color: var(--accent);
}

.ci-input-wrap select,
.fr-input-wrap select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   padding-right: 36px;
}

/* Pure CSS chevron — avoids data: URI blocked by CSP */
.ci-input-wrap:has(select)::after,
.fr-input-wrap:has(select)::after {
   content: "";
   position: absolute;
   right: 16px;
   top: 50%;
   width: 7px;
   height: 7px;
   border-right: 2px solid var(--text-muted);
   border-bottom: 2px solid var(--text-muted);
   transform: translateY(-65%) rotate(45deg);
   pointer-events: none;
}

/* Currency prefix */
.ci-input-wrap--currency .ci-input-prefix,
.fr-input-wrap--currency .fr-input-prefix {
   position: absolute;
   left: 14px;
   color: var(--text-muted);
   font-size: .9rem;
   pointer-events: none;
   z-index: 1;
}
.ci-input-wrap--currency input,
.fr-input-wrap--currency input {
   padding-left: 30px;
}

/* Unit suffix */
.ci-input-wrap--suffix .ci-input-suffix,
.fr-input-wrap--suffix .fr-input-suffix {
   position: absolute;
   right: 14px;
   color: var(--text-muted);
   font-size: .85rem;
   pointer-events: none;
}
.ci-input-wrap--suffix input,
.fr-input-wrap--suffix input {
   padding-right: 52px;
}


/* -- Summary cards -- */
.ci-summary,
.fr-summary {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 14px;
}

.ci-summary-card,
.fr-summary-card {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 20px;
   text-align: center;
}

.ci-summary-card--total,
.fr-summary-card--accent {
   border-color: var(--accent-dim);
   background: linear-gradient(135deg, rgba(77, 142, 255, .06), rgba(155, 109, 255, .06));
}

.ci-summary-card__label,
.fr-summary-card__label {
   display: block;
   font-size: .72rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--text-muted);
   margin-bottom: 8px;
}

.ci-summary-card__value,
.fr-summary-card__value {
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--text-heading);
   letter-spacing: -.02em;
}

.ci-summary-card--total .ci-summary-card__value,
.fr-summary-card--accent .fr-summary-card__value {
   color: var(--accent-text);
}

.ci-summary-card__value--interest {
   color: #34d399;
}


/* -- Stacked bar chart -- */
.ci-chart-section h3,
.ci-table-section h3,
.fr-chart-section h3,
.fr-table-section h3 {
   font-size: 1rem;
   margin-bottom: 16px;
}

.ci-chart,
.fr-chart {
   display: flex;
   align-items: flex-end;
   gap: 3px;
   height: 220px;
   padding: 0 4px;
   border-bottom: 1px solid var(--border);
}

.ci-chart__col,
.fr-chart__col {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   height: 100%;
   min-width: 0;
}

.ci-chart__bar,
.fr-chart__bar {
   flex: 1;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   border-radius: 3px 3px 0 0;
   overflow: hidden;
}

.ci-chart__seg,
.fr-chart__seg {
   width: 100%;
   min-height: 0;
   transition: height .3s var(--ease);
}

.ci-chart__seg--contributions { background: var(--accent-dim); }
.ci-chart__seg--interest      { background: #34d399; }
.fr-chart__seg--base          { background: var(--accent-dim); }
.fr-chart__seg--profit        { background: #34d399; }

.ci-chart__label,
.fr-chart__label {
   font-size: .6rem;
   color: var(--text-muted);
   margin-top: 4px;
   white-space: nowrap;
}

.ci-chart-legend,
.fr-chart-legend {
   display: flex;
   gap: 20px;
   margin-top: 12px;
   font-size: .78rem;
   color: var(--text-muted);
}

.ci-legend,
.fr-legend {
   display: flex;
   align-items: center;
   gap: 6px;
}

.ci-legend__dot,
.fr-legend__dot {
   width: 10px;
   height: 10px;
   border-radius: 2px;
}

.ci-legend--contributions .ci-legend__dot,
.fr-legend--base .fr-legend__dot {
   background: var(--accent-dim);
}

.ci-legend--interest .ci-legend__dot,
.fr-legend--profit .fr-legend__dot {
   background: #34d399;
}


/* -- Data table -- */
.ci-table-wrap,
.fr-table-wrap {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
}

.ci-table,
.fr-table {
   width: 100%;
   border-collapse: collapse;
   font-size: .85rem;
}

.ci-table th,
.fr-table th {
   text-align: left;
   font-size: .72rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .05em;
   color: var(--text-muted);
   padding: 10px 16px;
   border-bottom: 1px solid var(--border);
   white-space: nowrap;
}

.ci-table td,
.fr-table td {
   padding: 10px 16px;
   border-bottom: 1px solid var(--border-subtle);
   color: var(--text);
   white-space: nowrap;
}

.ci-table tbody tr:hover,
.fr-table tbody tr:hover {
   background: var(--bg-card);
}

.ci-table td:last-child,
.fr-table td:last-child {
   font-weight: 600;
   color: var(--text-heading);
}


/* -- Explanation block -- */
.fr-explanation {
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 20px 24px;
}

.fr-explanation h3 {
   font-size: .9rem;
   margin-bottom: 8px;
}

.fr-explanation p {
   font-size: .85rem;
   color: var(--text-muted);
   line-height: 1.6;
}

.fr-explanation p + p {
   margin-top: 10px;
}

.fr-explanation em {
   color: var(--text);
   font-style: normal;
   font-weight: 600;
}


/* ==========================================================
   Shared tool component classes
   Used by all tools for common UI patterns.
   ========================================================== */

/* -- Action buttons -- */
.tool-btn {
   height: 44px;
   padding: 0 24px;
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   color: var(--text-heading);
   font-size: .88rem;
   font-weight: 600;
   font-family: inherit;
   cursor: pointer;
   transition: background .2s var(--ease), border-color .2s var(--ease);
}

.tool-btn:hover {
   background: var(--bg-card-hover);
   border-color: var(--accent-dim);
}

.tool-btn--primary {
   background: var(--accent);
   border-color: var(--accent);
   color: #fff;
}

.tool-btn--primary:hover {
   background: var(--accent-dim);
   border-color: var(--accent-dim);
}

.tool-btn:disabled {
   opacity: .4;
   cursor: not-allowed;
}

/* -- Textareas -- */
.tool-textarea {
   width: 100%;
   min-height: 180px;
   padding: 14px;
   background: var(--bg-input);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   color: var(--text-heading);
   font-size: .88rem;
   font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
   line-height: 1.55;
   resize: vertical;
   outline: none;
   transition: border-color .2s var(--ease);
}

.tool-textarea:focus {
   border-color: var(--accent);
}

.tool-textarea::placeholder {
   color: var(--text-muted);
}

/* -- Dropzone -- */
.tool-dropzone {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;
   min-height: 160px;
   padding: 32px;
   border: 2px dashed var(--border);
   border-radius: var(--radius);
   background: var(--bg-card);
   color: var(--text-muted);
   font-size: .9rem;
   text-align: center;
   cursor: pointer;
   transition: border-color .2s var(--ease), background .2s var(--ease);
}

.tool-dropzone:hover,
.tool-dropzone--active {
   border-color: var(--accent);
   background: var(--accent-glow);
}

.tool-dropzone__icon {
   font-size: 2rem;
   opacity: .6;
}

.tool-dropzone__hint {
   font-size: .78rem;
   color: var(--text-muted);
}

.tool-dropzone input[type="file"] {
   display: none;
}

/* -- File list -- */
.tool-file-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
   list-style: none;
}

.tool-file-item {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 14px;
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   font-size: .85rem;
}

.tool-file-item__name {
   flex: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--text-heading);
}

.tool-file-item__size {
   font-size: .75rem;
   color: var(--text-muted);
   white-space: nowrap;
}

.tool-file-item__actions {
   display: flex;
   gap: 6px;
}

.tool-file-item__btn {
   width: 28px;
   height: 28px;
   display: grid;
   place-items: center;
   background: var(--bg-surface);
   border: 1px solid var(--border);
   border-radius: 4px;
   color: var(--text-muted);
   font-size: .85rem;
   cursor: pointer;
   transition: color .15s, border-color .15s;
}

.tool-file-item__btn:hover {
   color: var(--text-heading);
   border-color: var(--accent-dim);
}

.tool-file-item__btn--danger:hover {
   color: #fb7185;
   border-color: #fb7185;
}

/* -- Output container -- */
.tool-output {
   padding: 16px;
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   font-size: .85rem;
   color: var(--text);
   min-height: 60px;
   white-space: pre-wrap;
   word-break: break-word;
   font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
   line-height: 1.55;
}

/* -- Cursor position indicator -- */
.tool-cursor-pos {
   text-align: right;
   margin-top: 4px;
   font-size: .72rem;
   color: var(--text-muted);
}

/* -- Layout utilities -- */
.tool-hidden {
   display: none;
}

.tool-actions {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 16px;
}

.tool-toolbar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px;
   margin-bottom: 16px;
}

.tool-mt {
   margin-top: 16px;
}

.tool-mt-sm {
   margin-top: 8px;
}

.tool-ml-auto {
   margin-left: auto;
}

.tool-ml-sm {
   margin-left: 10px;
}

.tool-m-0 {
   margin: 0;
}

/* -- Checkbox group (inside ci-field) -- */
.tool-checkbox-group {
   display: flex;
   gap: 12px;
   align-items: center;
   height: 44px;
}

.tool-checkbox-label {
   font-size: .85rem;
   color: var(--text);
   text-transform: none;
   letter-spacing: 0;
   margin: 0;
   display: flex;
   align-items: center;
   gap: 6px;
}

/* -- Block label -- */
.tool-block-label {
   margin-bottom: 8px;
   display: block;
}

/* -- Output variants -- */
.tool-output--tall {
   min-height: 120px;
}

.tool-output--prose {
   min-height: 200px;
   font-family: inherit;
   white-space: pre-wrap;
}

/* -- Muted small text -- */
.tool-text-muted {
   font-size: .82rem;
   color: var(--text-muted);
}

/* -- Download link in split PDF -- */
.tool-download-link {
   display: inline-block;
   margin-right: 8px;
   margin-bottom: 8px;
}

/* -- Copy button -- */
.tool-copy-btn {
   height: 32px;
   padding: 0 14px;
   background: var(--bg-surface);
   border: 1px solid var(--border);
   border-radius: 4px;
   color: var(--text-muted);
   font-size: .75rem;
   font-weight: 600;
   font-family: inherit;
   text-transform: uppercase;
   letter-spacing: .05em;
   cursor: pointer;
   transition: color .15s, border-color .15s;
}

.tool-copy-btn:hover {
   color: var(--text-heading);
   border-color: var(--accent-dim);
}

/* -- Status indicator -- */
.tool-status {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: .82rem;
   color: var(--text-muted);
}

.tool-status--ok {
   color: #34d399;
}

.tool-status--error {
   color: #fb7185;
}

/* -- Inline toggle (encode/decode etc.) -- */
.tool-toggle {
   display: inline-flex;
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   overflow: hidden;
}

.tool-toggle__option {
   padding: 8px 18px;
   background: var(--bg-card);
   border: none;
   color: var(--text-muted);
   font-size: .82rem;
   font-weight: 600;
   font-family: inherit;
   cursor: pointer;
   transition: background .15s, color .15s;
}

.tool-toggle__option + .tool-toggle__option {
   border-left: 1px solid var(--border);
}

.tool-toggle__option--active {
   background: var(--accent);
   color: #fff;
}

/* -- Diff-specific -- */
.diff-side-by-side {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

.diff-output-line {
   padding: 2px 8px;
   font-size: .82rem;
   font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
   line-height: 1.55;
   white-space: pre-wrap;
   word-break: break-all;
}

.diff-output-line--added {
   background: rgba(52, 211, 153, .12);
   color: #34d399;
}

.diff-output-line--removed {
   background: rgba(251, 113, 133, .12);
   color: #fb7185;
}

.diff-output-line--number {
   display: inline-block;
   width: 3em;
   text-align: right;
   padding-right: 8px;
   color: var(--text-muted);
   opacity: .6;
   user-select: none;
}

/* -- Image Printer -- */
.ip-preview-wrap {
   display: flex;
   justify-content: center;
   margin-bottom: 20px;
}

.ip-preview {
   max-width: 100%;
   height: auto;
   max-height: 300px;
   border-radius: var(--radius-sm);
   background: var(--bg-card);
   border: 1px solid var(--border);
}

/* -- PDF Page Manager -- */
.pm-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   gap: 16px;
   margin-top: 20px;
}

.pm-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 10px;
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   transition: border-color .2s var(--ease);
   user-select: none;
}

.pm-card:hover {
   border-color: var(--accent-dim);
}

.pm-card__label {
   font-size: .78rem;
   color: var(--text-muted);
   margin-bottom: 6px;
}

.pm-card__thumb-wrap {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   min-height: 180px;
   cursor: pointer;
}

.pm-card__thumb {
   max-width: 100%;
   max-height: 200px;
   height: auto;
   border-radius: 3px;
   background: #fff;
}

.pm-card__controls {
   display: flex;
   gap: 4px;
   flex-wrap: wrap;
   justify-content: center;
   margin-top: 8px;
   touch-action: manipulation;
}

.pm-card__btn {
   width: 32px;
   height: 32px;
   padding: 0;
   background: var(--bg-surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   color: var(--text);
   font-size: .9rem;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background .15s var(--ease), border-color .15s var(--ease);
}

.pm-card__btn:hover {
   background: var(--bg-card-hover);
   border-color: var(--accent-dim);
}

.pm-card__btn:disabled {
   opacity: .25;
   cursor: not-allowed;
}

.pm-card__btn--danger:hover {
   background: rgba(251, 113, 133, .15);
   border-color: #fb7185;
   color: #fb7185;
}

/* Lightbox overlay */
.pm-lightbox {
   position: fixed;
   inset: 0;
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, .85);
   cursor: pointer;
}

.pm-lightbox__canvas {
   max-width: 90vw;
   max-height: 90vh;
   border-radius: var(--radius-sm);
   background: #fff;
   box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
}

/* -- Mobile adjustments -- */
@media (max-width: 640px) {
   .ci-form,
   .fr-form {
      grid-template-columns: 1fr;
   }

   .ci-summary,
   .fr-summary {
      grid-template-columns: 1fr;
   }

   .ci-chart,
   .fr-chart {
      height: 160px;
   }

   .ci-summary-card__value,
   .fr-summary-card__value {
      font-size: 1.25rem;
   }

   .diff-side-by-side {
      grid-template-columns: 1fr;
   }

   .pm-grid {
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 10px;
   }

   .tool-dropzone {
      min-height: 120px;
      padding: 20px;
   }

   /* Prevent iOS auto-zoom on focus (triggers at font-size < 16px) */
   .tool-textarea,
   .ci-input-wrap input,
   .ci-input-wrap select,
   .fr-input-wrap input,
   .fr-input-wrap select {
      font-size: 16px;
   }
}