/* ===== RESET & BASE ===== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#C9A84C;--gold-light:#E8C97A;--gold-dark:#9A7534;--gold-pale:rgba(201,168,76,0.12);
  --deep:#0F1923;--deep2:#162433;--deep3:#1A2D42;--deep4:#1E3350;
  --text:#F0EDE6;--text-muted:#8FA3B8;--text-dim:#4A6275;
  --border:rgba(201,168,76,0.2);--border-soft:rgba(255,255,255,0.06);
  --success:#2ECC71;--success-bg:rgba(46,204,113,0.1);
  --error:#E74C3C;--error-bg:rgba(231,76,60,0.1);
  --info:#5B9BD5;--info-bg:rgba(91,155,213,0.12);
  --sidebar-w:260px;
  --radius:12px;--radius-lg:18px;--radius-sm:8px;
}

html,body{min-height:100vh;font-family:'DM Sans',sans-serif;background:var(--deep);color:var(--text);font-size:15px}

/* ===== SCREENS ===== */
.screen{display:none;min-height:100vh}
.screen.active{display:flex}

/* ===== AUTH SCREEN ===== */
#screen-auth{
  align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 20% 30%,rgba(201,168,76,0.07) 0%,transparent 55%),
             radial-gradient(ellipse at 80% 70%,rgba(91,155,213,0.05) 0%,transparent 50%),
             var(--deep);
  padding:24px;position:relative;overflow:hidden;
}
.auth-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.auth-glow{position:absolute;top:-20%;left:50%;transform:translateX(-50%);width:600px;height:600px;
  background:radial-gradient(circle,rgba(201,168,76,0.04) 0%,transparent 70%);border-radius:50%}

.auth-container{width:100%;max-width:480px;position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:28px;font-size:13px;color:var(--text-muted);letter-spacing:.06em}
.brand-dot{width:8px;height:8px;background:var(--gold);border-radius:50%;box-shadow:0 0 8px var(--gold)}
.auth-title{font-family:'Playfair Display',serif;font-size:clamp(26px,4vw,38px);font-weight:700;text-align:center;
  background:linear-gradient(135deg,var(--gold-light) 0%,var(--text) 50%,var(--gold) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}
.auth-sub{text-align:center;color:var(--text-muted);font-size:14px;font-weight:300;margin-bottom:28px}

.auth-card{background:var(--deep3);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:28px;backdrop-filter:blur(10px)}
.auth-tabs{display:flex;gap:0;background:rgba(255,255,255,0.04);border:0.5px solid var(--border-soft);border-radius:var(--radius-sm);padding:3px;margin-bottom:24px}
.auth-tab{flex:1;padding:9px;border:none;border-radius:6px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:400;cursor:pointer;background:transparent;color:var(--text-muted);transition:all .2s}
.auth-tab.active{background:var(--gold);color:var(--deep);font-weight:500}

.auth-panel{display:none}
.auth-panel.active{display:block}

/* ===== FORMS ===== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group.full{grid-column:1/-1}
label{font-size:11px;font-weight:500;color:var(--gold-light);letter-spacing:.06em;text-transform:uppercase}
.req{color:var(--gold);font-style:normal}
.opt{color:var(--text-dim);font-size:10px;text-transform:none;letter-spacing:0;font-weight:400;margin-left:2px}
input[type=text],input[type=email],input[type=password],input[type=tel],select,textarea{
  background:rgba(255,255,255,0.04);border:0.5px solid rgba(201,168,76,0.18);
  border-radius:var(--radius-sm);padding:11px 14px;
  font-family:'DM Sans',sans-serif;font-size:14px;color:var(--text);
  outline:none;transition:border-color .2s,background .2s;width:100%}
input::placeholder,textarea::placeholder{color:var(--text-dim)}
input:focus,select:focus,textarea:focus{border-color:var(--gold);background:rgba(201,168,76,0.05)}
select option{background:var(--deep2);color:var(--text)}
textarea{resize:vertical;min-height:80px;line-height:1.55}

.btn-primary{
  display:block;width:100%;padding:13px;margin-top:18px;
  background:linear-gradient(135deg,var(--gold-dark),var(--gold));
  border:none;border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;color:var(--deep);
  cursor:pointer;transition:opacity .2s,transform .15s}
.btn-primary:hover{opacity:.92;transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}

.auth-footer-link,.auth-footer-text{text-align:center;font-size:12px;color:var(--text-muted);margin-top:14px}
.auth-footer-link a,.auth-footer-text a{color:var(--gold-light);text-decoration:none}

.msg-error{background:var(--error-bg);border:0.5px solid rgba(231,76,60,0.3);border-radius:var(--radius-sm);padding:10px 14px;font-size:13px;color:#F07060;margin-top:10px}
.msg-success{background:var(--success-bg);border:0.5px solid rgba(46,204,113,0.3);border-radius:var(--radius-sm);padding:10px 14px;font-size:13px;color:#5EE090;margin-top:10px}

/* ===== APP LAYOUT ===== */
#screen-app{flex-direction:row;min-height:100vh}

/* ===== SIDEBAR ===== */
.sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);height:100vh;position:sticky;top:0;
  background:var(--deep2);border-right:0.5px solid var(--border-soft);
  display:flex;flex-direction:column;padding:20px 16px;gap:0;overflow-y:auto;z-index:100}

