@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

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

:root{
  --navy:#011f5b;
  --navy2:#1a3a7a;
  --gold:#c9a84c;
  --gold2:#e2c97a;
  --gold-pale:#fdf8ee;
  --off:#f7f6f3;
  --gray:#e8e5e0;
  --gray2:#c8c4bc;
  --text:#1a1a1a;
  --muted:#5a5450;
  --white:#fff;
  --max:1400px;
  --card-bg:#fff;
  --card-border:#e8e5e0;
  --card-header-bg:linear-gradient(to bottom, #f7f6f3 0%, #fff 100%);
  --modal-bg:#fff;
  --input-bg:#fff;
  --footer-bg:#011f5b;
  --type-urgent:#e74c3c;
  --type-important:#e67e22;
  --type-normal:#011f5b;
  --type-info:#3498db;
  --type-everyone:#27ae60;
}

[data-theme="dark"]{
  --navy:#0a1628;
  --navy2:#162544;
  --gold:#d4b05c;
  --gold2:#e2c97a;
  --gold-pale:#1a1510;
  --off:#0d1117;
  --gray:#1e2530;
  --gray2:#2d3748;
  --text:#e2e8f0;
  --muted:#94a3b8;
  --white:#161b22;
  --card-bg:#161b22;
  --card-border:#1e2530;
  --card-header-bg:linear-gradient(to bottom, #1a2030 0%, #161b22 100%);
  --modal-bg:#161b22;
  --input-bg:#1a2030;
  --footer-bg:#0a1020;
  --type-urgent:#ff6b6b;
  --type-important:#ffa94d;
  --type-normal:#4a90d9;
  --type-info:#74c0fc;
  --type-everyone:#51cf66;
}

[data-accent="blue"]{--gold:#4a90d9;--gold2:#74b0e8;--gold-pale:#eef4fb}
[data-accent="blue"][data-theme="dark"]{--gold:#4a90d9;--gold2:#74b0e8;--gold-pale:#0d1a2a}
[data-accent="emerald"]{--gold:#2ecc71;--gold2:#58d68d;--gold-pale:#eafaf1}
[data-accent="emerald"][data-theme="dark"]{--gold:#2ecc71;--gold2:#58d68d;--gold-pale:#0d1f14}
[data-accent="rose"]{--gold:#e74c6f;--gold2:#f06e8e;--gold-pale:#fdeef2}
[data-accent="rose"][data-theme="dark"]{--gold:#e74c6f;--gold2:#f06e8e;--gold-pale:#1f0d14}
[data-accent="violet"]{--gold:#9b59b6;--gold2:#b07cc6;--gold-pale:#f5eef8}
[data-accent="violet"][data-theme="dark"]{--gold:#9b59b6;--gold2:#b07cc6;--gold-pale:#170d1f}

/* [data-accent="custom"] colors are applied via JS inline styles */

body{
  min-height:100vh;
  background:var(--off);
  color:var(--text);
  font-family:'Roboto',sans-serif;
  overflow-x:hidden;
  transition:background .3s,color .3s;
}

.particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden}

.particle{
  position:absolute;
  background:radial-gradient(circle,rgba(201,168,76,0.15) 0%,transparent 70%);
  border-radius:50%;
  animation:float 20s infinite ease-in-out;
}

.particle:nth-child(1){width:80px;height:80px;top:20%;left:10%;animation-delay:0s;animation-duration:25s}
.particle:nth-child(2){width:120px;height:120px;top:60%;right:15%;animation-delay:5s;animation-duration:30s}
.particle:nth-child(3){width:60px;height:60px;bottom:30%;left:70%;animation-delay:10s;animation-duration:22s}
.particle:nth-child(4){width:100px;height:100px;top:40%;left:50%;animation-delay:15s;animation-duration:28s}

@keyframes float{
  0%,100%{transform:translate(0,0) scale(1);opacity:.3}
  25%{transform:translate(30px,-40px) scale(1.1);opacity:.5}
  50%{transform:translate(-20px,30px) scale(.9);opacity:.4}
  75%{transform:translate(40px,20px) scale(1.05);opacity:.6}
}

.top-bar{
  position:fixed;top:0;left:0;right:0;
  background:var(--navy);
  padding:0 32px;
  display:flex;justify-content:space-between;align-items:center;
  z-index:1000;
  border-bottom:3px solid var(--gold);
  height:72px;
  box-shadow:0 4px 12px rgba(1,31,91,0.15);
  transition:background .3s,border-color .3s;
}

.top-bar-left{display:flex;align-items:center;gap:32px}
.logo-section h1{font-family:'EB Garamond',serif;color:#fff;font-size:1.35rem;font-weight:600;letter-spacing:.5px;line-height:1.2}
.tagline{color:var(--gold);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:2.8px;margin-top:3px}
.clock{color:rgba(201,168,76,0.85);font-family:'Roboto',sans-serif;font-size:.75rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;border-left:2px solid var(--gold);padding-left:16px;white-space:nowrap}
.top-bar-right{display:flex;gap:12px;align-items:center}
.user-info{display:flex;flex-direction:column;text-align:right;padding:0 8px}
.user-info .name{color:#fff;font-weight:700;font-size:.85rem;letter-spacing:.3px}
.user-info .id{color:var(--gold);font-size:.68rem;margin-top:2px;letter-spacing:.5px}

.staff-level-display{
  background:var(--gold);color:var(--navy);
  padding:6px 12px;font-size:.65rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;border-radius:3px;
}

.apps-panel-btn,.staff-panel-btn,.csd-panel-btn,.customize-btn,.logout-btn{
  background:transparent;
  border:1px solid rgba(201,168,76,0.35);
  color:rgba(255,255,255,0.75);
  padding:8px 16px;cursor:pointer;
  font-family:'Roboto',sans-serif;font-size:.68rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  transition:all .2s;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  text-decoration:none;
}

.apps-panel-btn:hover,.staff-panel-btn:hover,.csd-panel-btn:hover,.customize-btn:hover,.logout-btn:hover{
  border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,0.08);
}

.customize-btn svg{width:16px;height:16px}

.main-content{max-width:var(--max);margin:0 auto;padding:96px 28px 40px;position:relative;z-index:2}

.welcome-section{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);
  padding:32px 36px;margin-bottom:32px;
  border-bottom:3px solid var(--gold);
  box-shadow:0 4px 16px rgba(1,31,91,0.12);
  position:relative;overflow:hidden;
  transition:background .3s,border-color .3s;
}

.welcome-section::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 90% 120%,rgba(201,168,76,0.12) 0%,transparent 70%),
             radial-gradient(ellipse 40% 60% at 5% -20%,rgba(201,168,76,0.08) 0%,transparent 60%);
  pointer-events:none;
}

.welcome-content{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.welcome-text h2{font-family:'EB Garamond',serif;color:#fff;font-size:2rem;font-weight:500;margin-bottom:8px;letter-spacing:.3px}
.welcome-text p{color:rgba(201,168,76,0.9);font-size:.88rem;font-weight:400;letter-spacing:.5px}

.email-btn{
  background:rgba(255,255,255,0.1);border:1px solid rgba(201,168,76,0.4);
  color:#fff;padding:12px 24px;display:flex;align-items:center;gap:10px;
  text-decoration:none;font-family:'Roboto',sans-serif;font-size:.72rem;
  font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  transition:all .2s;position:relative;backdrop-filter:blur(10px);
}

.email-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--navy);transform:translateY(-2px);box-shadow:0 6px 20px rgba(201,168,76,0.3)}
.email-btn svg{width:20px;height:20px}
.email-badge{position:absolute;top:-6px;right:-6px;background:#e74c3c;color:#fff;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;border:2px solid var(--navy)}

.dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;transition:all .3s}
.dashboard-grid.compact{gap:14px}
.dashboard-grid.spacious{gap:28px}

.completed-courses-btn{
  display:inline-block;background:var(--gold);color:var(--navy);
  padding:10px 20px;margin-top:12px;border:1px solid var(--gold);
  cursor:pointer;font-family:'Roboto',sans-serif;font-weight:700;
  font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;transition:all .2s;
  text-decoration:none;
}

.completed-courses-btn:hover{background:var(--navy);color:var(--gold);border-color:var(--navy);transform:translateY(-2px);box-shadow:0 4px 12px rgba(1,31,91,0.2)}

.card{
  background:var(--card-bg);border:1px solid var(--card-border);
  border-top:4px solid var(--navy);transition:all .25s;
  display:flex;flex-direction:column;
  box-shadow:0 2px 8px rgba(1,31,91,0.06);opacity:.95;
}

.card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(1,31,91,0.15);border-color:var(--gold)}
.card[data-shape="square"]{grid-column:span 1;aspect-ratio:1}
.card[data-shape="rectangle"]{grid-column:span 1}
.card[data-shape="wide"]{grid-column:span 2}

.card-header{
  background:var(--card-header-bg);padding:16px 20px;
  border-bottom:1px solid var(--card-border);
  display:flex;justify-content:space-between;align-items:center;
}

.card-header h3{font-family:'EB Garamond',serif;color:var(--navy);font-size:1.15rem;font-weight:600;letter-spacing:.3px}

[data-theme="dark"] .card-header h3{color:var(--gold)}

.card-menu-btn{background:none;border:none;color:var(--gray2);font-size:1.3rem;cursor:pointer;padding:4px 8px;transition:color .2s;line-height:1}
.card-menu-btn:hover{color:var(--navy)}
.card-content{padding:20px;flex:1;overflow-y:auto}

.info-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--off)}
.info-row:last-child{border-bottom:none}
.info-label{color:var(--muted);font-size:.85rem;font-weight:500;letter-spacing:.3px}
.info-value{color:var(--text);font-size:.85rem;font-weight:700;text-align:right}

.course-list{list-style:none}
.course-item{padding:14px 16px;background:var(--off);margin-bottom:10px;border-left:3px solid var(--gold);transition:all .2s}
.course-item:hover{background:var(--gold-pale);border-left-color:var(--navy);transform:translateX(4px)}
.course-name{color:var(--text);font-weight:600;font-size:.88rem;letter-spacing:.3px}
.course-code{color:var(--gold);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-top:4px}
.course-instructor{color:var(--muted);font-size:.75rem;margin-top:6px}

.quick-links{display:flex;flex-direction:column;gap:10px}

.link-btn{
  display:block;width:100%;padding:12px 16px;
  background:var(--navy);color:#fff;text-align:center;
  text-decoration:none;font-family:'Roboto',sans-serif;
  font-weight:700;font-size:.72rem;letter-spacing:1.5px;
  text-transform:uppercase;transition:all .2s;
  border:1px solid var(--navy);cursor:pointer;
}

.link-btn:hover{background:var(--navy2);border-color:var(--navy2);transform:translateX(4px)}

.announcements-loading{color:var(--muted);font-style:italic;text-align:center;padding:20px}

.announcement-item{padding:16px;background:var(--off);margin-bottom:12px;border-left:3px solid var(--navy);cursor:pointer;transition:all .2s}
.announcement-item:hover{background:var(--gold-pale);border-left-color:var(--gold);transform:translateX(4px)}
.announcement-title{color:var(--text);font-weight:700;font-size:.9rem;margin-bottom:6px;letter-spacing:.3px}

.announcement-meta{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}

.announcement-type{
  padding:3px 8px;font-size:.62rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;border-radius:2px;
  color:#fff;
}

.announcement-type[data-priority="URGENT"]{background:var(--type-urgent)}
.announcement-type[data-priority="IMPORTANT"]{background:var(--type-important)}
.announcement-type[data-priority="NORMAL"]{background:var(--type-normal)}
.announcement-type[data-priority="INFO"]{background:var(--type-info)}
.announcement-type[data-priority="FOR EVERYONE"]{background:var(--type-everyone)}
.announcement-type[data-priority="HIGH"]{background:var(--type-urgent)}
.announcement-type[data-priority="LOW"]{background:var(--type-info)}

.announcement-separator{color:var(--gray2);font-size:.7rem}
.announcement-author{color:var(--muted);font-size:.75rem;font-weight:500}
.announcement-preview{color:var(--muted);font-size:.8rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.announcement-date{color:var(--gold);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-top:8px}
.announcement-image{width:100%;max-width:100%;height:auto;margin:16px 0;border-radius:4px;display:block}
.announcement-modal-content .announcement-image{max-height:500px;object-fit:contain}
.modal-body img{max-width:100%;height:auto;display:block;margin:16px 0;border-radius:4px}

.modal{
  display:none;position:fixed;inset:0;
  background:rgba(1,15,45,0.88);backdrop-filter:blur(6px);
  z-index:2000;justify-content:center;align-items:center;
  padding:20px;animation:fadeIn .22s ease;
}

.modal.open{display:flex}

.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(1,15,45,0.88);backdrop-filter:blur(6px);
  z-index:2000;justify-content:center;align-items:center;
  padding:20px;animation:fadeIn .22s ease;
}

.modal-overlay.open{display:flex}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.modal-content{
  background:var(--modal-bg);max-width:800px;width:100%;
  max-height:85vh;overflow-y:auto;
  border-top:4px solid var(--navy);
  box-shadow:0 24px 64px rgba(0,0,0,0.4);
  animation:slideUp .28s ease;position:relative;
}

.modal-box{
  background:var(--modal-bg);max-width:800px;width:100%;
  max-height:85vh;overflow-y:auto;
  border-top:4px solid var(--navy);
  box-shadow:0 24px 64px rgba(0,0,0,0.4);
  animation:slideUp .28s ease;position:relative;
}

@keyframes slideUp{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}

.modal-content::-webkit-scrollbar,.modal-box::-webkit-scrollbar{width:6px}
.modal-content::-webkit-scrollbar-thumb,.modal-box::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}

.modal-head{
  background:var(--navy);padding:18px 24px;
  border-bottom:3px solid var(--gold);
  display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;z-index:1;
}

.modal-head h2{font-family:'EB Garamond',serif;color:#fff;font-size:1.45rem;font-weight:500;letter-spacing:.3px}
.modal-subtitle{font-size:.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(201,168,76,0.7);margin-top:2px}

.modal-close{
  position:absolute;top:20px;right:20px;
  background:transparent;border:1px solid rgba(1,31,91,0.2);
  color:var(--muted);font-size:1.5rem;cursor:pointer;
  width:36px;height:36px;display:flex;align-items:center;
  justify-content:center;transition:all .2s;line-height:1;z-index:1;
}

.modal-head .modal-close{
  position:relative;top:auto;right:auto;
  background:none;border:1px solid rgba(255,255,255,0.3);
  color:rgba(255,255,255,0.7);padding:5px 12px;
  font-size:.68rem;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;width:auto;height:auto;flex-shrink:0;
}

.modal-head .modal-close:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.modal-close:hover{background:var(--navy);border-color:var(--navy);color:#fff}

.modal-body{padding:32px 36px}
.modal-body h2{font-family:'EB Garamond',serif;color:var(--text);font-size:1.8rem;font-weight:500;margin-bottom:16px;letter-spacing:.3px}
.modal-body h3{font-family:'EB Garamond',serif;color:var(--text);font-size:1.05rem;margin:1.4em 0 .4em;font-weight:600}
.modal-body h3:first-child{margin-top:0}
.modal-body p{color:var(--muted);font-size:.88rem;line-height:1.7;margin-bottom:12px}
.modal-body ul{list-style:none;margin:0 0 .8em}
.modal-body li{color:var(--muted);font-size:.88rem;line-height:1.65;padding:3px 0 3px 14px;position:relative}
.modal-body li::before{content:'▸';color:var(--gold);font-size:.58rem;position:absolute;left:0;top:6px}
.modal-body strong{color:var(--text);font-weight:700}
.modal-footer-note{margin-top:20px;padding-top:12px;border-top:1px solid var(--gray);font-size:.72rem;color:var(--gray2);text-align:center;letter-spacing:.5px}

.security-report-form{margin-top:24px}
.form-group{margin-bottom:20px}
.form-group label{display:block;color:var(--text);font-weight:700;font-size:.82rem;margin-bottom:8px;letter-spacing:.3px}

.form-input,.form-select,.form-textarea{
  width:100%;padding:12px 16px;
  border:1px solid var(--gray);
  background:var(--input-bg);color:var(--text);
  font-family:'Roboto',sans-serif;font-size:.85rem;
  transition:all .2s;
}

.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,0.15)}
.form-textarea{resize:vertical;min-height:100px;line-height:1.6}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-actions{display:flex;gap:12px;margin-top:28px}

.submit-report-btn{
  flex:1;background:var(--navy);color:#fff;padding:14px 28px;
  border:none;cursor:pointer;font-family:'Roboto',sans-serif;
  font-size:.75rem;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;transition:all .2s;
}

.submit-report-btn:hover{background:var(--navy2);transform:translateY(-2px);box-shadow:0 4px 12px rgba(1,31,91,0.2)}

.cancel-report-btn{
  background:transparent;color:var(--muted);padding:14px 28px;
  border:1px solid var(--gray);cursor:pointer;
  font-family:'Roboto',sans-serif;font-size:.75rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;transition:all .2s;
}

.cancel-report-btn:hover{background:var(--off);border-color:var(--navy);color:var(--text)}

.report-status{margin-top:16px;padding:12px 16px;border-left:3px solid var(--gold);background:var(--gold-pale);color:var(--text);font-size:.85rem;display:none}
.report-status.show{display:block}

.success-overlay{display:none;position:fixed;inset:0;background:rgba(1,31,91,0.95);backdrop-filter:blur(8px);z-index:3000;justify-content:center;align-items:center;animation:fadeIn .3s ease}
.success-overlay.show{display:flex}
.success-overlay-content{text-align:center;color:#fff}
.success-checkmark{width:100px;height:100px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:3.5rem;color:var(--navy);margin:0 auto 24px;animation:scaleIn .4s ease}

@keyframes scaleIn{from{transform:scale(0)}to{transform:scale(1)}}

.success-overlay-content h2{font-family:'EB Garamond',serif;font-size:2rem;font-weight:500;margin-bottom:12px;letter-spacing:.5px}
.success-overlay-content p{font-size:.95rem;color:rgba(255,255,255,0.8);letter-spacing:.3px}

.customize-panel{
  position:fixed;top:72px;right:-420px;width:400px;
  height:calc(100vh - 72px);background:var(--card-bg);
  border-left:3px solid var(--gold);
  box-shadow:-4px 0 24px rgba(1,31,91,0.15);
  z-index:1500;transition:right .3s;overflow-y:auto;
}

.customize-panel.open{right:0}

.customize-panel-header{
  background:var(--navy);padding:20px 24px;
  border-bottom:3px solid var(--gold);
  display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;z-index:1;
}

.customize-panel-header h3{font-family:'EB Garamond',serif;color:#fff;font-size:1.25rem;font-weight:500;letter-spacing:.3px}

.close-panel-btn{
  background:none;border:1px solid rgba(255,255,255,0.3);
  color:rgba(255,255,255,0.7);font-size:1.5rem;cursor:pointer;
  width:32px;height:32px;display:flex;align-items:center;
  justify-content:center;transition:all .2s;line-height:1;
}

.close-panel-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}

.customize-panel-content{padding:24px}

.customize-section{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--gray)}
.customize-section:last-child{border-bottom:none}
.customize-section h4{font-family:'EB Garamond',serif;color:var(--text);font-size:1rem;font-weight:600;margin-bottom:12px;letter-spacing:.3px}
.customize-hint{color:var(--muted);font-size:.8rem;margin-bottom:12px;font-style:italic}

.theme-toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.theme-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;background:var(--off);border:2px solid var(--gray);
  cursor:pointer;font-family:'Roboto',sans-serif;font-size:.75rem;
  font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--text);transition:all .2s;
}

.theme-btn:hover{border-color:var(--gold);background:var(--gold-pale)}
.theme-btn.active{background:var(--navy);border-color:var(--navy);color:#fff}
.theme-btn svg{flex-shrink:0}

.accent-color-group{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.accent-btn{
  width:36px;height:36px;border-radius:50%;border:3px solid transparent;
  cursor:pointer;transition:all .2s;position:relative;
}

.accent-btn:hover{transform:scale(1.15)}
.accent-btn.active{border-color:var(--text);box-shadow:0 0 0 2px var(--card-bg),0 0 0 4px var(--text)}

.accent-custom-btn{
  background:conic-gradient(red,yellow,lime,aqua,blue,magenta,red);
}

/* Custom color picker row */
.custom-color-row{
  display:flex;align-items:center;gap:10px;margin-top:12px;
}

.color-picker-input{
  width:40px;height:36px;border:2px solid var(--gray);
  border-radius:4px;cursor:pointer;padding:2px;
  background:var(--input-bg);
}

.color-picker-input::-webkit-color-swatch-wrapper{padding:0}
.color-picker-input::-webkit-color-swatch{border:none;border-radius:2px}
.color-picker-input::-moz-color-swatch{border:none;border-radius:2px}

.hex-input{
  width:100px;padding:8px 12px;
  border:1px solid var(--gray);background:var(--input-bg);
  color:var(--text);font-family:'Roboto Mono',monospace;
  font-size:.82rem;font-weight:600;letter-spacing:.5px;
  transition:border-color .2s;
}

.hex-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,0.15)}
.hex-input::placeholder{color:var(--gray2);font-weight:400}

.shape-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.shape-option{display:flex;flex-direction:column;align-items:center;gap:8px}
.shape-option span{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.shape-preview{background:var(--navy)}
.rectangle-shape{width:50px;height:70px}
.square-shape{width:50px;height:50px}
.wide-shape{width:80px;height:40px}

.toggle-switch{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
.toggle-switch input{display:none}

.toggle-slider{
  width:44px;height:24px;background:var(--gray);border-radius:12px;
  position:relative;transition:background .2s;flex-shrink:0;
}

.toggle-slider::after{
  content:'';position:absolute;top:3px;left:3px;
  width:18px;height:18px;background:#fff;border-radius:50%;
  transition:transform .2s;
}

.toggle-switch input:checked+.toggle-slider{background:var(--gold)}
.toggle-switch input:checked+.toggle-slider::after{transform:translateX(20px)}
.toggle-label{font-size:.82rem;color:var(--muted);font-weight:500}

.slider{width:100%;height:6px;background:var(--gray);outline:none;-webkit-appearance:none;appearance:none}
.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:var(--navy);cursor:pointer;border-radius:50%;transition:all .2s}
.slider::-webkit-slider-thumb:hover{background:var(--gold);transform:scale(1.2)}
.slider::-moz-range-thumb{width:18px;height:18px;background:var(--navy);cursor:pointer;border-radius:50%;border:none;transition:all .2s}
.slider::-moz-range-thumb:hover{background:var(--gold);transform:scale(1.2)}
.slider-labels{display:flex;justify-content:space-between;margin-top:8px}
.slider-labels span{font-size:.7rem;color:var(--muted);letter-spacing:.5px}

.reset-btn{
  width:100%;background:transparent;border:1px solid var(--gray);
  color:var(--text);padding:12px 24px;cursor:pointer;
  font-family:'Roboto',sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;transition:all .2s;
}

.reset-btn:hover{background:var(--navy);border-color:var(--navy);color:#fff}

.card-context-menu{
  position:fixed;background:var(--card-bg);
  border:1px solid var(--card-border);border-top:3px solid var(--navy);
  box-shadow:0 8px 24px rgba(1,31,91,0.2);z-index:2500;min-width:160px;
}

.card-context-menu button{
  display:block;width:100%;background:none;border:none;
  padding:12px 16px;text-align:left;cursor:pointer;
  font-family:'Roboto',sans-serif;font-size:.8rem;font-weight:600;
  color:var(--text);transition:all .15s;letter-spacing:.3px;
}

.card-context-menu button:hover{background:var(--gold-pale);padding-left:20px}

.dashboard-footer{
  background:var(--footer-bg);color:rgba(255,255,255,0.4);
  padding:32px 28px;margin-top:48px;text-align:center;
  border-top:3px solid var(--gold);position:relative;
  transition:background .3s;
}

.footer-content{max-width:var(--max);margin:0 auto}
.footer-links{display:flex;justify-content:center;gap:28px;margin-bottom:16px;flex-wrap:wrap}
.footer-links a{color:rgba(201,168,76,0.7);text-decoration:none;font-size:.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;transition:color .2s;cursor:pointer}
.footer-links a:hover{color:var(--gold)}
.footer-text{font-size:.7rem;letter-spacing:.5px;margin-top:12px}
.footer-text strong{color:rgba(255,255,255,0.6);font-weight:600}

@media(max-width:1200px){
  .dashboard-grid{grid-template-columns:repeat(2,1fr)}
  .card[data-shape="wide"]{grid-column:span 2}
}

@media(max-width:768px){
  .top-bar{flex-direction:column;height:auto;padding:12px 20px;gap:12px}
  .top-bar-left,.top-bar-right{width:100%;justify-content:space-between}
  .top-bar-left{flex-wrap:wrap}
  .clock{border-left:none;padding-left:0;font-size:.68rem}
  .main-content{padding-top:140px}
  .welcome-section{padding:24px 20px}
  .welcome-content{flex-direction:column;gap:16px;align-items:flex-start}
  .welcome-text h2{font-size:1.5rem}
  .email-btn{width:100%;justify-content:center}
  .dashboard-grid{grid-template-columns:1fr}
  .card[data-shape="wide"],.card[data-shape="square"],.card[data-shape="rectangle"]{grid-column:span 1}
  .customize-panel{width:100%;right:-100%;top:120px;height:calc(100vh - 120px)}
  .customize-panel.open{right:0}
  .form-row{grid-template-columns:1fr}
  .footer-links{gap:16px}
  .footer-links a{font-size:.65rem}
}

@media(max-width:480px){
  .logo-section h1{font-size:1.1rem}
  .tagline{font-size:.55rem}
  .welcome-text h2{font-size:1.3rem}
  .card-header h3{font-size:1rem}
  .modal-body{padding:20px}
  .modal-body h2{font-size:1.5rem}
}