/* ---- css/tron_reset.css ---- */
/* === Neon/Tron Enhancement Applied === */
/* ==========================================================================
   SuperTwentyPlus — Tron Reset v2.3
   Standard baseline reset for all Tron/Neon apps
   ========================================================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* Tron baseline */
body {
  line-height: 1.4;
  background-color: #000914;
  color: #b8eaff;
  font-family: "Share Tech Mono", monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove list styles */
ol, ul { list-style: none; }

/* Remove quotes */
blockquote, q { quotes: none; }

/* Consistent tables */
table { border-collapse: collapse; border-spacing: 0; }

/* Scrollbar (Tron Cyan glow) */
::-webkit-scrollbar {
  width: 8px;
  background: #001a33;
}
::-webkit-scrollbar-thumb {
  background: #00eaff;
  box-shadow: 0 0 10px #00eaff;
}

.tron-enhanced{filter:drop-shadow(0 0 6px cyan)}

/* ---- css/tron_colors.css ---- */
/* === Neon/Tron Enhancement Applied === */
/* =====================================================
   SuperTwentyPlus TRON Color System (v1.0)
   Unified color map for all apps
   -----------------------------------------------------
   • Core Palette: Cyan, Magenta, Red, Yellow, Green, Blue
   • All colors are active (TRUE) unless marked FALSE
   • Each app activates a palette through [data-theme]
   ===================================================== */

/* ---------- CORE BRAND COLORS ---------- */
:root {
  /* Tron core */
  --tron-cyan: #00e5ff;       /* TRUE - global primary */
  --tron-magenta: #ff2bd6;    /* TRUE - creative accent */
  --tron-red: #ff4d6d;        /* TRUE - alerts, self-destruct, error */
  --tron-yellow: #ffc300;     /* TRUE - data, logic, analysis */
  --tron-green: #35ff9e;      /* TRUE - success, encryption secure */
  --tron-blue: #005eff;       /* TRUE - deep tech trust */
  --tron-white: #e9f1ff;      /* TRUE - neutral text overlay */
  --tron-orange: #ff8c00;     /* FALSE - reserved */
  --tron-purple: #a020f0;     /* FALSE - reserved future tier */

  /* Base background and text */
  --tron-bg: #0a0e14;
  --tron-bg-soft: #0f1420;
  --tron-text: var(--tron-white);
  --tron-muted: #9ab0c9;
  --tron-card: #0d1220cc;

  /* Shared shadows and glows */
  --tron-glow: 0 0 12px rgba(0,229,255,.65), 0 0 24px rgba(255,43,214,.35);
  --tron-shadow: 0 10px 30px rgba(0,0,0,.45);
  --tron-radius: 16px;
}

/* =====================================================
   APP COLOR PROFILES
   Each app uses 3 keys: primary, secondary, accent.
   ===================================================== */

/* Encryptor+ (Security Suite) */
body[data-theme="encryptor"] {
  --primary: var(--tron-cyan);
  --secondary: var(--tron-green);
  --accent: var(--tron-magenta);
}

/* URL Shortener */
body[data-theme="shortener"] {
  --primary: var(--tron-cyan);
  --secondary: var(--tron-magenta);
  --accent: var(--tron-blue);
}

/* Convert (Measurement & Data) */
body[data-theme="convert"] {
  --primary: var(--tron-yellow);
  --secondary: var(--tron-cyan);
  --accent: var(--tron-white);
}

/* Self-Destructing Message */
body[data-theme="destruct"] {
  --primary: var(--tron-red);
  --secondary: var(--tron-cyan);
  --accent: var(--tron-magenta);
}

/* Lucky Spinner / Games */
body[data-theme="spinner"] {
  --primary: var(--tron-magenta);
  --secondary: var(--tron-pink, #ff5cf0);
  --accent: var(--tron-blue);
}

/* Weather / Forecast */
body[data-theme="weather"] {
  --primary: var(--tron-blue);
  --secondary: var(--tron-yellow);
  --accent: var(--tron-cyan);
}

/* Temp Notepad */
body[data-theme="notepad"] {
  --primary: var(--tron-blue);
  --secondary: var(--tron-white);
  --accent: var(--tron-cyan);
}

/* IQ / Logic Games */
body[data-theme="logic"] {
  --primary: var(--tron-yellow);
  --secondary: var(--tron-magenta);
  --accent: var(--tron-cyan);
}

/* Astrology / Analyzer */
body[data-theme="astro"] {
  --primary: var(--tron-purple);
  --secondary: var(--tron-magenta);
  --accent: var(--tron-blue);
}

/* =====================================================
   Base Tron Utility Colors
   These ensure glowing UI consistency across all apps
   ===================================================== */
.tron-glow-text {
  text-shadow: var(--tron-glow);
}
.tron-border {
  border: 1px solid rgba(0,229,255,.25);
  border-radius: var(--tron-radius);
}
.tron-card {
  background: var(--tron-card);
  box-shadow: var(--tron-shadow), var(--tron-glow);
  border-radius: var(--tron-radius);
  padding: 1rem;
}

/* =====================================================
   Light Variant Support (Optional)
   Only activate if user explicitly toggles light mode.
   ===================================================== */
:root.light, :root.light body {
  --tron-bg: #f5f9ff;
  --tron-bg-soft: #eef3fb;
  --tron-text: #111;
  --tron-card: #ffffffee;
  --tron-glow: 0 0 8px rgba(0,229,255,.3), 0 0 14px rgba(255,43,214,.2);
}

/* =====================================================
   Usage Example (in HTML)
   <body data-theme="shortener">
     <h1 class="tron-glow-text">Tron URL Shortener</h1>
   </body>
   ===================================================== */

.tron-enhanced{filter:drop-shadow(0 0 6px cyan)}

/* ---- css/tron_fonts.css ---- */
/* === Neon/Tron Enhancement Applied === */
/* ==========================================================
   SuperTwentyPlus Tron Placeholder File
   File: tron_fonts.css
   Purpose: Tron CSS placeholder for rebuild engine compatibility
   ========================================================== */
body { background-color: #000; color: #0ff; font-family: "Share Tech Mono", monospace; }
.tron-glow { text-shadow: 0 0 10px #0ff; }

.tron-enhanced{filter:drop-shadow(0 0 6px cyan)}

/* ---- css/tron_base.css ---- */
/* === Neon/Tron Enhancement Applied === */
/* =====================================================
   SuperTwentyPlus TRON Base Styles (v1.0)
   Global typography, layout grid, and glow rhythm
   Used with: tron_colors.css
   -----------------------------------------------------
   • Unifies font sizing, weights, spacing
   • Establishes consistent neon-glow rhythm
   • Sets Tron-standard buttons, inputs, cards, headings
   ===================================================== */

/* ---------- GLOBAL RESET ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

/* ---------- TYPOGRAPHY ---------- */
body {
  font-family: "Share Tech Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tron-text);
  background: radial-gradient(1200px 700px at 50% -10%, rgba(0,229,255,.10), transparent 60%),
              radial-gradient(900px 500px at 80% 10%, rgba(255,43,214,.08), transparent 60%),
              var(--tron-bg);
}

/* Headings */
h1, h2, h3, h4, h5 {
  font-family: Orbitron, sans-serif;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--tron-text);
  text-shadow: var(--tron-glow);
  margin: 0 0 0.5em 0;
}

/* Paragraphs and small text */
p {
  margin: 0 0 1em;
  color: var(--tron-muted);
}
small {
  font-size: 0.9rem;
  color: var(--tron-muted);
}

/* ---------- CONTAINER SYSTEM ---------- */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}

/* Sections & Cards */
section {
  margin: 24px 0;
}
.card {
  background: var(--tron-card);
  border: 1px solid rgba(0,229,255,.25);
  border-radius: var(--tron-radius);
  box-shadow: var(--tron-shadow), var(--tron-glow);
  padding: 18px;
}

/* ---------- BUTTONS ---------- */
.btn {
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  cursor: pointer;
  background: #111827;
  color: var(--tron-text);
  font-family: inherit;
  transition: all .2s ease-in-out;
}
.btn:hover {
  box-shadow: 0 0 12px var(--primary);
}
.btn.primary {
  background: linear-gradient(135deg, rgba(0,229,255,.25), rgba(255,43,214,.18));
  border-color: rgba(0,229,255,.35);
}
.btn.danger {
  border-color: rgba(255,77,109,.55);
  background: rgba(255,77,109,.15);
}
.btn.ghost {
  background: transparent;
  border-color: rgba(255,255,255,.18);
}

/* ---------- INPUTS ---------- */
input[type="text"],
input[type="url"],
textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: var(--tron-bg-soft);
  color: var(--tron-text);
  outline: none;
  font-family: inherit;
  font-size: 1rem;
}
input:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,229,255,.18);
}