.sidebar-brand{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);letter-spacing:.05em;padding:0 4px;margin-bottom:20px}

.sidebar-user{display:flex;align-items:center;gap:10px;padding:12px;background:rgba(255,255,255,0.04);border:0.5px solid var(--border-soft);border-radius:var(--radius-sm);margin-bottom:20px}
.user-avatar{width:40px;height:40px;border-radius:50%;background:var(--gold-pale);border:0.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;color:var(--gold);flex-shrink:0}
.user-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.user-course{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}

.sidebar-nav{display:flex;flex-direction:column;gap:2px;margin-bottom:20px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:400;color:var(--text-muted);background:transparent;cursor:pointer;text-align:left;width:100%;transition:all .18s}
.nav-item:hover{background:rgba(255,255,255,0.05);color:var(--text)}
.nav-item.active{background:var(--gold-pale);color:var(--gold-light);font-weight:500}
.nav-icon{font-size:16px;width:20px;text-align:center}

.sidebar-online{flex:1;min-height:0}
.online-title{font-size:10px;font-weight:500;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;padding:0 4px}
.online-item{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:6px}
.online-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;flex-shrink:0}
.online-name{font-size:12px;color:var(--text-muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.online-dot-sm{width:6px;height:6px;background:var(--success);border-radius:50%;flex-shrink:0}
.online-loading{font-size:12px;color:var(--text-dim);padding:4px}

.btn-logout{margin-top:16px;padding:9px 12px;border:0.5px solid var(--border-soft);border-radius:var(--radius-sm);background:transparent;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--text-dim);cursor:pointer;text-align:left;transition:all .2s}
.btn-logout:hover{border-color:rgba(231,76,60,0.4);color:#E07060;background:rgba(231,76,60,0.07)}

/* ===== MAIN CONTENT ===== */
.main-content{flex:1;min-width:0;display:flex;flex-direction:column;max-width:780px;padding:0 24px 48px;margin:0 auto;width:100%}

/* TOPBAR (mobile) */
.topbar{display:none;align-items:center;padding:14px 0;gap:12px;margin-bottom:16px;border-bottom:0.5px solid var(--border-soft)}
.hamburger{background:transparent;border:none;color:var(--text);font-size:20px;cursor:pointer;padding:4px;line-height:1}
.topbar-title{flex:1;font-family:'Playfair Display',serif;font-size:18px}
.topbar-avatar{width:34px;height:34px;border-radius:50%;background:var(--gold-pale);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;color:var(--gold)}

/* STATS */
.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:20px 0 6px}
.stat-card{background:var(--deep3);border:0.5px solid var(--border-soft);border-radius:var(--radius);padding:14px 16px;text-align:center}
.stat-num{font-family:'Playfair Display',serif;font-size:22px;color:var(--gold);font-weight:500}
.stat-lbl{font-size:11px;color:var(--text-muted);margin-top:2px}

/* PAGES */
.page{display:none;padding:16px 0 0}
.page.active{display:block}
.page-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-header h2{font-family:'Playfair Display',serif;font-size:22px;font-weight:500}
.search-input{background:var(--deep3);border:0.5px solid var(--border-soft);border-radius:var(--radius-sm);padding:9px 14px;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--text);outline:none;width:240px;transition:border-color .2s}
.search-input:focus{border-color:var(--gold)}
.search-input::placeholder{color:var(--text-dim)}

