/* =========================================================
   niDar Tools
   Favicon & Icon Kit Generator
   Professional Tool Page Styles
   ========================================================= */


/* =========================================================
   1. ROOT VARIABLES
   ========================================================= */

:root {
  --primary: #2e7d32;
  --primary-dark: #1b5e20;
  --primary-light: #43a047;
  --primary-soft: #e8f5e9;

  --accent: #66bb6a;

  --page-bg: #f7faf8;
  --card-bg: #ffffff;
  --soft-bg: #f1f6f2;

  --text: #18201a;
  --text-secondary: #5f6962;
  --text-muted: #7b847d;

  --border: #dfe7e1;
  --border-strong: #cbd8ce;

  --shadow-sm:
    0 4px 14px rgba(25, 55, 32, 0.06);

  --shadow-md:
    0 12px 32px rgba(25, 55, 32, 0.09);

  --shadow-lg:
    0 20px 55px rgba(25, 55, 32, 0.12);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --transition:
    180ms ease;
}


/* =========================================================
   2. BASE
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(76, 175, 80, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 8%,
      rgba(102, 187, 106, 0.06),
      transparent 24%
    ),
    var(--page-bg);

  color: var(--text);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  line-height: 1.6;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  max-width: 100%;
}


/* =========================================================
   3. TOOL PAGE
   ========================================================= */

.tool-page {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 46px 0 80px;
}


/* =========================================================
   4. HERO
   ========================================================= */

.tool-hero {
  position: relative;

  text-align: center;

  max-width: 850px;

  margin:
    0 auto 42px;

  padding:
    22px 16px 12px;
}

.tool-hero::before {
  content: "";

  position: absolute;

  width: 220px;
  height: 220px;

  top: -60px;
  left: 50%;

  transform: translateX(-50%);

  background:
    radial-gradient(
      circle,
      rgba(76, 175, 80, 0.14),
      transparent 68%
    );

  filter: blur(4px);

  pointer-events: none;

  z-index: -1;
}

.tool-badge {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 7px;

  padding:
    7px 14px;

  border:
    1px solid rgba(46, 125, 50, 0.18);

  border-radius: 999px;

  background:
    rgba(232, 245, 233, 0.82);

  color:
    var(--primary-dark);

  font-size: 13px;
  font-weight: 700;

  letter-spacing: 0.2px;
}

.tool-hero h1 {
  margin:
    17px 0 12px;

  font-size:
    clamp(32px, 5vw, 52px);

  line-height: 1.1;

  letter-spacing:
    -1.5px;

  font-weight: 800;

  background:
    linear-gradient(
      135deg,
      #18201a 0%,
      #2e7d32 55%,
      #43a047 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
}

.tool-hero p {
  max-width: 700px;

  margin:
    0 auto;

  color:
    var(--text-secondary);

  font-size:
    clamp(15px, 2vw, 18px);
}

.hero-features {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 9px;

  margin-top: 22px;
}

.hero-features span {
  display: inline-flex;

  align-items: center;

  padding:
    7px 12px;

  border:
    1px solid var(--border);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.75);

  color:
    var(--text-secondary);

  font-size: 12px;

  box-shadow:
    var(--shadow-sm);
}


/* =========================================================
   5. MAIN WORKSPACE
   ========================================================= */

.tool-workspace {
  background:
    rgba(255, 255, 255, 0.78);

  border:
    1px solid var(--border);

  border-radius:
    var(--radius-xl);

  padding:
    30px;

  box-shadow:
    var(--shadow-lg);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}

.step-section {
  width: 100%;
}

.step-heading {
  display: flex;

  align-items: flex-start;

  gap: 15px;

  margin-bottom: 24px;
}

.step-number {
  flex:
    0 0 42px;

  width: 42px;
  height: 42px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius:
    50%;

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--primary-light)
    );

  color: #ffffff;

  font-size: 17px;

  font-weight: 800;

  box-shadow:
    0 8px 20px rgba(46, 125, 50, 0.22);
}

.step-heading h2 {
  margin:
    0 0 3px;

  font-size:
    clamp(20px, 3vw, 25px);

  line-height: 1.25;

  font-weight: 800;
}

.step-heading p {
  margin:
    0;

  color:
    var(--text-secondary);

  font-size: 14px;
}


