/* ===== Tools Shared CSS (Light Theme) ===== */

/* Dropdown Menu */
.navbar-dropdown { position: relative; }
.navbar-dropdown-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.dropdown-arrow { font-size: .65rem; transition: transform .3s; }
.navbar-dropdown-menu {
    display: none; position: absolute; top: 110%; left: 0; background: #fff;
    border: 1px solid rgba(27,38,59,.12); border-radius: 12px; min-width: 200px; padding: 8px 0;
    box-shadow: 0 12px 32px rgba(0,0,0,.12); z-index: 100;
}
.navbar-dropdown:hover .navbar-dropdown-menu,
.navbar-dropdown.open .navbar-dropdown-menu { display: block; }
.navbar-dropdown:hover .dropdown-arrow,
.navbar-dropdown.open .dropdown-arrow { transform: rotate(180deg); }
.dropdown-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 18px; color: #65748b;
    text-decoration: none; font-size: .92rem; transition: all .2s;
}
.dropdown-item:hover { background: rgba(88,101,242,.08); color: #1b263b; }
.dropdown-item.active { color: #5865f2; font-weight: 600; }
.dropdown-item i { width: 18px; text-align: center; font-size: .85rem; }

/* Input Styles */
.input-with-action { display: flex; gap: 10px; align-items: stretch; }
.input-with-action .input-with-toggle { flex: 1; min-width: 0; }
.input-with-action .input-field { flex: 1; min-width: 0; }
.input-action-btn {
    width: auto !important; flex-shrink: 0; padding: 10px 18px !important;
    font-size: .88rem !important; white-space: nowrap;
}
.input-with-toggle { position: relative; display: flex; align-items: center; }
.input-with-toggle .input-field { width: 100%; }
.toggle-visibility {
    position: absolute; right: 12px; background: none; border: none; color: #65748b;
    cursor: pointer; font-size: 1rem; padding: 4px; transition: color .2s; z-index: 1;
}
.toggle-visibility:hover { color: #1b263b; }

/* Spinner */
.tool-loading { display: flex; align-items: center; gap: 12px; padding: 20px; justify-content: center; color: #1b263b; }
.spinner {
    width: 24px; height: 24px; border: 3px solid rgba(88,101,242,.2); border-top-color: #5865f2;
    border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Error */
.tool-error {
    display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: rgba(237,66,69,.06);
    border: 1px solid rgba(237,66,69,.2); border-radius: 10px; color: #ed4245; margin-top: 16px;
}

/* ===========================
   LOOKUP RESULTS
   =========================== */
.lookup-result { margin-top: 20px; animation: fadeSlide .4s; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.lookup-banner-wrap, .lookup-splash-wrap { border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.lookup-banner { width: 100%; height: auto; display: block; border-radius: 12px; }
.splash-label {
    font-size: .82rem; color: #65748b; text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 8px; font-weight: 600;
}

.lookup-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.lookup-icon { width: 72px; height: 72px; border-radius: 50%; border: 3px solid rgba(88,101,242,.2); }
.lookup-header-info { flex: 1; }
.lookup-server-name { font-size: 1.4rem; font-weight: 700; color: #1b263b; margin: 0; }
.lookup-server-desc { font-size: .9rem; color: #65748b; margin: 4px 0 8px; }

.lookup-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.lookup-badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
    background: rgba(88,101,242,.08); color: #5865f2; border-radius: 20px; font-size: .78rem; font-weight: 600;
}

.lookup-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0; }
.lookup-stat {
    display: flex; align-items: center; gap: 12px; padding: 14px; background: #f8f9fb;
    border: 1px solid rgba(27,38,59,.08); border-radius: 10px;
}
.lookup-stat i { font-size: 1.2rem; color: #5865f2; }
.online-dot { color: #18b979 !important; font-size: .7rem !important; }
.lookup-stat-num { display: block; font-size: 1.15rem; font-weight: 700; color: #1b263b; }
.lookup-stat-label { font-size: .78rem; color: #65748b; }

.lookup-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.detail-item {
    display: flex; flex-direction: column; gap: 2px; padding: 10px 14px;
    background: #f8f9fb; border: 1px solid rgba(27,38,59,.08); border-radius: 8px;
}
.detail-label { font-size: .75rem; color: #65748b; text-transform: uppercase; letter-spacing: .5px; }
.detail-value { font-size: .92rem; color: #1b263b; word-break: break-all; }

/* ===========================
   TOKEN / USER RESULTS
   =========================== */
.token-result { margin-top: 20px; animation: fadeSlide .4s; }

.token-status {
    display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 10px;
    font-weight: 700; font-size: 1.05rem; margin-bottom: 16px;
}
.token-status.valid { background: rgba(24,185,121,.08); color: #18b979; border: 1px solid rgba(24,185,121,.2); }
.token-status.invalid { background: rgba(237,66,69,.08); color: #ed4245; border: 1px solid rgba(237,66,69,.2); }

/* User Banner */
.user-banner-wrap { border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.user-banner-img { width: 100%; height: auto; display: block; border-radius: 12px; max-height: 200px; object-fit: cover; }

.token-profile { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.token-avatar { width: 72px; height: 72px; border-radius: 50%; border: 3px solid rgba(88,101,242,.2); }
.token-profile-info { flex: 1; }
.token-username { font-size: 1.3rem; font-weight: 700; color: #1b263b; margin: 0; }
.token-user-id { font-size: .85rem; color: #65748b; }

/* Bio */
.user-bio {
    padding: 12px 16px; background: #f8f9fb; border: 1px solid rgba(27,38,59,.08);
    border-radius: 10px; color: #1b263b; font-size: .9rem; margin-bottom: 12px;
    white-space: pre-wrap; word-break: break-word;
}

/* Download Buttons */
.download-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.btn-download {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
    background: rgba(88,101,242,.08); border: 1px solid rgba(88,101,242,.2); border-radius: 8px;
    color: #5865f2; font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .2s;
}
.btn-download:hover { background: rgba(88,101,242,.15); color: #4752c4; }
.btn-download i { font-size: .8rem; }

/* Accent Color Swatch */
.accent-swatch {
    display: inline-block; width: 16px; height: 16px; border-radius: 4px;
    vertical-align: middle; margin-right: 6px; border: 1px solid rgba(27,38,59,.12);
}

/* Info Grid */
.token-info-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
}
.token-info-item {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px;
    background: #f8f9fb; border: 1px solid rgba(27,38,59,.08); border-radius: 10px;
}
.token-info-item i { font-size: 1.1rem; color: #5865f2; margin-top: 2px; }
.token-info-label { display: block; font-size: .75rem; color: #65748b; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.token-info-value { display: block; font-size: .95rem; color: #1b263b; word-break: break-all; }
.nitro-yes { color: #9b59b6; font-weight: 600; }
.mfa-on { color: #18b979; }
.mfa-off { color: #ed4245; }

/* Security Note */
.token-security-note {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    background: rgba(88,101,242,.05); border: 1px solid rgba(88,101,242,.12);
    border-radius: 8px; margin-top: 12px; margin-bottom: 8px; font-size: .85rem; color: #65748b;
}
.token-security-note i { color: #5865f2; }

/* Limited Info Note */
.limited-note {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    background: rgba(245,183,0,.06); border: 1px solid rgba(245,183,0,.2); border-radius: 8px;
    font-size: .85rem; color: #856404; margin-bottom: 16px;
}
.limited-note i { color: #f5b700; }

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 860px) {
    .navbar-dropdown-menu { position: static; box-shadow: none; background: #f8f9fb; border: none; }
    .navbar-dropdown:hover .navbar-dropdown-menu { display: none; }
    .navbar-dropdown.open .navbar-dropdown-menu { display: block; }
}

@media (max-width: 620px) {
    .input-with-action { flex-direction: column; }
    .lookup-details { grid-template-columns: 1fr; }
    .token-info-grid { grid-template-columns: 1fr; }
    .lookup-header { flex-direction: column; text-align: center; }
    .token-profile { flex-direction: column; text-align: center; }
    .download-buttons { justify-content: center; }
}