/* COMPOSER */
.post-composer{display:flex;gap:12px;background:var(--deep3);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:20px}
.composer-avatar{width:40px;height:40px;border-radius:50%;background:var(--gold-pale);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;color:var(--gold);flex-shrink:0;margin-top:2px}
.composer-box{flex:1;min-width:0}
.composer-box textarea{width:100%;background:rgba(255,255,255,0.03);border:0.5px solid var(--border-soft);border-radius:var(--radius-sm);padding:10px 14px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--text);outline:none;resize:none;height:70px;line-height:1.55;transition:border-color .2s}
.composer-box textarea:focus{border-color:rgba(201,168,76,0.35)}
.composer-actions{display:flex;align-items:center;gap:8px;margin-top:10px;justify-content:flex-end}
.select-sm{background:var(--deep2);border:0.5px solid var(--border-soft);border-radius:6px;padding:7px 10px;font-family:'DM Sans',sans-serif;font-size:12px;color:var(--text-muted);outline:none;cursor:pointer}
.btn-post{background:var(--gold);border:none;border-radius:6px;padding:8px 16px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;color:var(--deep);cursor:pointer;transition:opacity .2s}
.btn-post:hover{opacity:.88}

/* FEED */
.feed-loading{text-align:center;color:var(--text-muted);font-size:14px;padding:32px}

.feed-post{background:var(--deep3);border:0.5px solid var(--border-soft);border-radius:var(--radius-lg);padding:20px;margin-bottom:14px;transition:border-color .2s}
.feed-post:hover{border-color:rgba(201,168,76,0.18)}
.post-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.post-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;flex-shrink:0}
.post-meta-name{font-size:14px;font-weight:500}
.post-meta-info{font-size:11px;color:var(--text-muted)}
.post-pill{display:inline-flex;align-items:center;background:var(--info-bg);border:0.5px solid rgba(91,155,213,0.22);border-radius:5px;padding:2px 9px;font-size:11px;color:var(--info);margin-bottom:9px}
.post-body{font-size:14px;color:rgba(240,237,230,0.88);line-height:1.65;margin-bottom:14px;cursor:pointer}
.post-footer{display:flex;gap:10px;align-items:center}
.react-btn{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-muted);cursor:pointer;padding:5px 10px;border-radius:6px;background:rgba(255,255,255,0.04);border:none;font-family:'DM Sans',sans-serif;transition:all .18s}
.react-btn:hover{background:var(--gold-pale);color:var(--gold-light)}
.react-btn.liked{background:var(--gold-pale);color:var(--gold)}

/* MEMBROS */
.membros-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.membro-card{background:var(--deep3);border:0.5px solid var(--border-soft);border-radius:var(--radius-lg);padding:18px;text-align:center;transition:border-color .2s,transform .15s;cursor:pointer}
.membro-card:hover{border-color:var(--border);transform:translateY(-2px)}
.membro-av{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:500;margin:0 auto 10px}
.membro-name{font-size:14px;font-weight:500;margin-bottom:3px}
.membro-course{font-size:12px;color:var(--gold-light);margin-bottom:4px}
.membro-grau{font-size:11px;color:var(--text-muted)}
.membro-badge-online{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:11px;color:var(--success)}

/* TÓPICOS */
.topics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.topic-card{background:var(--deep3);border:0.5px solid var(--border-soft);border-radius:var(--radius-lg);padding:20px;cursor:pointer;transition:border-color .2s,transform .15s}
.topic-card:hover{border-color:var(--border);transform:translateY(-2px)}
.topic-card-all{border-color:rgba(201,168,76,0.15)}
.topic-icon{font-size:24px;margin-bottom:10px}
.topic-card h4{font-size:15px;font-weight:500;margin-bottom:5px}
.topic-card p{font-size:12px;color:var(--text-muted);line-height:1.55;margin-bottom:12px}
.topic-meta{font-size:11px;color:var(--gold-light)}

/* PERFIL */
.perfil-card{background:var(--deep3);border:0.5px solid var(--border-soft);border-radius:var(--radius-lg);padding:28px;max-width:620px}
.perfil-avatar-area{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.perfil-avatar{width:64px;height:64px;border-radius:50%;background:var(--gold-pale);border:0.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:500;color:var(--gold);flex-shrink:0}
.perfil-name{font-family:'Playfair Display',serif;font-size:20px}
.perfil-course{font-size:13px;color:var(--gold-light);margin-top:2px}
.divider{border:none;border-top:0.5px solid var(--border-soft);margin:16px 0 20px}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(10,18,28,0.85);backdrop-filter:blur(6px);z-index:1000;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal-box{background:var(--deep3);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:24px;width:100%;max-width:560px;max-height:80vh;overflow-y:auto}
.modal-comments h4{font-size:14px;font-weight:500;color:var(--gold-light);margin:16px 0 10px;padding-top:16px;border-top:0.5px solid var(--border-soft)}
.comment-item{display:flex;gap:10px;margin-bottom:12px}
.comment-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;flex-shrink:0}
.comment-body{font-size:13px;line-height:1.5;color:rgba(240,237,230,0.82)}
.comment-author{font-size:11px;color:var(--text-muted);margin-bottom:2px}
.comment-input-area{display:flex;gap:8px;margin-top:12px;align-items:flex-end}
.comment-input-area textarea{flex:1;height:50px;font-size:13px}
.comment-input-area .btn-post{flex-shrink:0;height:36px;padding:0 14px;font-size:12px}