/* =========================================================
   6. UPLOAD ZONE
   ========================================================= */

.upload-zone {
  position: relative;

  min-height:
    285px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  padding:
    30px 20px;

  border:
    2px dashed rgba(46, 125, 50, 0.35);

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      180deg,
      rgba(232, 245, 233, 0.52),
      rgba(255, 255, 255, 0.75)
    );

  transition:
    border-color var(--transition),
    background var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

.upload-zone:hover {
  border-color:
    rgba(46, 125, 50, 0.65);

  background:
    linear-gradient(
      180deg,
      rgba(232, 245, 233, 0.72),
      rgba(255, 255, 255, 0.92)
    );

  box-shadow:
    var(--shadow-md);
}

.upload-zone.drag-over {
  border-color:
    var(--primary);

  background:
    var(--primary-soft);

  transform:
    scale(1.005);

  box-shadow:
    0 0 0 5px rgba(46, 125, 50, 0.08);
}

.upload-zone:focus-visible {
  outline:
    3px solid rgba(46, 125, 50, 0.25);

  outline-offset:
    3px;
}

.upload-icon {
  width: 70px;
  height: 70px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 13px;

  border-radius:
    20px;

  background:
    linear-gradient(
      135deg,
      #e8f5e9,
      #ffffff
    );

  font-size: 34px;

  box-shadow:
    var(--shadow-sm);
}

.upload-zone h3 {
  margin:
    0 0 4px;

  font-size: 20px;

  font-weight: 800;
}

.upload-zone p {
  margin:
    0 0 14px;

  color:
    var(--text-muted);

  font-size: 14px;
}

.upload-zone small {
  margin-top: 12px;

  color:
    var(--text-muted);

  font-size: 12px;

  letter-spacing:
    0.4px;
}


/* =========================================================
   7. BUTTONS
   ========================================================= */

.primary-btn,
.secondary-btn {
  min-height:
    48px;

  border-radius:
    12px;

  padding:
    11px 20px;

  font-size:
    14px;

  font-weight:
    750;

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    background var(--transition),
    border-color var(--transition);

  -webkit-tap-highlight-color:
    transparent;
}

.primary-btn {
  border:
    1px solid var(--primary);

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--primary-light)
    );

  color:
    #ffffff;

  box-shadow:
    0 8px 18px rgba(46, 125, 50, 0.2);
}

.primary-btn:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 12px 24px rgba(46, 125, 50, 0.27);
}

.primary-btn:active {
  transform:
    translateY(0);
}

.secondary-btn {
  border:
    1px solid var(--border-strong);

  background:
    #ffffff;

  color:
    var(--text);
}

.secondary-btn:hover {
  border-color:
    rgba(46, 125, 50, 0.45);

  background:
    var(--primary-soft);

  color:
    var(--primary-dark);
}


/* =========================================================
   8. PREVIEW LAYOUT
   ========================================================= */

.preview-layout {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap:
    20px;
}

.preview-card {
  min-width:
    0;

  padding:
    20px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius-lg);

  background:
    var(--card-bg);

  box-shadow:
    var(--shadow-sm);
}

.preview-label {
  margin-bottom:
    14px;

  font-size:
    15px;

  font-weight:
    800;
}

.image-preview-box {
  position: relative;

  min-height:
    270px;

  display:
    flex;

  align-items:
    center;
  justify-content: center;

  overflow:
    hidden;

  border-radius:
    14px;

  border:
    1px solid var(--border);

  background-color:
    #ffffff;

  background-image:
    linear-gradient(
      45deg,
      #f0f2f1 25%,
      transparent 25%
    ),
    linear-gradient(
      -45deg,
      #f0f2f1 25%,
      transparent 25%
    ),
    linear-gradient(
      45deg,
      transparent 75%,
      #f0f2f1 75%
    ),
    linear-gradient(
      -45deg,
      transparent 75%,
      #f0f2f1 75%
    );

  background-size:
    24px 24px;

  background-position:
    0 0,
    0 12px,
    12px -12px,
    -12px 0;
}

.image-preview-box img {
  display:
    block;

  max-width:
    100%;

  max-height:
    360px;

  object-fit:
    contain;
}


/* =========================================================
   9. FILE DETAILS
   ========================================================= */

.file-details {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-top:
    14px;

  font-size:
    13px;
}