/* ---------- LINKS ---------- */
a {
  color: var(--primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-shadow: 0 0 6px var(--accent);
}

/* ---------- GRID BACKGROUND ---------- */
.neon-grid {
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(0,229,255,.12) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255,43,214,.12) 1px, transparent 1px) 0 0 / 40px 40px;
  mask: radial-gradient(ellipse at center, black 10%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ---------- FOOTER BASE ---------- */
footer {
  text-align: center;
  font-size: 0.95rem;
  color: var(--tron-muted);
  margin-top: 60px;
  padding: 20px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 720px) {
  body { font-size: 15px; }
  .container { padding: 0 12px; }
  .btn { padding: 10px 14px; font-size: 0.95rem; }
}

/* ---------- TRON UTILITIES ---------- */
.tron-glow-text {
  text-shadow: var(--tron-glow);
}
.tron-border {
  border: 1px solid rgba(0,229,255,.25);
  border-radius: var(--tron-radius);
}
.tron-card {
  background: var(--tron-card);
  border: 1px solid rgba(0,229,255,.25);
  border-radius: var(--tron-radius);
  box-shadow: var(--tron-shadow), var(--tron-glow);
  padding: 1rem;
}
.tron-sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.4), transparent);
  margin: 1rem 0;
}

/* ---------- LIGHT MODE (Optional future) ---------- */
:root.light, :root.light body {
  background: #f5f9ff;
  color: #111;
}
:root.light .card {
  background: #ffffff;
  border-color: rgba(0,0,0,.08);
}
:root.light .tron-glow-text {
  text-shadow: 0 0 8px rgba(0,229,255,.3), 0 0 14px rgba(255,43,214,.2);
}