/* AVATAR COLORS */
.av-0{background:rgba(201,168,76,0.18);color:#C9A84C}
.av-1{background:rgba(91,155,213,0.18);color:#5B9BD5}
.av-2{background:rgba(46,204,113,0.15);color:#2ECC71}
.av-3{background:rgba(210,100,160,0.18);color:#E090C0}
.av-4{background:rgba(231,140,60,0.18);color:#E78C3C}
.av-5{background:rgba(150,100,220,0.18);color:#C090F0}

/* PHOTO UPLOAD */
.photo-upload-area{background:rgba(255,255,255,0.03);border:1.5px dashed rgba(201,168,76,0.3);border-radius:var(--radius);padding:16px;cursor:pointer;transition:border-color .2s,background .2s;text-align:center}
.photo-upload-area:hover{border-color:var(--gold);background:rgba(201,168,76,0.05)}
.photo-preview{display:flex;flex-direction:column;align-items:center;gap:6px}
.photo-placeholder{font-size:28px}
.photo-preview span{font-size:13px;color:var(--text-muted)}
.photo-preview small{font-size:11px;color:var(--text-dim)}
.photo-img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);margin:0 auto;display:block}

/* PERFIL AVATAR WRAPPER */
.perfil-avatar-wrapper{position:relative;width:64px;height:64px;cursor:pointer;flex-shrink:0}
.perfil-avatar-wrapper .perfil-avatar{width:64px;height:64px;font-size:24px}
.perfil-photo-img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);position:absolute;top:0;left:0}
.perfil-avatar-overlay{position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;font-size:18px;opacity:0;transition:opacity .2s}
.perfil-avatar-wrapper:hover .perfil-avatar-overlay{opacity:1}
.perfil-photo-hint{font-size:11px;color:var(--text-dim);margin-top:4px}

/* AVATAR WITH PHOTO in feed/members */
.av-photo{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* BACK TO SITE */
.back-to-site{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);text-decoration:none;padding:7px 12px;border:0.5px solid var(--border-soft);border-radius:20px;margin-bottom:16px;transition:all .2s}
.back-to-site:hover{color:var(--gold-light);border-color:var(--border)}
.sidebar-back-btn{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);text-decoration:none;padding:8px 10px;border:0.5px solid var(--border-soft);border-radius:var(--radius-sm);margin-bottom:14px;transition:all .2s;background:rgba(255,255,255,0.03)}
.sidebar-back-btn:hover{color:var(--gold-light);border-color:var(--border);background:rgba(201,168,76,0.06)}

/* NOTIFICAÇÕES */
.notif-bell{position:relative;cursor:pointer;font-size:18px;padding:4px;border-radius:6px;transition:background .2s;flex-shrink:0}
.notif-bell:hover{background:rgba(255,255,255,0.08)}
.notif-badge{position:absolute;top:-4px;right:-4px;background:var(--error);color:#fff;font-size:10px;font-weight:500;padding:1px 5px;border-radius:10px;min-width:16px;text-align:center}
.notif-panel{position:fixed;top:0;right:0;width:320px;height:100vh;background:var(--deep2);border-left:0.5px solid var(--border-soft);z-index:150;display:none;flex-direction:column;box-shadow:-8px 0 24px rgba(0,0,0,0.4)}
.notif-panel.open{display:flex}
.notif-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:0.5px solid var(--border-soft)}
.notif-header span{font-size:15px;font-weight:500}
.notif-mark-read{background:transparent;border:none;font-size:12px;color:var(--gold-light);cursor:pointer;font-family:'DM Sans',sans-serif}
.notif-item{display:flex;gap:10px;padding:14px 20px;border-bottom:0.5px solid var(--border-soft);transition:background .15s;cursor:pointer}
.notif-item:hover{background:rgba(255,255,255,0.04)}
.notif-item.unread{background:rgba(201,168,76,0.06)}
.notif-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;flex-shrink:0;overflow:hidden}
.notif-dot{width:8px;height:8px;background:var(--gold);border-radius:50%;flex-shrink:0;margin-top:6px}
.notif-text{font-size:13px;line-height:1.5;color:rgba(240,237,230,0.85);flex:1}
.notif-text strong{color:var(--text);font-weight:500}
.notif-time{font-size:11px;color:var(--text-dim);margin-top:3px}
.notif-empty{text-align:center;padding:40px 20px;font-size:13px;color:var(--text-muted)}