.file-details span:first-child {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(--text-secondary);
}

.file-details span:last-child {
  flex:
    0 0 auto;

  font-weight:
    750;
}

.image-dimensions {
  margin-top:
    6px;

  color:
    var(--text-muted);

  font-size:
    12px;
}


/* =========================================================
   10. FAVICON PREVIEW
   ========================================================= */

.favicon-preview-stage {
  min-height:
    270px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--border);

  border-radius:
    14px;

  background:
    linear-gradient(
      135deg,
      #f7faf8,
      #eef5ef
    );
}

.favicon-preview {
  position:
    relative;

  width:
    150px;

  height:
    150px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  border-radius:
    22px;

  background:
    #ffffff;

  box-shadow:
    0 18px 38px rgba(25, 55, 32, 0.15);

  border:
    1px solid rgba(46, 125, 50, 0.12);

  color:
    var(--primary);

  font-size:
    55px;

  font-weight:
    900;
}

.favicon-preview img {
  width:
    100%;

  height:
    100%;

  object-fit:
    contain;
}

.preview-note {
  margin:
    12px 0 0;

  text-align:
    center;

  color:
    var(--text-muted);

  font-size:
    12px;
}


/* =========================================================
   11. DIVIDER
   ========================================================= */

.section-divider {
  height:
    1px;

  margin:
    32px 0;

  background:
    var(--border);
}


/* =========================================================
   12. SETTINGS
   ========================================================= */

.settings-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    18px;
}

.setting-group {
  min-width:
    0;
}

.setting-group label {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  margin-bottom:
    8px;

  color:
    var(--text);

  font-size:
    13px;

  font-weight:
    750;
}

.setting-group label strong {
  color:
    var(--primary);

  font-size:
    13px;
}

.setting-group select,
.setting-group input[type="text"] {
  width:
    100%;

  height:
    48px;

  padding:
    0 14px;

  border:
    1px solid var(--border-strong);

  border-radius:
    11px;

  background:
    #ffffff;

  color:
    var(--text);

  outline:
    none;

  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.setting-group select:focus,
.setting-group input[type="text"]:focus {
  border-color:
    var(--primary);

  box-shadow:
    0 0 0 4px rgba(46, 125, 50, 0.1);
}


/* =========================================================
   13. COLOR CONTROL
   ========================================================= */

.color-control {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  height:
    48px;

  padding:
    5px 12px 5px 6px;

  border:
    1px solid var(--border-strong);

  border-radius:
    11px;

  background:
    #ffffff;
}

.color-control input[type="color"] {
  width:
    38px;

  height:
    36px;

  padding:
    2px;

  border:
    none;

  border-radius:
    8px;

  background:
    transparent;

  cursor:
    pointer;
}

.color-control span {
  color:
    var(--text-secondary);

  font-size:
    13px;

  font-weight:
    700;
}


/* =========================================================
   14. RANGE
   ========================================================= */

.setting-group input[type="range"] {
  width:
    100%;

  height:
    7px;

  margin:
    8px 0 4px;

  appearance:
    none;

  -webkit-appearance:
    none;

  border-radius:
    999px;

  background:
    #dfe9e1;

  outline:
    none;
}

.setting-group input[type="range"]::-webkit-slider-thumb {
  appearance:
    none;

  -webkit-appearance:
    none;

  width:
    21px;

  height:
    21px;

  border:
    3px solid #ffffff;

  border-radius:
    50%;

  background:
    var(--primary);

  box-shadow:
    0 2px 8px rgba(46, 125, 50, 0.3);

  cursor:
    pointer;
}

.setting-group input[type="range"]::-moz-range-thumb {
  width:
    17px;

  height:
    17px;

  border:
    3px solid #ffffff;

  border-radius:
    50%;

  background:
    var(--primary);

  box-shadow:
    0 2px 8px rgba(46, 125, 50, 0.3);

  cursor:
    pointer;
}

.range-labels {
  display:
    flex;

  justify-content:
    space-between;

  margin-top:
    3px;

  color:
    var(--text-muted);

  font-size:
    11px;
}


/* =========================================================
   15. ADVANCED SETTINGS
   ========================================================= */

.advanced-settings {
  margin-top:
    22px;

  border:
    1px solid var(--border);

  border-radius:
    14px;

  background:
    var(--soft-bg);

  overflow:
    hidden;
}

.advanced-settings summary {
  padding:
    15px 17px;

  color:
    var(--text);

  font-size:
    14px;

  font-weight:
    750;

  cursor:
    pointer;

  list-style:
    none;
}

.advanced-settings summary::-webkit-details-marker {
  display:
    none;
}

.advanced-settings summary::after {
  content:
    "＋";

  float:
    right;

  color:
    var(--primary);

  font-size:
    18px;
}

.advanced-settings[open] summary::after {
  content:
    "−";
}

.advanced-content {
  display:
    grid;

  gap:
    11px;

  padding:
    0 17px 17px;
}

.check-row {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  padding:
    11px 12px;

  border:
    1px solid var(--border);

  border-radius:
    10px;

  background:
    #ffffff;

  color:
    var(--text-secondary);

  font-size:
    13px;

  cursor:
    pointer;
}

.check-row input {
  width:
    17px;

  height:
    17px;

  margin:
    1px 0 0;

  accent-color:
    var(--primary);

  flex:
    0 0 auto;
}


/* =========================================================
   16. ACTION
   ========================================================= */

.action-row {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-top:
    24px;
}

.action-row .primary-btn {
  min-width:
    210px;
}

.action-row .secondary-btn {
  min-width:
    130px;
}


/* =========================================================
   17. PROGRESS
   ========================================================= */

.progress-section {
  margin-top:
    22px;

  padding:
    18px;

  border:
    1px solid rgba(46, 125, 50, 0.15);

  border-radius:
    14px;

  background:
    var(--primary-soft);
}

.progress-header {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    10px;

  margin-bottom:
    9px;

  font-size:
    13px;

  font-weight:
    700;
}

.progress-header span:last-child {
  color:
    var(--primary-dark);
}

.progress-track {
  width:
    100%;

  height:
    9px;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    rgba(46, 125, 50, 0.12);
}

.progress-bar {
  width:
    0%;

  height:
    100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      var(--primary-dark),
      var(--primary-light)
    );

  transition:
    width 100ms linear;
}


