:root {
  color-scheme: light;
  --ink: #172033; --muted: #667085; --paper: #eef2f8; --panel: #ffffff; --line: #d8dfeb;
  --accent: #5b6ff5; --accent-hover: #485be0; --accent-soft: #edf0ff;
  --shadow: 0 18px 50px rgba(29,41,72,.10);
}

/* Monetization settings live on /admin/monetization. Hide the legacy copies
   from the general website-settings page. */
.admin-shell .panel:has([data-shared-i18n="adsenseTitle"]),
.admin-shell .panel:has([data-shared-i18n="affiliateTitle"]) { display:none; }
body { background: radial-gradient(circle at 10% 0%,rgba(91,111,245,.12),transparent 31rem),radial-gradient(circle at 100% 18%,rgba(26,188,156,.08),transparent 28rem),var(--paper); }
.page-theme-toggle { display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:92px;padding:8px 11px;border:1px solid var(--line);border-radius:10px;background:#f5f7fb;color:var(--ink);box-shadow:none;font:600 12px "Noto Sans Thai","Segoe UI",sans-serif;cursor:pointer;transition:transform .16s ease,background .16s ease,box-shadow .16s ease; }
.page-theme-toggle:hover { background:var(--accent);color:#fff;transform:translateY(-1px);box-shadow:0 7px 18px rgba(91,111,245,.22); }
.page-theme-toggle .theme-icon { font-size:15px;line-height:1; }
.login-page-actions { position:fixed;top:18px;right:18px;z-index:5;display:flex;align-items:center;gap:8px; }
.login-page-actions select,.head-actions select { width:auto;margin:0;padding:8px 30px 8px 10px;border:1px solid var(--line);border-radius:10px;background:#f5f7fb;color:var(--ink);font:600 12px "Noto Sans Thai","Segoe UI",sans-serif; }
.login-card,.panel { border:1px solid rgba(216,223,235,.88);border-radius:18px;background:rgba(255,255,255,.92);box-shadow:var(--shadow);backdrop-filter:blur(18px); }
.login-brand span { background:linear-gradient(135deg,#6e7ff8,#4c5ede);box-shadow:0 7px 18px rgba(91,111,245,.32); }
.google-login,.form-actions button { border:0;border-radius:10px;background:var(--accent);color:#fff;box-shadow:0 7px 18px rgba(91,111,245,.22); }
.google-login:hover,.form-actions button:hover { background:var(--accent-hover);color:#fff;box-shadow:0 10px 23px rgba(91,111,245,.29); }
.admin-shell>header { padding:12px 15px;border:1px solid rgba(216,223,235,.88);border-radius:16px;background:rgba(255,255,255,.82);box-shadow:0 10px 35px rgba(29,41,72,.08);backdrop-filter:blur(18px); }
.admin-subnav{display:flex;justify-content:flex-end;margin:-12px 0 18px}.admin-subnav a{padding:8px 12px;border-radius:9px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700;text-decoration:none}
.has-admin-topbar>header,.has-admin-topbar>.admin-subnav{display:none}.admin-topbar{position:sticky;top:10px;z-index:50;display:flex;align-items:center;gap:18px;margin-bottom:28px;padding:10px 12px;border:1px solid rgba(216,223,235,.88);border-radius:16px;background:rgba(255,255,255,.88);box-shadow:0 10px 35px rgba(29,41,72,.08);backdrop-filter:blur(18px)}.admin-topbar-brand{display:flex;align-items:center;gap:7px;color:var(--ink);font:700 12px 'DM Mono',monospace;text-decoration:none;white-space:nowrap}.admin-topbar-brand>span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#6e7ff8,#4c5ede);color:#fff}.admin-topbar-brand b{padding:3px 6px;border-radius:5px;background:var(--accent-soft);color:var(--accent);font-size:9px}.admin-topbar-links{display:flex;align-items:center;gap:4px;flex:1}.admin-topbar-links a,.admin-home-link{padding:7px 9px;border-radius:8px;color:var(--muted);font-size:11px;font-weight:600;text-decoration:none;white-space:nowrap}.admin-topbar-links a:hover,.admin-topbar-links a.active{background:var(--accent-soft);color:var(--accent)}.admin-topbar-actions{display:flex;align-items:center;gap:7px}.admin-account{max-width:120px;overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.admin-topbar-actions select{width:auto;margin:0;padding:7px 25px 7px 8px;border:1px solid var(--line);border-radius:9px;background:#f5f7fb;color:var(--ink);font-size:11px}.admin-topbar .page-theme-toggle{min-width:76px;padding:7px 9px}.admin-home-link{background:#182033;color:#fff}@media(max-width:960px){.admin-topbar{align-items:flex-start;flex-wrap:wrap}.admin-topbar-links{order:3;width:100%;overflow:auto}.admin-account{display:none}}@media(max-width:560px){.admin-topbar-brand b,.admin-home-link{display:none}.admin-topbar{gap:8px}.admin-topbar-actions{margin-left:auto}}
html[data-theme="dark"] { color-scheme:dark;--ink:#cbd3df;--muted:#8792a3;--paper:#0d111a;--panel:#151b27;--line:#2b3444;--accent:#7485ee;--accent-hover:#8796f5;--accent-soft:#202940;--shadow:0 20px 55px rgba(0,0,0,.24); }
html[data-theme="dark"] body { background:radial-gradient(circle at 12% 0%,rgba(97,113,224,.12),transparent 32rem),radial-gradient(circle at 100% 20%,rgba(29,142,135,.07),transparent 30rem),var(--paper);color:var(--ink); }
html[data-theme="dark"] .login-card,html[data-theme="dark"] .panel { border-color:var(--line);background:rgba(21,27,39,.94);box-shadow:var(--shadow); }
html[data-theme="dark"] .admin-shell>header { border-color:rgba(53,64,83,.86);background:rgba(20,26,38,.82);box-shadow:0 12px 35px rgba(0,0,0,.2); }
html[data-theme="dark"] .admin-topbar{border-color:rgba(53,64,83,.86);background:rgba(20,26,38,.88);box-shadow:0 12px 35px rgba(0,0,0,.2)}html[data-theme="dark"] .admin-topbar-actions select{border-color:var(--line);background:#1a2230;color:var(--ink)}html[data-theme="dark"] .admin-home-link{background:#202940;color:#e5e9f5}
html[data-theme="dark"] .page-theme-toggle { border-color:var(--line);background:#1a2230;color:var(--ink); }
html[data-theme="dark"] .login-page-actions select,html[data-theme="dark"] .head-actions select { border-color:var(--line);background:#1a2230;color:var(--ink); }
html[data-theme="dark"] .page-theme-toggle:hover { background:var(--accent);color:#fff; }
html[data-theme="dark"] .google-login,html[data-theme="dark"] .settings-grid input,html[data-theme="dark"] .settings-grid select { border-color:var(--line);background:#101621;color:var(--ink); }
html[data-theme="dark"] .google-login:hover { background:var(--accent);color:#fff; }
html[data-theme="dark"] .settings-grid input:focus,html[data-theme="dark"] .settings-grid select:focus { border-color:var(--accent);background:#121925;box-shadow:0 0 0 4px rgba(116,133,238,.14);outline:0; }
html[data-theme="dark"] .login-error { border-color:#684247;background:#352326;color:#dda8ad; }
html[data-theme="dark"] .setup-warning { border-color:#655b3b;background:#302c1c;color:#d4c998; }
html[data-theme="dark"] .notice { border-color:#3d6652;background:#183326;color:#9fd1b7; }
html[data-theme="dark"] .head-actions a { background:#202940;color:#e5e9f5; }
html[data-theme="dark"] th,html[data-theme="dark"] td { border-color:var(--line); }
html[data-theme="dark"] .status { background:#202940;color:var(--muted); }
html[data-theme="dark"] .status.ok { background:#17372e;color:#8fd0b5; }

/* Keep every help tooltip readable inside small viewports. Long content is
   preserved and scrolls vertically instead of being clipped. */
@media (max-width:700px) {
  .help-tooltip .tooltip-content {
    position:fixed !important;
    z-index:10000 !important;
    top:50% !important;
    right:auto !important;
    bottom:auto !important;
    left:50% !important;
    width:calc(100vw - 28px) !important;
    max-width:520px !important;
    max-height:calc(100vh - 28px) !important;
    max-height:calc(100dvh - 28px) !important;
    margin:0 !important;
    padding:16px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    white-space:normal;
    overflow-wrap:anywhere;
    transform:translate(-50%,-50%) !important;
    pointer-events:auto !important;
  }
  .help-tooltip:hover .tooltip-content,
  .help-tooltip:focus .tooltip-content,
  .help-tooltip:focus-visible .tooltip-content,
  .help-tooltip:focus-within .tooltip-content {
    transform:translate(-50%,-50%) !important;
  }
}
/* Shared wide workspace: keep every application/admin page aligned while
   allowing large monitors to use substantially more horizontal space. */
:where(.home-shell,.admin-shell,.tools-shell,.converter-shell,.resizer-shell,.rotator-shell,.compressor-shell,.cropper-shell) {
  width: calc(100% - 32px) !important;
  max-width: 1600px !important;
  padding-inline: 0 !important;
}

.site-footer {
  width: calc(100% - 32px) !important;
  max-width: 1600px !important;
  padding-inline: 0 !important;
}

.home-shell .tool-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.home-shell .tool-card .card-label {
  position: absolute;
  top: 42px;
  right: 28px;
  max-width: calc(100% - 116px);
  margin: 0 !important;
  padding: 6px 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 86%, var(--panel));
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .09em !important;
  line-height: 1.2;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-shell .tool-card .tool-copy {
  padding-top: 24px;
}

@media (max-width: 1100px) {
  .home-shell .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 800px) {
  .home-shell .tool-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 520px) {
  .home-shell .tool-card .card-label {
    top: 36px;
    right: 22px;
    max-width: calc(100% - 102px);
    padding: 5px 8px;
    font-size: 11px !important;
  }

  .home-shell .tool-card .tool-copy {
    padding-top: 18px;
  }
}

@media (max-width: 380px) {
  :where(.home-shell,.admin-shell,.tools-shell,.converter-shell,.resizer-shell,.rotator-shell,.compressor-shell,.cropper-shell),
  .site-footer {
    width: calc(100% - 20px) !important;
  }
}