/* ============================================================
   Survey Dosen — Main Stylesheet v2.0
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Sora:wght@400;600;700;800&display=swap');

/* ===== CSS VARIABLES ===== */
:root {
  --primary:    #1a1a2e;
  --secondary:  #16213e;
  --accent:     #0f3460;
  --highlight:  #e94560;
  --hl-dark:    #c53155;
  --gold:       #f5a623;
  --success:    #10b981;
  --warning:    #f59e0b;
  --danger:     #ef4444;
  --info:       #3b82f6;
  --white:      #ffffff;
  --gray-50:    #f8fafc;
  --gray-100:   #f1f5f9;
  --gray-200:   #e2e8f0;
  --gray-300:   #cbd5e1;
  --gray-400:   #94a3b8;
  --gray-500:   #64748b;
  --gray-600:   #475569;
  --gray-700:   #334155;
  --gray-800:   #1e293b;
  --gray-900:   #0f172a;
  --radius:     12px;
  --radius-sm:  8px;
  --radius-lg:  20px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow:     0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.15);
  --font-main:    'Plus Jakarta Sans', sans-serif;
  --font-heading: 'Sora', sans-serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family: var(--font-main);
  background: var(--gray-50);
  color: var(--gray-800);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}

/* ===== TYPOGRAPHY ===== */
h1,h2,h3,h4,h5 { font-family:var(--font-heading); font-weight:700; line-height:1.3; }
h1 { font-size:clamp(1.6rem,4vw,2.4rem); }
h2 { font-size:clamp(1.3rem,3vw,1.9rem); }
h3 { font-size:1.15rem; }
h4 { font-size:1rem; }
a  { color:var(--highlight); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ===== LAYOUT ===== */
.container    { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
.container-sm { max-width:720px;  margin:0 auto; padding:0 1.5rem; }
.container-xs { max-width:520px;  margin:0 auto; padding:0 1.5rem; }

/* ===== TOPBAR MAHASISWA ===== */
.topbar-mhs {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  padding:.7rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 16px rgba(0,0,0,.25);
}
.topbar-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.topbar-brand {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.topbar-brand span { color: var(--highlight); }
.topbar-right { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.topbar-user {
  font-size: .8rem;
  color: rgba(255,255,255,.75);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.nim-badge {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 100px;
  padding: .15rem .5rem;
  font-size: .73rem;
  font-weight: 600;
  color: white;
}
.topbar-link {
  color: rgba(255,255,255,.8);
  font-size: .8rem;
  font-weight: 500;
  padding: .3rem .65rem;
  border-radius: var(--radius-sm);
  transition: all .18s;
  text-decoration: none;
}
.topbar-link:hover { background:rgba(255,255,255,.12); color:white; text-decoration:none; }
.topbar-logout {
  background: rgba(233,69,96,.25);
  color: #fca5a5;
  border: 1px solid rgba(233,69,96,.3);
}
.topbar-logout:hover { background:rgba(233,69,96,.45); color:white; }

/* ===== HERO ===== */
.survey-hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 60%, #1a365d 100%);
  color: white;
  padding: 2.5rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.survey-hero::before {
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 70% 50%, rgba(233,69,96,.2), transparent 60%);
  pointer-events: none;
}
.survey-hero h1 { color:white; margin-bottom:.5rem; position:relative; }
.survey-hero p  { color:rgba(255,255,255,.8); max-width:520px; margin:0 auto; position:relative; font-size:.95rem; }
.period-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  padding: .35rem .9rem;
  border-radius: 100px;
  font-size: .8rem;
  font-weight: 600;
  color: white;
  margin-bottom: 1rem;
}

/* ===== CARD ===== */
.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow .2s;
}
.card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.card-header {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.card-header h3 { margin:0; font-size:.95rem; color:var(--gray-700); }
.card-body { padding: 1.5rem; }
.card-header.grad-primary {
  background: linear-gradient(135deg, var(--highlight), #ff6b6b);
  border-radius: 12px 12px 0 0;
}
.card-header.grad-dark {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 12px 12px 0 0;
}

/* ===== IDENTITY BOX ===== */
.identity-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.identity-item {
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
  border: 1px solid var(--gray-200);
}
.identity-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-400); display:block; margin-bottom:.25rem; }
.identity-value { font-size:.95rem; font-weight:700; color:var(--gray-800); }

/* ===== NAVBAR ADMIN ===== */
.navbar {
  background: var(--primary);
  padding: .85rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.navbar-inner { max-width:1300px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.navbar-brand { font-family:var(--font-heading); font-size:1.15rem; font-weight:700; color:white; display:flex; align-items:center; gap:.6rem; }
.navbar-brand span { color:var(--highlight); }
.navbar-nav { display:flex; align-items:center; gap:.25rem; }
.nav-link { color:rgba(255,255,255,.75); padding:.45rem .9rem; border-radius:var(--radius-sm); font-size:.875rem; font-weight:500; transition:all .2s; white-space:nowrap; }
.nav-link:hover,.nav-link.active { color:white; background:rgba(255,255,255,.12); text-decoration:none; }
.nav-link.active { color:var(--highlight); }

/* ===== SIDEBAR ===== */
.admin-layout { display:flex; min-height:calc(100vh - 56px); }
.sidebar { width:240px; background:var(--secondary); padding:1.5rem 0; flex-shrink:0; position:sticky; top:56px; height:calc(100vh - 56px); overflow-y:auto; }
.sidebar-section { margin-bottom:1.5rem; }
.sidebar-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.3); padding:0 1.25rem .5rem; }
.sidebar-link { display:flex; align-items:center; gap:.7rem; color:rgba(255,255,255,.7); padding:.6rem 1.25rem; font-size:.875rem; font-weight:500; transition:all .18s; border-left:3px solid transparent; }
.sidebar-link:hover { color:white; background:rgba(255,255,255,.07); text-decoration:none; }
.sidebar-link.active { color:white; background:rgba(233,69,96,.15); border-left-color:var(--highlight); }
.sidebar-link .icon { font-size:1rem; flex-shrink:0; }
.main-content { flex:1; padding:2rem; min-width:0; }

/* ===== BUTTONS ===== */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.25rem; border-radius:var(--radius-sm);
  font-family:var(--font-main); font-size:.875rem; font-weight:600;
  cursor:pointer; border:2px solid transparent;
  transition:all .2s; text-decoration:none; white-space:nowrap; line-height:1.4;
}
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn svg { flex-shrink:0; }
.btn-primary { background:var(--highlight); color:white; border-color:var(--highlight); }
.btn-primary:hover { background:var(--hl-dark); border-color:var(--hl-dark); color:white; }
.btn-secondary { background:var(--gray-100); color:var(--gray-700); border-color:var(--gray-200); }
.btn-secondary:hover { background:var(--gray-200); color:var(--gray-800); }
.btn-success { background:var(--success); color:white; border-color:var(--success); }
.btn-success:hover { background:#059669; color:white; }
.btn-danger { background:var(--danger); color:white; border-color:var(--danger); }
.btn-danger:hover { background:#dc2626; color:white; }
.btn-warning { background:var(--warning); color:white; border-color:var(--warning); }
.btn-warning:hover { background:#d97706; color:white; }
.btn-outline { background:transparent; color:var(--gray-700); border-color:var(--gray-300); }
.btn-outline:hover { background:var(--gray-50); color:var(--gray-800); }
.btn-sm { padding:.4rem .85rem; font-size:.8rem; }
.btn-lg { padding:.85rem 1.75rem; font-size:1rem; }
.btn-block { width:100%; justify-content:center; }

/* ===== FORM ELEMENTS ===== */
.form-group { margin-bottom:1rem; }
.form-label { display:block; font-size:.85rem; font-weight:600; color:var(--gray-700); margin-bottom:.4rem; }
.form-control {
  width:100%; padding:.65rem 1rem; border:1.5px solid var(--gray-200);
  border-radius:var(--radius-sm); font-family:var(--font-main); font-size:.9rem;
  color:var(--gray-800); background:white; transition:all .18s; outline:none;
}
.form-control:focus { border-color:var(--highlight); box-shadow:0 0 0 3px rgba(233,69,96,.1); }
.form-control::placeholder { color:var(--gray-400); }
textarea.form-control { resize:vertical; min-height:80px; }
.form-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .75rem center; background-size:16px; padding-right:2.5rem; }
.form-hint { font-size:.78rem; color:var(--gray-400); margin-top:.3rem; }
.required { color:var(--danger); }

/* ===== QUESTION CARDS ===== */
.question-card {
  padding:1.1rem 1.25rem;
  border:1.5px solid var(--gray-200);
  border-radius:var(--radius-sm);
  margin-bottom:.75rem;
  transition:all .2s;
  background:var(--white);
}
.question-card.answered  { border-color:#86efac; background:#f0fdf4; }
.question-card.unanswered-error { border-color:var(--danger); background:#fff5f5; animation:shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.q-text { font-size:.9rem; color:var(--gray-700); display:flex; align-items:flex-start; gap:.6rem; }
.q-number {
  min-width:24px; height:24px; border-radius:50%;
  background:var(--primary); color:white;
  font-size:.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:.1rem;
}

/* ===== SCALE / RATING INPUTS ===== */
.scale-group { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.75rem; }
.scale-option { display:none; }
.scale-label {
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  padding:.55rem .7rem; border-radius:var(--radius-sm);
  border:1.5px solid var(--gray-200); cursor:pointer;
  font-size:.78rem; font-weight:500; color:var(--gray-600);
  transition:all .18s; min-width:90px; flex:1;
  text-align:center; user-select:none;
}
.scale-label span:first-child { font-size:1.3rem; }
.scale-label:hover { border-color:var(--gray-400); background:var(--gray-50); transform:translateY(-2px); }
.scale-option:checked + .scale-label { font-weight:700; transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.12); }
.scale-option:checked + .scale-label.scale-5 { background:#d1fae5; border-color:#10b981; color:#065f46; }
.scale-option:checked + .scale-label.scale-4 { background:#dbeafe; border-color:#3b82f6; color:#1e40af; }
.scale-option:checked + .scale-label.scale-3 { background:#fef3c7; border-color:#f59e0b; color:#92400e; }
.scale-option:checked + .scale-label.scale-2 { background:#ffedd5; border-color:#f97316; color:#9a3412; }
.scale-option:checked + .scale-label.scale-1 { background:#fee2e2; border-color:#ef4444; color:#991b1b; }

/* ===== ALERTS ===== */
.alert {
  padding:.85rem 1.1rem; border-radius:var(--radius-sm);
  font-size:.875rem; border-left:4px solid;
  display:flex; align-items:flex-start; gap:.6rem;
}
.alert-success { background:#f0fdf4; border-color:var(--success); color:#065f46; }
.alert-danger   { background:#fff5f5; border-color:var(--danger); color:#991b1b; }
.alert-warning  { background:#fffbeb; border-color:var(--warning); color:#92400e; }
.alert-info     { background:#eff6ff; border-color:var(--info); color:#1e40af; }

/* ===== BADGES ===== */
.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.25rem .65rem; border-radius:100px; font-size:.75rem; font-weight:600; }
.badge-success { background:#d1fae5; color:#065f46; }
.badge-danger  { background:#fee2e2; color:#991b1b; }
.badge-warning { background:#fef3c7; color:#92400e; }
.badge-info    { background:#dbeafe; color:#1e40af; }
.badge-gray    { background:var(--gray-100); color:var(--gray-600); }
.aspek-badge { display:inline-block; padding:.15rem .55rem; border-radius:100px; font-size:.7rem; font-weight:600; color:white; }

/* ===== TABLES ===== */
.table-wrapper { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.875rem; }
thead tr { background:var(--gray-50); border-bottom:2px solid var(--gray-200); }
th { padding:.85rem 1rem; text-align:left; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-500); white-space:nowrap; }
td { padding:.85rem 1rem; border-bottom:1px solid var(--gray-100); vertical-align:middle; }
tbody tr:hover { background:var(--gray-50); }
tbody tr:last-child td { border-bottom:none; }

/* ===== SHARE BUTTONS ===== */
.share-buttons { display:flex; gap:.75rem; flex-wrap:wrap; }
.share-btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.65rem 1.15rem; border-radius:var(--radius-sm);
  font-size:.875rem; font-weight:600; cursor:pointer;
  border:none; text-decoration:none; transition:all .2s;
}
.share-btn:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.15); text-decoration:none; }
.share-btn svg { flex-shrink:0; }
.share-wa   { background:#25d366; color:white; }
.share-tg   { background:#0088cc; color:white; }
.share-copy { background:var(--gray-100); color:var(--gray-700); border:2px solid var(--gray-200); }
.share-copy:hover { background:var(--gray-200); }

/* ===== PROGRESS BAR ===== */
.survey-progress { background:var(--gray-200); height:5px; border-radius:100px; margin-bottom:2rem; overflow:hidden; }
.survey-progress-fill { height:100%; background:linear-gradient(90deg,var(--highlight),#ff6b6b); border-radius:100px; transition:width .4s ease; }

/* ===== SUCCESS PAGE ===== */
.success-icon {
  width:80px; height:80px; background:rgba(255,255,255,.2);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; margin:0 auto 1.5rem;
  box-shadow:0 8px 24px rgba(0,0,0,.1);
}

/* ===== RIWAYAT ===== */
.riwayat-item {
  display:flex; align-items:flex-start; gap:1rem; padding:.9rem;
  border-radius:var(--radius-sm); border:1.5px solid var(--gray-200);
  margin-bottom:.5rem; background:white; transition:border-color .2s;
}
.riwayat-item:hover { border-color:var(--gray-300); }
.riwayat-icon { width:38px; height:38px; background:var(--gray-100); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.riwayat-info h5 { font-size:.875rem; margin-bottom:.15rem; }
.riwayat-info p  { font-size:.8rem; color:var(--gray-500); }

/* ===== PAGE HEADER ===== */
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.page-title { font-size:1.5rem; color:var(--gray-900); margin-bottom:.3rem; }
.page-subtitle { color:var(--gray-500); font-size:.875rem; max-width:500px; }

/* ===== FILTER BAR ===== */
.filter-bar { display:flex; gap:.75rem; flex-wrap:wrap; align-items:flex-end; background:white; padding:1.25rem; border-radius:var(--radius); box-shadow:var(--shadow-sm); margin-bottom:1.5rem; }
.filter-group { flex:1; min-width:150px; }
.filter-group label { display:block; font-size:.8rem; font-weight:600; color:var(--gray-600); margin-bottom:.35rem; }

/* ===== STATS GRID ===== */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.5rem; }
.stat-card { background:white; border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow); border-top:3px solid; }
.stat-value { font-family:var(--font-heading); font-size:1.8rem; font-weight:800; margin:.25rem 0; }
.stat-label { font-size:.8rem; color:var(--gray-500); font-weight:500; }

/* ===== AUTOCOMPLETE ===== */
.autocomplete-wrapper { position:relative; }
.autocomplete-list {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:white; border:1.5px solid var(--gray-200); border-radius:var(--radius-sm);
  z-index:50; max-height:200px; overflow-y:auto; box-shadow:var(--shadow);
  display:none;
}
.autocomplete-list.show { display:block; }
.autocomplete-item { padding:.6rem 1rem; cursor:pointer; font-size:.875rem; transition:background .15s; }
.autocomplete-item:hover { background:var(--gray-50); }

/* ===== LOGIN PAGE ===== */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--primary),var(--accent)); padding:1.5rem; }
.login-card { background:white; border-radius:var(--radius-lg); padding:2.5rem; width:100%; max-width:420px; box-shadow:var(--shadow-lg); }
.login-logo { text-align:center; margin-bottom:2rem; }
.login-logo h2 { font-family:var(--font-heading); color:var(--primary); }
.login-logo p { color:var(--gray-500); font-size:.875rem; margin-top:.25rem; }
.logo-icon { width:56px; height:56px; background:linear-gradient(135deg,var(--highlight),#ff6b6b); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin:0 auto .75rem; box-shadow:0 8px 20px rgba(233,69,96,.3); }

/* ===== SCORE VISUALIZATION ===== */
.score-bar-wrap { margin-bottom:.75rem; }
.score-bar-label { display:flex; justify-content:space-between; font-size:.8rem; margin-bottom:.3rem; }
.score-bar-track { background:var(--gray-100); border-radius:100px; height:10px; overflow:hidden; }
.score-bar-fill { height:100%; border-radius:100px; transition:width 1s ease; }

/* ===== PAGINATION ===== */
.pagination { display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; }
.page-item { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; border-radius:var(--radius-sm); border:1px solid var(--gray-200); font-size:.85rem; color:var(--gray-700); cursor:pointer; text-decoration:none; transition:all .2s; }
.page-item:hover { background:var(--gray-100); text-decoration:none; }
.page-item.active { background:var(--highlight); color:white; border-color:var(--highlight); }
.page-item.disabled { opacity:.4; pointer-events:none; }

/* ===== MODALS ===== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; display:flex; align-items:center; justify-content:center; padding:1.5rem; opacity:0; visibility:hidden; transition:all .25s; backdrop-filter:blur(2px); }
.modal-overlay.open { opacity:1; visibility:visible; }
.modal { background:white; border-radius:var(--radius-lg); width:100%; max-width:540px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); transform:scale(.95) translateY(10px); transition:transform .25s; }
.modal-overlay.open .modal { transform:scale(1) translateY(0); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; border-bottom:1px solid var(--gray-100); }
.modal-header h4 { font-size:1rem; }
.modal-close { cursor:pointer; color:var(--gray-400); font-size:1.2rem; background:none; border:none; padding:.25rem; transition:color .2s; border-radius:4px; }
.modal-close:hover { color:var(--gray-700); background:var(--gray-100); }
.modal-body   { padding:1.5rem; }
.modal-footer { padding:1rem 1.5rem; border-top:1px solid var(--gray-100); display:flex; gap:.75rem; justify-content:flex-end; }

/* ===== SPINNER ===== */
.spinner { width:18px; height:18px; border:3px solid rgba(255,255,255,.3); border-top-color:white; border-radius:50%; animation:spin .7s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ===== EMPTY STATE ===== */
.empty-state { text-align:center; padding:3rem 1.5rem; color:var(--gray-500); }
.empty-state .icon { font-size:3rem; margin-bottom:1rem; opacity:.5; }
.empty-state h3 { color:var(--gray-700); margin-bottom:.5rem; }

/* ===== UTILITIES ===== */
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.text-center{text-align:center}.text-right{text-align:right}
.text-muted{color:var(--gray-500)}.text-sm{font-size:.875rem}.text-xs{font-size:.78rem}
.text-success{color:var(--success)}.text-danger{color:var(--danger)}.text-warning{color:var(--warning)}
.d-flex{display:flex}.align-center{align-items:center}.justify-between{justify-content:space-between}
.gap-1{gap:.5rem}.gap-2{gap:1rem}
.p-0{padding:0}.fw-bold{font-weight:700}.rounded{border-radius:var(--radius)}
.w-100{width:100%}.hidden{display:none!important}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .admin-layout { flex-direction:column; }
  .sidebar { width:100%; height:auto; position:static; padding:1rem 0; }
  .navbar-nav { display:none; }
  .main-content { padding:1rem; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .scale-label { min-width:60px; padding:.5rem .6rem; font-size:.72rem; }
  .survey-hero { padding:2rem 1rem; }
  .filter-bar { flex-direction:column; }
  .page-header { flex-direction:column; }
  .identity-grid { grid-template-columns:1fr; }
  .topbar-user { display:none; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns:1fr; }
  .scale-group { gap:.3rem; }
  .scale-label { min-width:calc(20% - .25rem); padding:.45rem .3rem; font-size:.68rem; }
  .share-buttons { flex-direction:column; }
  .share-btn { justify-content:center; }
}



/* ===== UNISAN GREEN THEME ===== */
:root {
  --unisan-green:      #2d8c3c;
  --unisan-green-dark: #1e6229;
  --unisan-green-light:#d1fae5;
}

/* Navbar logo */
.navbar-logo {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: contain;
  background: white;
  padding: 2px;
  flex-shrink: 0;
}
.brand-text-wrap { display:flex; flex-direction:column; line-height:1.2; }
.brand-name { font-family:var(--font-heading); font-size:1rem; font-weight:700; color:white; }
.brand-sub  { font-size:.62rem; color:rgba(255,255,255,.5); }

/* Sidebar logo */
.sidebar-logo-wrap {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.1rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: .5rem;
}
.sidebar-logo { width:38px; height:38px; border-radius:50%; object-fit:contain; background:white; padding:2px; flex-shrink:0; }
.sidebar-brand-text strong { display:block; font-size:.88rem; color:white; }
.sidebar-brand-text span   { font-size:.68rem; color:rgba(255,255,255,.45); }

/* ===== UNISAN BRANDING ===== */
.brand-univ { color: var(--highlight); font-family: var(--font-heading); }
.univ-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: .25rem;
}
.topbar-brand .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.topbar-brand .brand-sub {
  font-size: .65rem;
  font-weight: 400;
  color: rgba(255,255,255,.55);
  letter-spacing: .04em;
}

/* Print */
@media print {
  .navbar,.sidebar,.btn,.filter-bar,.topbar-mhs { display:none!important; }
  .main-content { padding:0; }
  .card { box-shadow:none; border:1px solid #ddd; }
}