/* =========================================================
   18. RESULT
   ========================================================= */

.result-section {
  margin-top:
    30px;

  padding:
    24px;

  border:
    1px solid rgba(46, 125, 50, 0.2);

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      180deg,
      #f7fff8,
      #ffffff
    );

  box-shadow:
    var(--shadow-md);
}

.result-header {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    14px;

  margin-bottom:
    22px;
}

.success-icon {
  flex:
    0 0 44px;

  width:
    44px;

  height:
    44px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  background:
    var(--primary);

  color:
    #ffffff;

  font-size:
    22px;

  font-weight:
    900;
}

.result-header h2 {
  margin:
    0 0 4px;

  font-size:
    22px;

  line-height:
    1.25;
}

.result-header p {
  margin:
    0;

  color:
    var(--text-secondary);

  font-size:
    13px;
}


/* =========================================================
   19. GENERATED ICON GRID
   ========================================================= */

.generated-grid {
  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    15px;
}

.generated-icon-card {
  min-width:
    0;

  padding:
    15px;

  text-align:
    center;

  border:
    1px solid var(--border);

  border-radius:
    15px;

  background:
    #ffffff;

  box-shadow:
    var(--shadow-sm);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.generated-icon-card:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(46, 125, 50, 0.28);

  box-shadow:
    var(--shadow-md);
}

.generated-icon-preview {
  width:
    100%;

  min-height:
    120px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    12px;

  border:
    1px solid var(--border);

  border-radius:
    11px;

  background:
    #f7faf8;

  background-image:
    linear-gradient(
      45deg,
      #e9eeea 25%,
      transparent 25%
    ),
    linear-gradient(
      -45deg,
      #e9eeea 25%,
      transparent 25%
    ),
    linear-gradient(
      45deg,
      transparent 75%,
      #e9eeea 75%
    ),
    linear-gradient(
      -45deg,
      transparent 75%,
      #e9eeea 75%
    );

  background-size:
    18px 18px;

  background-position:
    0 0,
    0 9px,
    9px -9px,
    -9px 0;
}

.generated-icon-preview img {
  max-width:
    85%;

  max-height:
    85%;

  object-fit:
    contain;
}