.tron-enhanced{filter:drop-shadow(0 0 6px cyan)}

/* ---- css/tron_layout.css ---- */
/* === Neon/Tron Enhancement Applied === */
/* ==========================================================
   SuperTwentyPlus Tron Placeholder File
   File: tron_layout.css
   Purpose: Tron CSS placeholder for rebuild engine compatibility
   ========================================================== */
body { background-color: #000; color: #0ff; font-family: "Share Tech Mono", monospace; }
.tron-glow { text-shadow: 0 0 10px #0ff; }

.tron-enhanced{filter:drop-shadow(0 0 6px cyan)}

/* ---- css/tron_ui.css ---- */
/* === Neon/Tron Enhancement Applied === */
/* ==========================================================
   SuperTwentyPlus Tron Placeholder File
   File: tron_ui.css
   Purpose: Tron CSS placeholder for rebuild engine compatibility
   ========================================================== */
body { background-color: #000; color: #0ff; font-family: "Share Tech Mono", monospace; }
.tron-glow { text-shadow: 0 0 10px #0ff; }

.tron-enhanced{filter:drop-shadow(0 0 6px cyan)}

/* ---- css/tron_animations.css ---- */
/* === Neon/Tron Enhancement Applied === */
/* ==========================================================
   SuperTwentyPlus Tron Placeholder File
   File: tron_animations.css
   Purpose: Tron CSS placeholder for rebuild engine compatibility
   ========================================================== */
body { background-color: #000; color: #0ff; font-family: "Share Tech Mono", monospace; }
.tron-glow { text-shadow: 0 0 10px #0ff; }

.tron-enhanced{filter:drop-shadow(0 0 6px cyan)}

/* ---- css/tron_effects.css ---- */
/* === Neon/Tron Enhancement Applied === */
/* ==========================================================
   SuperTwentyPlus Tron Placeholder File
   File: tron_effects.css
   Purpose: Tron CSS placeholder for rebuild engine compatibility
   ========================================================== */
body { background-color: #000; color: #0ff; font-family: "Share Tech Mono", monospace; }
.tron-glow { text-shadow: 0 0 10px #0ff; }

.tron-enhanced{filter:drop-shadow(0 0 6px cyan)}

/* ---- css/tron_darkmode.css ---- */
/* === Neon/Tron Enhancement Applied === */
/* ==========================================================
   SuperTwentyPlus Tron Placeholder File
   File: tron_darkmode.css
   Purpose: Tron CSS placeholder for rebuild engine compatibility
   ========================================================== */
body { background-color: #000; color: #0ff; font-family: "Share Tech Mono", monospace; }
.tron-glow { text-shadow: 0 0 10px #0ff; }

.tron-enhanced{filter:drop-shadow(0 0 6px cyan)}

/* ---- css/tron_responsive.css ---- */
/* === Neon/Tron Enhancement Applied === */
/* ==========================================================
   SuperTwentyPlus Tron Placeholder File
   File: tron_responsive.css
   Purpose: Tron CSS placeholder for rebuild engine compatibility
   ========================================================== */
body { background-color: #000; color: #0ff; font-family: "Share Tech Mono", monospace; }
.tron-glow { text-shadow: 0 0 10px #0ff; }

.tron-enhanced{filter:drop-shadow(0 0 6px cyan)}