/* style.css */
:root {
 --bg: #060810; --bg2: #0b101d; --panel: rgba(15,22,39,.72); --panel2: #101728;
 --line: rgba(255,255,255,.08); --text: #f7f9ff; --muted: #8997b0;
 --primary: #4d8dff; --purple: #8b5cf6; --cyan: #39d5ff; --green: #36df9a;
 --good: #36df9a; --bad: #ef4444; --warn: #f59e0b;
 --glow: rgba(77,141,255,.25);
}

body.light-mode {
 --bg: #f4f7fc; --bg2: #e6ebf5; --panel: rgba(255,255,255,.82); --panel2: #ffffff;
 --line: rgba(0,0,0,.08); --text: #0f172a; --muted: #64748b;
 --glow: rgba(77,141,255,.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
 min-height: 100vh; color: var(--text);
 font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
 background:
  radial-gradient(circle at 15% 0%, rgba(77,141,255,.18), transparent 32%),
  radial-gradient(circle at 85% 10%, rgba(139,92,246,.18), transparent 30%),
  radial-gradient(circle at 50% 100%, rgba(57,213,255,.08), transparent 35%),
  var(--bg);
 transition: background-color 0.4s ease, color 0.4s ease;
 overflow-x: hidden;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.celestial-overlay {
 position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: 0;
 display: flex; align-items: center; justify-content: center; overflow: hidden;
 transition: opacity 0.35s ease;
 backface-visibility: hidden;
 will-change: opacity;
}
.celestial-overlay.active { opacity: 1; pointer-events: all; }
.sky-bg {
 position: absolute; width: 170vmax; height: 170vmax; border-radius: 50%;
 transform: scale(0) translateZ(0); 
 transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
 backface-visibility: hidden;
 will-change: transform;
}
.celestial-overlay.to-light .sky-bg { background: radial-gradient(circle, #fef08a 0%, #60a5fa 45%, #0284c7 100%); }
.celestial-overlay.to-dark .sky-bg { background: radial-gradient(circle, #312e81 0%, #0f172a 60%, #020617 100%); }
.celestial-overlay.animating .sky-bg { transform: scale(1.5) translateZ(0); }

.celestial-stage {
 position: relative; z-index: 2; display: flex; align-items: center; justify-content: center;
 transform: scale(0) rotate(-180deg) translateZ(0); 
 transition: transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
 backface-visibility: hidden;
 will-change: transform;
}
.celestial-overlay.animating .celestial-stage { transform: scale(2.4) rotate(0deg) translateZ(0); }

.stars-burst { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; }
.celestial-overlay.to-dark.animating .stars-burst { opacity: 1; }
.star-dot { position: absolute; background: #fff; border-radius: 50%; animation: twinkle 0.8s infinite alternate ease-in-out; }
@keyframes twinkle { 0% { transform: scale(0.3); opacity: 0.2; } 100% { transform: scale(1.2); opacity: 1; } }

.topbar {
 height: 76px; display: flex; align-items: center; justify-content: space-between;
 padding: 0 6%; border-bottom: 1px solid var(--line);
 background: rgba(6,9,16,.65); backdrop-filter: blur(24px);
 position: sticky; top: 0; z-index: 20;
}
body.light-mode .topbar { background: rgba(244,247,252,.75); }
.logo-wrap { display: flex; align-items: center; gap: 14px; }
.logo-box {
 width: 42px; height: 42px; border-radius: 10px;
 background: var(--panel2);
 border: 1px solid var(--line); display: grid; place-items: center;
 box-shadow: 0 0 20px var(--glow); transition: transform 0.3s ease;
 overflow: hidden;
 padding: 3px;
}
.logo-box:hover { transform: scale(1.05); }
.brand-logo-img {
 width: 100%; height: 100%; object-fit: contain; border-radius: 7px; display: block;
}
.logo-text strong { display: block; font-size: 17px; letter-spacing: -.4px; font-weight: 800; color: var(--text); }
.logo-text span { display: block; color: var(--muted); font-size: 9px; margin-top: 1px; letter-spacing: 1px; font-weight: 600; }

.nav { display: flex; gap: 6px; }
.nav .nav-btn {
 text-decoration: none; border: 0; background: transparent; color: var(--muted); padding: 9px 15px; border-radius: 8px;
 font-weight: 500; font-size: 13px; transition: .2s;
}
.nav .nav-btn:hover, .nav .nav-btn.active { background: rgba(255,255,255,.06); color: var(--text); }
body.light-mode .nav .nav-btn:hover, body.light-mode .nav .nav-btn.active { background: rgba(0,0,0,.06); }

.actions { display: flex; gap: 9px; }
.icon-btn, .settings-btn {
 border: 1px solid var(--line); background: var(--panel2); color: var(--text);
 border-radius: 8px; padding: 9px 14px; font-weight: 600; font-size: 13px; transition: all 0.2s ease;
}
.icon-btn:hover { background: var(--line); transform: translateY(-1px); }
.settings-btn { border: 0; background: linear-gradient(135deg,var(--primary),var(--purple)); box-shadow: 0 6px 20px var(--glow); color: white; }
.settings-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 25px var(--glow); }

.container { width: min(1180px, 90%); margin: auto; padding: 60px 0 40px; }
.hero { text-align: center; max-width: 840px; margin: 0 auto; }
.badge {
 display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 6px;
 border: 1px solid var(--line); background: rgba(77,141,255,.08);
 color: var(--primary); font-size: 11px; font-weight: 600; margin-bottom: 22px;
}
.badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
h1 { font-size: clamp(38px,6vw,68px); line-height: 1.05; letter-spacing: -2px; font-weight: 900; }
.gradient { background: linear-gradient(110deg, var(--text), var(--primary) 50%, var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { max-width: 640px; margin: 20px auto 0; color: var(--muted); font-size: 15px; line-height: 1.7; }

.content-card {
 border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
 backdrop-filter: blur(20px); padding: 42px; margin-top: 20px;
}
.lead { font-size: 16px; color: var(--muted); margin-top: 14px; line-height: 1.7; }
.info-section { margin-top: 32px; }
.info-section h3 { font-size: 18px; color: var(--text); margin-bottom: 10px; }
.info-section p { font-size: 14px; color: var(--muted); line-height: 1.8; }
.info-section ul { margin-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.8; margin-top: 8px; }

.disclaimer-box {
 margin-top: 28px; padding: 22px; border-radius: 10px;
 background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.25);
}
.disclaimer-box h3 { color: var(--bad); font-size: 16px; margin-bottom: 8px; }
.disclaimer-box p { color: var(--text); font-size: 14px; line-height: 1.7; }

.search-wrap { margin-top: 28px; max-width: 480px; margin-left: auto; margin-right: auto; position: relative; }
.search-input {
 width: 100%; padding: 12px 18px; border-radius: 8px; border: 1px solid var(--line); 
 background: var(--panel2); color: var(--text); font-size: 14px; outline: none; transition: border-color 0.2s ease;
}

.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 48px; }
.tool-link { text-decoration: none; color: inherit; display: block; }
.tool-card {
 border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
 backdrop-filter: blur(16px); padding: 28px 24px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
 text-align: left; height: 100%; position: relative; overflow: hidden;
 display: flex; flex-direction: column; justify-content: flex-start;
}
.tool-card::before {
 content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
 background: linear-gradient(90deg, var(--primary), var(--purple));
 opacity: 0; transition: opacity 0.3s ease;
}
.tool-card:hover { 
 transform: translateY(-4px); 
 border-color: rgba(77,141,255,0.4); 
 box-shadow: 0 14px 35px rgba(0,0,0,0.35); 
}
.tool-card:hover::before { opacity: 1; }

.tool-icon { 
 width: 46px; height: 46px; border-radius: 8px; 
 background: rgba(77,141,255,0.1); border: 1px solid rgba(77,141,255,0.2);
 display: grid; place-items: center; margin-bottom: 18px; 
 color: var(--primary); transition: all 0.3s ease;
}
.tool-card:hover .tool-icon {
 background: var(--primary); color: #fff; border-color: var(--primary);
 transform: scale(1.05);
}

.tool-card h3 { font-size: 18px; margin-bottom: 8px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; }
.tool-card p { color: var(--muted); font-size: 13px; line-height: 1.6; }

.footer { border-top: 1px solid var(--line); margin-top: 80px; padding: 24px 0; color: var(--muted); font-size: 12px; display: flex; justify-content: space-between; }

.modal-overlay {
 position: fixed; top: 0; left: 0; width: 100%; height: 100%;
 background: rgba(0,0,0,0.65); backdrop-filter: blur(10px);
 display: none; align-items: center; justify-content: center; z-index: 100;
}
.modal-overlay.active { display: flex; }
.modal {
 width: min(580px,92%); max-height: 85vh; overflow-y: auto;
 background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
 padding: 28px; box-shadow: 0 24px 60px rgba(0,0,0,0.6); color: var(--text);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.modal-header h3 { font-size: 20px; color: var(--text); font-weight: 800; }
.close-modal { background: transparent; border: 0; color: var(--muted); font-size: 20px; padding: 4px; }
.setting-section { margin-bottom: 22px; }
.setting-section h4 { font-size: 11px; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.setting-desc { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.setting-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.setting-row label { font-size: 14px; font-weight: 500; }
.color-picker { display: flex; gap: 10px; }
.color-dot { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform 0.2s ease; }
.color-dot:hover { transform: scale(1.15); }
.color-dot.active { border-color: var(--text); transform: scale(1.1); }
.danger-btn { background: #ef4444; color: #fff; border: 0; padding: 9px 16px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.secondary-btn { background: var(--panel); color: var(--text); border: 1px solid var(--line); padding: 9px 16px; border-radius: 8px; font-size: 12px; font-weight: 600; }

.reorder-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.reorder-item { padding: 10px 14px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); font-size: 13px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.reorder-actions { display: flex; gap: 6px; }
.reorder-btn { background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; transition: all 0.2s ease; }
.reorder-btn:hover:not(:disabled) { background: var(--line); transform: translateY(-1px); }
.reorder-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.switch-input { display: none; }
.switch-label { width: 44px; height: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; position: relative; cursor: pointer; display: inline-block; transition: background 0.3s ease; }
.switch-label:after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: all 0.3s ease; }
.switch-input:checked + .switch-label { background: var(--primary); }
.switch-input:checked + .switch-label:after { left: 22px; background: #fff; }

/* Password Component Styles */
.drop-zone {
 border: 2px dashed var(--line); border-radius: 12px; padding: 32px; text-align: center;
 background: var(--panel2); cursor: pointer; transition: all 0.2s ease; margin-bottom: 20px;
}
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--primary); background: rgba(77,141,255,0.05); }
.drop-zone p { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--muted); }
.file-input-hidden { display: none; }

.password-wrapper {
 position: relative;
 display: flex;
 align-items: center;
 width: 100%;
}
.password-wrapper input {
 width: 100%;
 padding-right: 44px;
}
.toggle-password-btn {
 position: absolute;
 right: 8px;
 top: 50%;
 transform: translateY(-50%);
 background: transparent;
 border: none;
 cursor: pointer;
 color: var(--muted);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 6px;
 z-index: 10;
 border-radius: 6px;
 user-select: none;
 transition: color 0.2s ease;
}
.toggle-password-btn:hover {
 color: var(--primary);
}

@media(max-width:850px){ .nav { display: none; } }
@media(max-width:560px){
 .topbar { padding: 0 4%; } .container { width: 92%; padding-top: 40px; } h1 { letter-spacing: -1.5px; }
 .logo-text span { display: none; } .footer { display: flex; flex-direction: column; gap: 8px; text-align: center; }
 .content-card { padding: 24px; }
}

/* Mobile Display Fix for Navigation Links */
@media (max-width: 850px) {
  .topbar {
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 12px 16px;
    gap: 12px;
    height: auto;
  }

  .logo-wrap {
    flex: 1;
  }

  .actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .nav {
    display: flex !important;
    order: 3;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 4px;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav-btn {
    flex-shrink: 0;
    font-size: 0.85rem;
    padding: 6px 12px;
  }
}