.generated-icon-card h4 {
  margin:
    0 0 3px;

  font-size:
    13px;

  font-weight:
    800;
}

.generated-icon-card p {
  margin:
    0;

  color:
    var(--text-muted);

  font-size:
    11px;
}


/* =========================================================
   20. DOWNLOAD ACTIONS
   ========================================================= */

.download-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-top:
    22px;

  padding-top:
    20px;

  border-top:
    1px solid var(--border);
}

.download-actions .primary-btn {
  min-width:
    210px;
}


/* =========================================================
   21. INFO SECTION
   ========================================================= */

.info-section,
.features-section {
  margin-top:
    58px;
}

.info-heading {
  max-width:
    760px;

  margin:
    0 auto 28px;

  text-align:
    center;
}

.info-badge {
  display:
    inline-flex;

  align-items:
    center;

  padding:
    6px 12px;

  border:
    1px solid rgba(46, 125, 50, 0.16);

  border-radius:
    999px;

  background:
    var(--primary-soft);

  color:
    var(--primary-dark);

  font-size:
    12px;

  font-weight:
    800;
}

.info-heading h2 {
  margin:
    12px 0 8px;

  font-size:
    clamp(25px, 4vw, 34px);

  line-height:
    1.2;

  letter-spacing:
    -0.5px;
}

.info-heading p {
  margin:
    0;

  color:
    var(--text-secondary);

  font-size:
    14px;
}


/* =========================================================
   22. INFO GRID
   ========================================================= */

.info-grid {
  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    16px;
}

.info-card {
  padding:
    22px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius-md);

  background:
    rgba(255, 255, 255, 0.82);

  box-shadow:
    var(--shadow-sm);

  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.info-card:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(46, 125, 50, 0.25);

  box-shadow:
    var(--shadow-md);
}

.info-icon {
  width:
    38px;

  height:
    38px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    14px;

  border-radius:
    11px;

  background:
    var(--primary-soft);

  color:
    var(--primary-dark);

  font-size:
    15px;

  font-weight:
    900;
}

.info-card h3 {
  margin:
    0 0 7px;

  font-size:
    16px;

  font-weight:
    800;
}

.info-card p {
  margin:
    0;

  color:
    var(--text-secondary);

  font-size:
    13px;
}


/* =========================================================
   23. FEATURE GRID
   ========================================================= */

.feature-grid {
  display:
    grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    16px;
}

.feature-card {
  padding:
    22px;

  border:
    1px solid var(--border);

  border-radius:
    var(--radius-md);

  background:
    #ffffff;

  box-shadow:
    var(--shadow-sm);

  text-align:
    center;
}

.feature-icon {
  width:
    52px;

  height:
    52px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin:
    0 auto 13px;

  border-radius:
    15px;

  background:
    var(--primary-soft);

  font-size:
    23px;
}

.feature-card h3 {
  margin:
    0 0 6px;

  font-size:
    16px;

  font-weight:
    800;
}

.feature-card p {
  margin:
    0;

  color:
    var(--text-secondary);

  font-size:
    13px;
}


/* =========================================================
   24. PRIVACY NOTE
   ========================================================= */

.privacy-note {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    15px;

  margin-top:
    34px;

  padding:
    22px;

  border:
    1px solid rgba(46, 125, 50, 0.18);

  border-radius:
    var(--radius-md);

  background:
    var(--primary-soft);
}

.privacy-icon {
  flex:
    0 0 auto;

  font-size:
    27px;
}

.privacy-note h3 {
  margin:
    0 0 4px;

  font-size:
    16px;

  font-weight:
    800;
}

.privacy-note p {
  margin:
    0;

  color:
    var(--text-secondary);

  font-size:
    13px;
}


/* =========================================================
   25. HIDDEN
   ========================================================= */

[hidden] {
  display:
    none !important;
}


/* =========================================================
   26. DARK MODE
   ========================================================= */

html[data-theme="dark"] body {
  --page-bg: #0d130f;
  --card-bg: #151d17;
  --soft-bg: #19231b;

  --text: #eef5ef;
  --text-secondary: #b7c2b9;
  --text-muted: #8e9b91;

  --border: #29372d;
  --border-strong: #3a4a3e;

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(76, 175, 80, 0.1),
      transparent 28%
    ),
    #0d130f;
}

