/* ════════════════════════════════════════════
   DISHA — Neumorphism Dark Theme
   ════════════════════════════════════════════ */

/* ── 1. Variables — Dark (default) ── */
:root {
    --bg: #1e1e2e;
    --bg-card: #1e1e2e;
    --bg-hover: #24243a;
    --primary: #7c6aff;
    --primary-dark: #6454d6;
    --primary-light: #a89aff;
    --accent: #ff6584;
    --success: #43d98a;
    --warning: #ffb347;
    --error: #ff5f6d;
    --info: #4ecdc4;
    --text-primary: #e8e8f0;
    --text-secondary: #9494b0;
    --text-muted: #5a5a7a;
    --border: rgba(255,255,255,0.05);
    --radius: 16px;
    --radius-sm: 10px;
    --font: 'Inter', system-ui, sans-serif;
    --transition: 0.25s ease;
    --neo-out: 6px 6px 14px rgba(0,0,0,0.55), -6px -6px 14px rgba(45,45,65,0.55);
    --neo-out-sm: 4px 4px 10px rgba(0,0,0,0.5), -4px -4px 10px rgba(45,45,65,0.6);
    --neo-in: inset 3px 3px 8px rgba(0,0,0,0.5), inset -3px -3px 8px rgba(45,45,65,0.6);
    --neo-in-sm: inset 2px 2px 5px rgba(0,0,0,0.45), inset -2px -2px 5px rgba(45,45,65,0.55);
}

/* ── 1b. Variables — Light Mode ── */
[data-theme="light"] {
    --bg: #e0e5ec;
    --bg-card: #e0e5ec;
    --bg-hover: #d4d9e0;
    --primary: #6c5ce7;
    --primary-dark: #5a4bd1;
    --primary-light: #6c5ce7;
    --text-primary: #2d3436;
    --text-secondary: #636e72;
    --text-muted: #95a0a6;
    --border: rgba(0,0,0,0.06);
    --neo-out: 6px 6px 14px rgba(166,175,195,0.5), -6px -6px 14px rgba(255,255,255,0.8);
    --neo-out-sm: 4px 4px 10px rgba(166,175,195,0.45), -4px -4px 10px rgba(255,255,255,0.7);
    --neo-in: inset 3px 3px 8px rgba(166,175,195,0.5), inset -3px -3px 8px rgba(255,255,255,0.8);
    --neo-in-sm: inset 2px 2px 5px rgba(166,175,195,0.45), inset -2px -2px 5px rgba(255,255,255,0.7);
}
[data-theme="light"] select.form-input option { background: #e0e5ec; color: #2d3436; }

/* Theme toggle button — always contrasted in both modes */
.theme-toggle {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: var(--neo-out-sm);
    transition: all var(--transition);
}
.theme-toggle:hover { box-shadow: var(--neo-in-sm); }
.theme-toggle .ico { color: var(--text-primary); width:18px; height:18px; }
[data-theme="light"] .theme-toggle { background: var(--bg-card); }
:root:not([data-theme="light"]) .theme-toggle { background: #2a2a45; border-color: rgba(255,255,255,0.08); }

/* ── 2. Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text-primary);min-height:100vh;display:flex;flex-direction:column;line-height:1.6;transition:background .4s ease,color .4s ease}
a{color:var(--primary-light);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--primary)}

/* ── 2b. Animations ── */

/* Keyframes */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideLeft {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Scroll-reveal: elements start hidden, become visible */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for child elements */
.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: 0.08s; }
.stagger > *:nth-child(3) { transition-delay: 0.16s; }
.stagger > *:nth-child(4) { transition-delay: 0.24s; }
.stagger > *:nth-child(5) { transition-delay: 0.32s; }
.stagger > *:nth-child(6) { transition-delay: 0.40s; }
.stagger > *:nth-child(7) { transition-delay: 0.48s; }
.stagger > *:nth-child(8) { transition-delay: 0.56s; }
.stagger > *:nth-child(9) { transition-delay: 0.64s; }

/* Page entrance animation */
.page-enter {
    animation: fadeUp 0.5s ease both;
}

/* Card hover lift */
.hover-lift {
    transition: transform var(--transition), box-shadow var(--transition);
}
.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--neo-out), 0 12px 30px rgba(0,0,0,0.15);
}