/* PINNED POST */
.pinned-post{background:var(--deep3);border:0.5px solid rgba(201,168,76,0.35);border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:16px}
.pinned-label{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--gold);font-weight:500;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.btn-admin{background:var(--gold-pale);border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:8px 14px;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--gold-light);cursor:pointer;transition:all .2s}
.btn-admin:hover{background:rgba(201,168,76,0.2)}

/* EVENTOS */
.evento-card{background:var(--deep3);border:0.5px solid var(--border-soft);border-radius:var(--radius-lg);padding:18px 20px;display:flex;gap:16px;align-items:flex-start;transition:border-color .2s;margin-bottom:12px}
.evento-card:hover{border-color:var(--border)}
.evento-card.passado{opacity:.5}
.evento-date-box{background:var(--gold-pale);border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;text-align:center;flex-shrink:0;min-width:58px}
.evento-dia{font-family:'Playfair Display',serif;font-size:24px;color:var(--gold);font-weight:700;line-height:1}
.evento-mes{font-size:10px;color:var(--gold-light);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.evento-info{flex:1}
.evento-titulo{font-size:15px;font-weight:500;margin-bottom:4px}
.evento-desc{font-size:13px;color:var(--text-muted);line-height:1.5;margin-bottom:8px}
.evento-meta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.evento-tag{font-size:11px;color:var(--text-dim)}
.evento-tag.curso{color:var(--gold-light)}
.btn-evento-link{display:inline-flex;align-items:center;gap:5px;background:var(--gold);color:var(--deep);font-size:12px;font-weight:500;padding:6px 14px;border-radius:6px;text-decoration:none;transition:opacity .2s}
.btn-evento-link:hover{opacity:.88}
.eventos-empty{text-align:center;padding:48px 20px;color:var(--text-muted);font-size:14px}
.eventos-section-title{font-size:12px;font-weight:500;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin:20px 0 10px;padding:0 2px}

/* RANKING */
.ranking-info{font-size:13px;color:var(--text-muted);background:var(--deep3);border:0.5px solid var(--border-soft);border-radius:var(--radius-sm);padding:10px 16px;margin-bottom:20px}
.ranking-info strong{color:var(--gold-light)}
.ranking-item{display:flex;align-items:center;gap:14px;background:var(--deep3);border:0.5px solid var(--border-soft);border-radius:var(--radius-lg);padding:14px 18px;margin-bottom:10px}
.ranking-item.top1{border-color:rgba(201,168,76,0.4);background:rgba(201,168,76,0.06)}
.ranking-item.top2{border-color:rgba(192,192,192,0.25)}
.ranking-item.top3{border-color:rgba(205,127,50,0.25)}
.rank-pos{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;width:32px;text-align:center;flex-shrink:0}
.rank-medal-1{color:var(--gold)}
.rank-medal-2{color:#C0C0C0}
.rank-medal-3{color:#CD7F32}
.rank-pos-num{color:var(--text-muted);font-family:'DM Sans',sans-serif;font-size:16px}
.rank-av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;flex-shrink:0;overflow:hidden}
.rank-info{flex:1}
.rank-name{font-size:14px;font-weight:500}
.rank-course{font-size:12px;color:var(--text-muted)}
.rank-pts{text-align:right}
.rank-pts-num{font-family:'Playfair Display',serif;font-size:20px;color:var(--gold);font-weight:500}
.rank-pts-lbl{font-size:11px;color:var(--text-muted)}
.rank-breakdown{font-size:11px;color:var(--text-dim);margin-top:2px}
@media(max-width:768px){
  .sidebar{position:fixed;left:-100%;transition:left .28s;z-index:200}
  .sidebar.open{left:0}
  .topbar{display:flex}
  .main-content{padding:0 16px 48px}
  .stats-bar{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
  .form-group.full{grid-column:1}
  .topics-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:440px){
  .topics-grid{grid-template-columns:1fr}
  .auth-card{padding:20px}
}