html[data-theme="dark"] .tool-workspace {
  background:
    rgba(21, 29, 23, 0.92);
}

html[data-theme="dark"] .tool-badge,
html[data-theme="dark"] .hero-features span {
  background:
    rgba(25, 40, 29, 0.85);

  border-color:
    #314735;
}

html[data-theme="dark"] .tool-hero h1 {
  background:
    linear-gradient(
      135deg,
      #eef5ef,
      #81c784
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;
}

html[data-theme="dark"] .upload-zone {
  background:
    linear-gradient(
      180deg,
      rgba(46, 125, 50, 0.12),
      rgba(21, 29, 23, 0.8)
    );
}

html[data-theme="dark"] .upload-zone:hover {
  background:
    rgba(46, 125, 50, 0.15);
}

html[data-theme="dark"] .upload-icon {
  background:
    #19251b;
}

html[data-theme="dark"] .preview-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .generated-icon-card {
  background:
    var(--card-bg);

  border-color:
    var(--border);
}

html[data-theme="dark"] .image-preview-box,
html[data-theme="dark"] .favicon-preview-stage,
html[data-theme="dark"] .generated-icon-preview {
  background-color:
    #121913;
}

html[data-theme="dark"] .setting-group select,
html[data-theme="dark"] .setting-group input[type="text"],
html[data-theme="dark"] .color-control {
  background:
    #121913;

  color:
    var(--text);

  border-color:
    var(--border-strong);
}

html[data-theme="dark"] .secondary-btn {
  background:
    #182119;

  color:
    var(--text);

  border-color:
    var(--border-strong);
}

html[data-theme="dark"] .secondary-btn:hover {
  background:
    rgba(46, 125, 50, 0.18);
}

html[data-theme="dark"] .advanced-settings,
html[data-theme="dark"] .check-row {
  background:
    #172119;

  border-color:
    var(--border);
}

html[data-theme="dark"] .check-row {
  background:
    #121913;
}

html[data-theme="dark"] .result-section {
  background:
    linear-gradient(
      180deg,
      rgba(46, 125, 50, 0.12),
      rgba(21, 29, 23, 0.9)
    );
}

html[data-theme="dark"] .privacy-note {
  background:
    rgba(46, 125, 50, 0.13);
}


/* =========================================================
   27. SENIOR MODE
   ========================================================= */

html[data-theme="senior"] body {
  font-size:
    18px;

  --primary:
    #1769aa;

  --primary-dark:
    #0d4774;

  --primary-light:
    #2584c7;

  --primary-soft:
    #e3f2fd;
}

html[data-theme="senior"] .tool-page {
  width:
    min(1180px, calc(100% - 24px));
}

html[data-theme="senior"] .tool-hero h1 {
  font-size:
    clamp(36px, 6vw, 58px);

  letter-spacing:
    -0.5px;
}

html[data-theme="senior"] .tool-hero p,
html[data-theme="senior"] .step-heading p,
html[data-theme="senior"] .info-heading p {
  font-size:
    17px;
}

html[data-theme="senior"] .tool-workspace {
  border-width:
    2px;

  padding:
    34px;
}

html[data-theme="senior"] .step-number {
  width:
    48px;

  height:
    48px;

  flex-basis:
    48px;

  font-size:
    19px;
}

html[data-theme="senior"] .step-heading h2 {
  font-size:
    28px;
}

html[data-theme="senior"] .upload-zone {
  min-height:
    310px;

  border-width:
    3px;
}

html[data-theme="senior"] .upload-zone h3 {
  font-size:
    24px;
}

html[data-theme="senior"] .primary-btn,
html[data-theme="senior"] .secondary-btn {
  min-height:
    56px;

  padding:
    12px 24px;

  font-size:
    17px;
}

html[data-theme="senior"] .setting-group label,
html[data-theme="senior"] .setting-group select,
html[data-theme="senior"] .setting-group input[type="text"] {
  font-size:
    16px;
}

html[data-theme="senior"] .setting-group select,
html[data-theme="senior"] .setting-group input[type="text"] {
  height:
    56px;
}

html[data-theme="senior"] .info-card h3,
html[data-theme="senior"] .feature-card h3 {
  font-size:
    19px;
}

html[data-theme="senior"] .info-card p,
html[data-theme="senior"] .feature-card p,
html[data-theme="senior"] .privacy-note p {
  font-size:
    16px;
}


/* =========================================================
   28. TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .tool-page {
    width:
      min(960px, calc(100% - 28px));
  }

  .tool-workspace {
    padding:
      25px;
  }

  .info-grid,
  .feature-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .generated-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}


/* =========================================================
   29. MOBILE LANDSCAPE / SMALL TABLET
   ========================================================= */

@media (max-width: 760px) {

  .tool-page {
    width:
      min(100% - 20px, 680px);

    padding-top:
      28px;

    padding-bottom:
      55px;
  }

  .tool-workspace {
    padding:
      20px;

    border-radius:
      20px;
  }

  .preview-layout,
  .settings-grid {
    grid-template-columns:
      1fr;
  }

  .generated-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .image-preview-box,
  .favicon-preview-stage {
    min-height:
      230px;
  }

  .action-row,
  .download-actions {
    flex-direction:
      column;
  }

  .action-row .primary-btn,
  .action-row .secondary-btn,
  .download-actions .primary-btn,
  .download-actions .secondary-btn {
    width:
      100%;

    min-width:
      0;
  }

  .privacy-note {
    padding:
      18px;
  }
}


/* =========================================================
   30. MOBILE
   ========================================================= */

@media (max-width: 520px) {

  .tool-page {
    width:
      calc(100% - 14px);

    padding-top:
      18px;
  }

  .tool-hero {
    margin-bottom:
      25px;

    padding:
      12px 5px;
  }

  .tool-badge {
    font-size:
      11px;

    padding:
      6px 11px;
  }

  .tool-hero h1 {
    margin-top:
      13px;

    font-size:
      31px;

    line-height:
      1.12;
  }

  .tool-hero p {
    font-size:
      14px;
  }

  .hero-features {
    gap:
      6px;

    margin-top:
      16px;
  }

  .hero-features span {
    padding:
      6px 9px;

    font-size:
      10px;
  }

  .tool-workspace {
    padding:
      16px;

    border-radius:
      18px;
  }

  .step-heading {
    gap:
      10px;

    margin-bottom:
      18px;
  }

  .step-number {
    width:
      35px;

    height:
      35px;

    flex-basis:
      35px;

    font-size:
      14px;
  }

  .step-heading h2 {
    font-size:
      19px;
  }

  .step-heading p {
    font-size:
      12px;
  }

  .upload-zone {
    min-height:
      245px;

    padding:
      24px 15px;
  }

  .upload-icon {
    width:
      58px;

    height:
      58px;

    font-size:
      28px;
  }

  .upload-zone h3 {
    font-size:
      17px;
  }

  .preview-card {
    padding:
      14px;
  }

  .image-preview-box,
  .favicon-preview-stage {
    min-height:
      205px;
  }

  .favicon-preview {
    width:
      125px;

    height:
      125px;

    border-radius:
      18px;
  }

  .settings-grid {
    gap:
      14px;
  }

  .result-section {
    padding:
      17px;
  }

  .result-header h2 {
    font-size:
      18px;
  }

  .generated-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      10px;
  }

  .generated-icon-card {
    padding:
      10px;
  }

  .generated-icon-preview {
    min-height:
      100px;
  }

  .info-section,
  .features-section {
    margin-top:
      42px;
  }

  .info-grid,
  .feature-grid {
    grid-template-columns:
      1fr;
  }

  .info-card,
  .feature-card {
    padding:
      18px;
  }

  .privacy-note {
    gap:
      10px;

    padding:
      16px;
  }

  .privacy-icon {
    font-size:
      22px;
  }

  .privacy-note h3 {
    font-size:
      15px;
  }

  .privacy-note p {
    font-size:
      12px;
  }
}


/* =========================================================
   31. VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 360px) {

  .tool-page {
    width:
      calc(100% - 8px);
  }

  .tool-workspace {
    padding:
      12px;
  }

  .tool-hero h1 {
    font-size:
      27px;
  }

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

  .hero-features span {
    font-size:
      9px;
  }
}


/* =========================================================
   32. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }

  *,
  *::before,
  *::after {
    transition:
      none !important;

    animation:
      none !important;
  }
}


/* =========================================================
   END — Favicon & Icon Kit Generator CSS
   ========================================================= */