/* Button press effect */
.btn { transition: all var(--transition); }
.btn:active { transform: scale(0.96); }

/* Theme toggle spin */
.theme-toggle:active { transform: rotate(180deg); transition: transform 0.3s ease; }

/* Navbar brand hover */
.nav-brand { transition: transform var(--transition); }
.nav-brand:hover { transform: scale(1.03); }

/* ── 3. Navbar ── */
.navbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;background:var(--bg);box-shadow:var(--neo-out-sm);position:sticky;top:0;z-index:100;flex-wrap:wrap}
.nav-brand{display:flex;align-items:center;gap:.5rem;font-size:1.4rem;font-weight:800;color:var(--text-primary);letter-spacing:-.5px}
.brand-icon{font-size:1.6rem}
.nav-right{display:flex;align-items:center;gap:.8rem}
.nav-links{display:flex;align-items:center;gap:1rem}
.nav-user{color:var(--text-secondary);font-size:.9rem}

.hamburger-btn{display:none;background:var(--bg);border:1px solid var(--border);width:42px;height:42px;border-radius:var(--radius-sm);box-shadow:var(--neo-out-sm);cursor:pointer;align-items:center;justify-content:center;font-size:1.3rem;color:var(--text-primary);transition:all var(--transition)}
.hamburger-btn:hover,.hamburger-btn:active{box-shadow:var(--neo-in-sm);color:var(--primary-light)}
.hamburger-btn .ico { color: var(--text-primary); width:18px; height:18px; }
[data-theme="light"] .hamburger-btn { background: var(--bg-card); }
:root:not([data-theme="light"]) .hamburger-btn { background: #2a2a45; border-color: rgba(255,255,255,0.08); }


/* ── 4. Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem 1.3rem;border-radius:var(--radius-sm);font-family:var(--font);font-size:.9rem;font-weight:600;cursor:pointer;border:none;transition:all var(--transition);text-decoration:none}
.btn-primary{background:var(--bg);color:var(--primary-light);box-shadow:var(--neo-out-sm)}
.btn-primary:hover{box-shadow:var(--neo-in-sm);color:var(--primary)}
.btn-outline{background:var(--bg);color:var(--text-secondary);box-shadow:var(--neo-out-sm)}
.btn-outline:hover{box-shadow:var(--neo-in-sm);color:var(--primary-light)}
.btn-full{width:100%;padding:.85rem;font-size:1rem;margin-top:.5rem}

/* ── 5. Alerts ── */
.messages-container{max-width:700px;margin:1rem auto;padding:0 1.5rem;display:flex;flex-direction:column;gap:.5rem}
.alert{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1.2rem;border-radius:var(--radius-sm);font-size:.9rem;font-weight:500;animation:slideDown .3s ease;box-shadow:var(--neo-out-sm)}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.alert-success{background:rgba(67,217,138,.08);color:var(--success)}
.alert-error{background:rgba(255,95,109,.08);color:var(--error)}
.alert-info{background:rgba(78,205,196,.08);color:var(--info)}
.alert-warning{background:rgba(255,179,71,.08);color:var(--warning)}
.alert-close{background:none;border:none;cursor:pointer;color:inherit;font-size:1rem;opacity:.7;transition:opacity var(--transition)}
.alert-close:hover{opacity:1}

/* ── 6. Auth Pages ── */
.auth-container{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem 1rem}
.auth-card{background:var(--bg-card);border-radius:var(--radius);padding:2.5rem;width:100%;max-width:520px;box-shadow:var(--neo-out);animation:fadeUp .4s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.auth-header{text-align:center;margin-bottom:2rem}
.auth-icon{font-size:3rem;margin-bottom:.5rem}
.auth-header h1{font-size:1.8rem;font-weight:800;color:var(--primary-light)}
.auth-header p{color:var(--text-secondary);margin-top:.3rem}

/* ── 7. Forms ── */
.auth-form{display:flex;flex-direction:column;gap:1rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-group{display:flex;flex-direction:column;gap:.4rem}
.form-group label{font-size:.85rem;font-weight:600;color:var(--text-secondary);letter-spacing:.02em}
.form-input{background:var(--bg);border:none;border-radius:var(--radius-sm);padding:.75rem 1rem;color:var(--text-primary);font-family:var(--font);font-size:.95rem;transition:box-shadow var(--transition);width:100%;box-shadow:var(--neo-in)}
.form-input::placeholder{color:var(--text-muted)}
.form-input:focus{outline:none;box-shadow:var(--neo-in),0 0 0 2px rgba(124,106,255,.3)}
.input-error{box-shadow:var(--neo-in),0 0 0 2px rgba(255,95,109,.4)!important}
.field-error{font-size:.8rem;color:var(--error);margin-top:.2rem}
.form-error{background:rgba(255,95,109,.08);border-radius:var(--radius-sm);padding:.7rem 1rem;color:var(--error);font-size:.9rem;box-shadow:var(--neo-in-sm)}
.auth-footer{text-align:center;margin-top:1.5rem;color:var(--text-secondary);font-size:.9rem}

/* ── 8. Dashboard ── */
.main-content{flex:1}
.dashboard-container{max-width:1100px;margin:0 auto;padding:2rem 1.5rem}
.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}
.dashboard-header h1{font-size:1.8rem;font-weight:800}
.dashboard-header p{color:var(--text-secondary);margin-top:.2rem}

.stats-row{display:flex;gap:1.2rem;margin-bottom:2.5rem;flex-wrap:wrap}
.stat-card{background:var(--bg-card);border-radius:var(--radius);padding:1.2rem 2rem;display:flex;flex-direction:column;align-items:center;min-width:160px;flex:1;box-shadow:var(--neo-out);transition:all var(--transition)}
.stat-card:hover{box-shadow:var(--neo-in)}
.stat-number{font-size:2rem;font-weight:800;color:var(--primary-light)}
.stat-label{font-size:.8rem;color:var(--text-muted);margin-top:.2rem;text-align:center}

.section-title{font-size:1.2rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:1.2rem}

/* ── 8b. Search & Filter Bar ── */
.filter-container{background:var(--bg-card);border-radius:var(--radius);padding:1.2rem 1.5rem;box-shadow:var(--neo-out);margin-bottom:1.8rem;display:flex;flex-direction:column;gap:1rem}
.search-box{position:relative;display:flex;align-items:center}
.search-icon{position:absolute;left:1.2rem;font-size:1.1rem;pointer-events:none;opacity:.7}
.search-input{padding-left:3.2rem!important;padding-right:2.5rem!important;font-size:.95rem;height:48px}
.search-clear-btn{position:absolute;right:1rem;background:none;border:none;color:var(--text-muted);font-size:1rem;cursor:pointer;padding:.2rem;border-radius:50%;transition:color var(--transition)}
.search-clear-btn:hover{color:var(--text-primary)}

.filter-pills{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.filter-pill{background:var(--bg);border:none;padding:.5rem 1rem;border-radius:50px;font-family:var(--font);font-size:.83rem;font-weight:600;color:var(--text-secondary);cursor:pointer;box-shadow:var(--neo-out-sm);transition:all var(--transition);user-select:none}
.filter-pill:hover{box-shadow:var(--neo-in-sm);color:var(--text-primary)}
.filter-pill.active{background:var(--primary);color:#fff;box-shadow:var(--neo-in-sm),0 0 12px rgba(124,106,255,.3)}

.filter-results-info{font-size:.82rem;color:var(--text-muted);display:flex;align-items:center;justify-content:space-between}

/* ── 9. Opportunity Cards ── */
.opportunity-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem}

.opportunity-card{background:var(--bg-card);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;gap:.8rem;transition:all var(--transition);box-shadow:var(--neo-out)}
.opportunity-card:hover{box-shadow:var(--neo-in);background:var(--bg-hover)}

.opp-card-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.btn-save{display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .75rem;border-radius:50px;font-size:.78rem;font-weight:700;cursor:pointer;border:none;background:var(--bg);color:var(--text-secondary);box-shadow:var(--neo-out-sm);transition:all var(--transition)}
.btn-save:hover{box-shadow:var(--neo-in-sm);color:var(--warning)}
.btn-save.is-saved{background:rgba(255,179,71,.15);color:var(--warning);box-shadow:var(--neo-in-sm)}

.opp-category{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.3rem .8rem;border-radius:50px;width:fit-content}
.opp-internship{background:rgba(124,106,255,.12);color:var(--primary-light)}
.opp-scholarship{background:rgba(67,217,138,.12);color:var(--success)}
.opp-certification{background:rgba(78,205,196,.12);color:var(--info)}
.opp-course{background:rgba(255,179,71,.12);color:var(--warning)}
.opp-hackathon{background:rgba(255,101,132,.12);color:var(--accent)}
.opp-job{background:rgba(255,255,255,.06);color:var(--text-secondary)}
.opp-other{background:rgba(255,255,255,.04);color:var(--text-muted)}
.opp-title{font-size:1rem;font-weight:700;color:var(--text-primary);line-height:1.4}
.opp-desc{font-size:.88rem;color:var(--text-secondary);line-height:1.5}
.opp-meta{display:flex;align-items:center;gap:.5rem;font-size:.83rem;color:var(--text-muted)}
.opp-apply-btn{margin-top:auto;width:100%}


/* ── 10. Empty State ── */
.empty-state{text-align:center;padding:4rem 2rem;color:var(--text-secondary)}
.empty-icon{font-size:4rem;margin-bottom:1rem}
.empty-state h3{font-size:1.3rem;font-weight:700;margin-bottom:.5rem}
.empty-state p{font-size:.95rem;color:var(--text-muted)}

/* ── 11. Footer ── */
.footer{text-align:center;padding:1.5rem;color:var(--text-muted);font-size:.85rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}

/* ── 12. Telegram Card ── */
.telegram-card{display:flex;align-items:flex-start;gap:1.2rem;background:var(--bg-card);border-radius:var(--radius);padding:1.5rem;margin-bottom:2rem;box-shadow:var(--neo-out)}
.telegram-linked{box-shadow:var(--neo-out),0 0 0 1px rgba(67,217,138,.15)}
.telegram-card-icon{font-size:2.2rem;flex-shrink:0}
.telegram-card-body h3{font-size:1.1rem;font-weight:700;margin-bottom:.3rem}
.telegram-card-body p{color:var(--text-secondary);font-size:.9rem}

.btn-telegram{display:inline-flex;align-items:center;gap:.6rem;margin-top:1rem;padding:.75rem 1.5rem;background:var(--bg);color:#2AABEE;font-weight:700;font-size:.95rem;border-radius:var(--radius-sm);text-decoration:none;transition:all var(--transition);box-shadow:var(--neo-out-sm);width:fit-content}
.btn-telegram:hover{box-shadow:var(--neo-in-sm);color:#2AABEE}
.btn-telegram:active{box-shadow:var(--neo-in)}
.tg-icon{font-size:1.1rem}
.tg-hint{margin-top:.6rem;font-size:.82rem;color:var(--text-muted)}

.link-steps{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0 .8rem}
.link-step{display:flex;align-items:center;gap:.8rem;font-size:.88rem;color:var(--text-secondary)}
.step-num{background:var(--primary);color:#fff;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0;box-shadow:2px 2px 6px rgba(0,0,0,.4)}

.token-box{display:flex;align-items:center;gap:.8rem;background:var(--bg);border-radius:var(--radius-sm);padding:.7rem 1rem;flex-wrap:wrap;box-shadow:var(--neo-in)}
.token-box code{font-family:'Courier New',monospace;font-size:.88rem;color:var(--primary-light);word-break:break-all;flex:1}
.copy-btn{background:var(--bg);border:none;border-radius:var(--radius-sm);color:var(--primary-light);font-size:.8rem;font-weight:600;cursor:pointer;padding:.35rem .8rem;transition:all var(--transition);white-space:nowrap;box-shadow:var(--neo-out-sm)}
.copy-btn:hover{box-shadow:var(--neo-in-sm)}
.text-muted{color:var(--text-muted);font-size:.88rem}

/* ── 13. Admin Panel ── */
.admin-container{max-width:1200px;margin:0 auto;padding:2rem 1.5rem}
.admin-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}
.admin-header h1{font-size:1.8rem;font-weight:800}
.admin-header p{color:var(--text-secondary);margin-top:.2rem}
.admin-section{margin-top:1rem}

.admin-table-wrapper{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--neo-out)}
.admin-table{width:100%;border-collapse:collapse;font-size:.9rem}
.admin-table thead{background:rgba(124,106,255,.06)}
.admin-table th{padding:.9rem 1.2rem;text-align:left;font-weight:700;font-size:.8rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.admin-table tbody tr{border-bottom:1px solid var(--border);transition:background var(--transition)}
.admin-table tbody tr:last-child{border-bottom:none}
.admin-table tbody tr:hover{background:var(--bg-hover)}
.admin-table td{padding:.85rem 1.2rem;color:var(--text-primary);vertical-align:middle}
.td-num{color:var(--text-muted);font-size:.8rem;width:40px}
.td-title{font-weight:600;max-width:260px}
.td-date{color:var(--text-secondary);white-space:nowrap}

.status-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .7rem;border-radius:50px;font-size:.75rem;font-weight:700;white-space:nowrap}
.status-published{background:rgba(67,217,138,.1);color:var(--success)}
.status-draft{background:rgba(255,179,71,.1);color:var(--warning)}

.td-actions{white-space:nowrap}
.action-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-sm);font-size:1rem;cursor:pointer;border:none;background:var(--bg);transition:all var(--transition);text-decoration:none;margin-right:4px;box-shadow:var(--neo-out-sm)}
.action-btn:hover{box-shadow:var(--neo-in-sm)}
.action-edit:hover{color:var(--primary-light)}
.action-publish:hover{color:var(--success)}
.action-unpublish:hover{color:var(--warning)}
.action-delete:hover{color:var(--error)}

textarea.form-input{resize:vertical;min-height:80px}
select.form-input{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239494b0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
select.form-input option{background:#1e1e2e;color:var(--text-primary)}
.optional{font-size:.75rem;color:var(--text-muted);font-weight:400}

.publish-toggle-row{background:var(--bg);border-radius:var(--radius-sm);padding:1rem;box-shadow:var(--neo-in)}
.toggle-label{display:flex;align-items:flex-start;gap:.8rem;cursor:pointer}
.toggle-label input[type="checkbox"]{margin-top:3px;width:16px;height:16px;accent-color:var(--primary);flex-shrink:0}
.toggle-text strong{display:block;font-size:.95rem;color:var(--text-primary)}
.toggle-text small{font-size:.8rem;color:var(--text-muted)}

/* ── 14. Responsive — Tablet ── */
@media(max-width:768px){
    .navbar{padding:.8rem 1.2rem}
    .nav-brand{font-size:1.2rem}
    .nav-user{display:none}
    .auth-card{padding:2rem 1.5rem}
    .form-row{grid-template-columns:1fr 1fr;gap:.8rem}
    .stats-row{gap:.8rem}
    .stat-card{min-width:120px;padding:1rem 1.2rem}
    .stat-number{font-size:1.6rem}
    .dashboard-header,.admin-header{flex-direction:column;align-items:flex-start;gap:.8rem}
    .dashboard-header h1,.admin-header h1{font-size:1.5rem}
    .opportunity-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
    .telegram-card{flex-direction:column;gap:.8rem}
    .admin-table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .admin-table{min-width:620px}
}

/* ── 14b. Responsive — Mobile Menu ── */
.nav-links.active {
    display: flex !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .8rem !important;
    padding: 1.2rem !important;
    margin-top: .8rem !important;
    background: var(--bg-card) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--neo-out) !important;
    animation: slideDown .25s ease !important;
}
.nav-links.active .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: .75rem !important;
}
.nav-links.active .nav-user {
    text-align: center !important;
    padding: .4rem 0 !important;
    font-weight: 600 !important;
}

@media(max-width:1100px){
    .hamburger-btn{display:inline-flex!important}
    .nav-links{display:none}
}



/* ── 15. Responsive — Phone ── */
@media(max-width:480px){
    .navbar{padding:.7rem 1rem}

    .btn{padding:.45rem .9rem;font-size:.82rem}
    .auth-container{padding:1rem .8rem;align-items:flex-start;padding-top:2rem}
    .auth-card{padding:1.5rem 1rem;border-radius:12px}
    .auth-icon{font-size:2.2rem}
    .auth-header h1{font-size:1.5rem}
    .form-row{grid-template-columns:1fr;gap:0}
    .auth-form{gap:.85rem}
    .form-input{padding:.65rem .9rem;font-size:.9rem}
    .btn-full{padding:.75rem;font-size:.95rem}
    .messages-container{padding:0 .8rem;margin:.8rem auto}
    .alert{font-size:.82rem;padding:.7rem 1rem}
    .dashboard-container,.admin-container{padding:1.2rem 1rem}
    .dashboard-header h1,.admin-header h1{font-size:1.3rem}
    .stats-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
    .stat-card{min-width:unset;padding:.9rem}
    .stat-number{font-size:1.4rem}
    .stat-label{font-size:.7rem}
    .section-title{font-size:1rem;margin-bottom:1rem}
    .opportunity-grid{grid-template-columns:1fr;gap:.8rem}
    .opportunity-card{padding:1.1rem}
    .telegram-card{padding:1.1rem;flex-direction:column;gap:.7rem}
    .btn-telegram{width:100%;justify-content:center;font-size:.9rem;padding:.7rem 1rem}
    .token-box{flex-direction:column;align-items:stretch}
    .copy-btn{width:100%;justify-content:center;padding:.5rem}

    .admin-table-wrapper{border:none;box-shadow:none}
    .admin-table,.admin-table thead,.admin-table tbody,.admin-table th,.admin-table td,.admin-table tr{display:block}
    .admin-table thead{display:none}
    .admin-table tbody tr{background:var(--bg-card);border-radius:var(--radius);margin-bottom:.8rem;padding:1rem;box-shadow:var(--neo-out)}
    .admin-table tbody tr:hover{background:var(--bg-hover)}
    .admin-table td{padding:.3rem 0;border:none;font-size:.88rem;display:flex;align-items:center;gap:.5rem}
    .admin-table td::before{content:attr(data-label);font-size:.72rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;min-width:70px;flex-shrink:0}
    .td-num{display:none}
    .td-title{font-size:1rem;flex-direction:column;align-items:flex-start}
    .td-title::before{display:none}
    .td-actions{justify-content:flex-start;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border)}
    .td-actions::before{display:none}
    .action-btn{width:38px;height:38px;font-size:1.1rem}
    .footer{padding:1rem;font-size:.78rem}
}

/* ── 16. Profile Page ── */
.profile-header-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.8rem;
    box-shadow: var(--neo-out);
    margin-bottom: 2rem;
}
.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--primary-light);
    font-size: 2.2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--neo-out-sm);
    flex-shrink: 0;
}
.profile-main-info { display: flex; flex-direction: column; gap: .2rem; }
.profile-name { font-size: 1.6rem; font-weight: 800; color: var(--text-primary); }
.profile-username { font-size: .95rem; color: var(--primary-light); font-weight: 600; }
.profile-email { font-size: .9rem; color: var(--text-secondary); }
.profile-education { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .4rem; font-size: .85rem; color: var(--text-muted); }

.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.profile-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--neo-out);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.profile-card-title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); border-bottom: 1px solid var(--border); padding-bottom: .6rem; }
.info-list { display: flex; flex-direction: column; gap: .7rem; }
.info-item { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; border-bottom: 1px dashed rgba(255,255,255,.05); padding-bottom: .4rem; }
.info-label { color: var(--text-muted); font-weight: 500; }
.info-val { color: var(--text-primary); font-weight: 600; }

.status-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--bg);
    padding: 1rem 1.2rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--neo-in);
}
.status-icon { font-size: 1.5rem; }

@media(max-width: 768px) {
    .profile-header-card { flex-direction: column; text-align: center; gap: 1rem; }
    .profile-education { justify-content: center; }
    .profile-grid { grid-template-columns: 1fr; }
}