:root {
  --bg: #0a0a1a; --surface: rgba(20,20,40,0.85); --surface2: rgba(30,30,60,0.7);
  --text: #e8e8f0; --text2: #9898b0; --accent: #6c5ce7; --accent2: #a855f7;
  --border: rgba(255,255,255,0.08); --glass: rgba(255,255,255,0.05);
  --radius: 12px; --shadow: 0 8px 32px rgba(0,0,0,0.4);
  --font: 'Inter','Noto Sans JP',sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font); color:var(--text); overflow:hidden; height:100vh; width:100vw; user-select:none; }

/* Boot */
#boot-screen { position:fixed; inset:0; background:linear-gradient(135deg,#0a0a2e,#1a0a3e,#0a1a3e); display:flex; align-items:center; justify-content:center; z-index:10000; transition:opacity .8s; }
.boot-content { text-align:center; }
.boot-icon svg { width:80px; height:80px; animation:bootPulse 2s ease-in-out infinite; }
.boot-title { font-size:2.5rem; font-weight:800; margin:16px 0 4px; background:linear-gradient(135deg,#fff,#a78bfa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.boot-subtitle { color:var(--text2); font-size:.9rem; }
.boot-loader { margin-top:40px; }
.boot-progress { width:240px; height:3px; background:rgba(255,255,255,.1); border-radius:4px; overflow:hidden; margin:0 auto; }
.boot-progress-bar { height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:4px; animation:bootLoad 2.5s ease-in-out forwards; }
.boot-status { color:var(--text2); font-size:.75rem; margin-top:12px; }
@keyframes bootPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.05);opacity:.8} }
@keyframes bootLoad { 0%{width:0} 100%{width:100%} }

/* Lock */
#lock-screen { position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; }
.lock-bg { position:absolute; inset:0; background:linear-gradient(135deg,#0a0a2e,#1a0a3e); }
.lock-content { position:relative; z-index:1; text-align:center; }
.lock-time { font-size:5rem; font-weight:200; letter-spacing:-2px; }
.lock-date { font-size:1.1rem; color:var(--text2); margin-bottom:40px; }
.lock-avatar { width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700; margin:0 auto 8px; }
.lock-username { font-size:1.2rem; font-weight:600; margin-bottom:20px; }
.lock-input-group { display:flex; gap:8px; justify-content:center; }
.lock-input { width:260px; padding:12px 20px; border:1px solid var(--border); border-radius:24px; background:var(--glass); backdrop-filter:blur(20px); color:var(--text); font-size:.9rem; outline:none; transition:border .3s; }
.lock-input:focus { border-color:var(--accent); }
.lock-submit { width:44px; height:44px; border-radius:50%; border:none; background:var(--accent); color:#fff; font-size:1.2rem; cursor:pointer; transition:transform .2s; }
.lock-submit:hover { transform:scale(1.1); }
.lock-hint { color:var(--text2); font-size:.75rem; margin-top:12px; }

/* Desktop */
#desktop { position:fixed; inset:0; }
#wallpaper { position:absolute; inset:0; background:linear-gradient(135deg,#0f0c29,#302b63,#24243e); z-index:0; overflow:hidden; }
.wallpaper-gradient { position:absolute; inset:0; background:radial-gradient(ellipse at 30% 20%,rgba(108,92,231,.3),transparent 50%), radial-gradient(ellipse at 70% 80%,rgba(168,85,247,.2),transparent 50%); }
.wallpaper-particles { position:absolute; inset:0; }
.particle { position:absolute; width:3px; height:3px; background:rgba(255,255,255,.3); border-radius:50%; animation:float linear infinite; }
@keyframes float { 0%{transform:translateY(100vh) scale(0);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateY(-10vh) scale(1);opacity:0} }

/* Desktop Icons */
#desktop-icons { position:absolute; inset:0; padding:20px; display:flex; flex-direction:column; flex-wrap:wrap; align-content:flex-start; gap:8px; z-index:1; }
.desktop-icon { width:88px; padding:12px 4px; display:flex; flex-direction:column; align-items:center; gap:6px; border-radius:var(--radius); cursor:pointer; transition:background .2s; }
.desktop-icon:hover { background:rgba(255,255,255,.08); }
.desktop-icon:active { background:rgba(255,255,255,.12); }
.desktop-icon-img { width:48px; height:48px; display:flex; align-items:center; justify-content:center; font-size:2rem; background:linear-gradient(135deg,var(--accent),var(--accent2)); border-radius:12px; }
.desktop-icon-label { font-size:.7rem; text-align:center; color:var(--text); text-shadow:0 1px 4px rgba(0,0,0,.8); line-height:1.2; word-break:break-all; }

/* Window */
.window { position:absolute; min-width:400px; min-height:300px; border-radius:var(--radius); overflow:hidden; background:var(--surface); backdrop-filter:blur(24px); border:1px solid var(--border); box-shadow:var(--shadow); display:flex; flex-direction:column; animation:winOpen .3s ease; }
.window.minimized { animation:winMin .3s ease forwards; pointer-events:none; }
.window.maximized { border-radius:0; }
@keyframes winOpen { from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes winMin { to{transform:scale(.8) translateY(100px);opacity:0} }
.window-header { display:flex; align-items:center; padding:0 12px; height:40px; background:rgba(0,0,0,.2); cursor:default; flex-shrink:0; }
.window-header-icon { font-size:1rem; margin-right:8px; }
.window-header-title { flex:1; font-size:.8rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.window-controls { display:flex; gap:8px; }
.window-ctrl { width:14px; height:14px; border-radius:50%; border:none; cursor:pointer; transition:opacity .2s; opacity:.8; }
.window-ctrl:hover { opacity:1; }
.window-ctrl.minimize { background:#f59e0b; }
.window-ctrl.maximize { background:#22c55e; }
.window-ctrl.close { background:#ef4444; }
.window-body { flex:1; overflow:auto; padding:16px; }
.window-resize { position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize; }

/* Taskbar */
#taskbar { position:fixed; bottom:0; left:0; right:0; height:52px; background:rgba(10,10,30,.8); backdrop-filter:blur(24px); border-top:1px solid var(--border); display:flex; align-items:center; padding:0 8px; z-index:5000; }
.taskbar-start { width:40px; height:40px; border:none; background:transparent; color:var(--text); border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.taskbar-start:hover { background:rgba(255,255,255,.1); }
.taskbar-apps { flex:1; display:flex; align-items:center; gap:4px; padding:0 8px; overflow-x:auto; }
.taskbar-app { height:40px; padding:0 14px; border:none; background:transparent; color:var(--text); border-radius:8px; cursor:pointer; font-size:.8rem; display:flex; align-items:center; gap:6px; transition:background .2s; white-space:nowrap; position:relative; font-family:var(--font); }
.taskbar-app:hover { background:rgba(255,255,255,.08); }
.taskbar-app.active { background:rgba(255,255,255,.12); }
.taskbar-app.active::after { content:''; position:absolute; bottom:2px; left:50%; transform:translateX(-50%); width:16px; height:3px; background:var(--accent); border-radius:2px; }
.taskbar-tray { display:flex; align-items:center; gap:4px; }
.tray-btn { background:transparent; border:none; color:var(--text); width:36px; height:36px; border-radius:8px; cursor:pointer; font-size:.9rem; display:flex; align-items:center; justify-content:center; transition:background .2s; position:relative; }
.tray-btn:hover { background:rgba(255,255,255,.08); }
.notif-badge { position:absolute; top:4px; right:4px; background:var(--accent); color:#fff; font-size:.6rem; min-width:14px; height:14px; border-radius:7px; display:flex; align-items:center; justify-content:center; padding:0 3px; }
.tray-clock { text-align:center; padding:4px 12px; border-radius:8px; cursor:pointer; transition:background .2s; }
.tray-clock:hover { background:rgba(255,255,255,.08); }
.tray-time { font-size:.8rem; font-weight:600; }
.tray-date { font-size:.65rem; color:var(--text2); }

/* Start Menu */
#start-menu { position:fixed; bottom:60px; left:8px; width:400px; max-height:calc(100vh - 80px); background:var(--surface); backdrop-filter:blur(32px); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); z-index:6000; display:flex; flex-direction:column; animation:startOpen .2s ease; overflow:hidden; }
@keyframes startOpen { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
.start-header { padding:20px; border-bottom:1px solid var(--border); }
.start-user-info { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.start-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; }
.start-username { font-weight:600; }
.start-role { font-size:.75rem; color:var(--text2); }
.start-search { display:flex; align-items:center; gap:8px; padding:8px 14px; background:var(--glass); border:1px solid var(--border); border-radius:8px; }
.search-icon { font-size:.8rem; }
.start-search input { flex:1; background:none; border:none; color:var(--text); font-size:.85rem; outline:none; font-family:var(--font); }
.start-pinned,.start-all { padding:16px 20px; }
.start-section-title { font-size:.75rem; color:var(--text2); font-weight:600; text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; }
.start-apps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.start-app-tile { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 4px; border-radius:8px; cursor:pointer; transition:background .2s; border:none; background:transparent; color:var(--text); font-family:var(--font); }
.start-app-tile:hover { background:rgba(255,255,255,.08); }
.start-app-tile-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.start-app-tile-label { font-size:.7rem; text-align:center; }
.start-all { flex:1; overflow-y:auto; border-top:1px solid var(--border); }
.start-apps-list { display:flex; flex-direction:column; }
.start-app-item { display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:8px; cursor:pointer; transition:background .2s; border:none; background:transparent; color:var(--text); font-family:var(--font); font-size:.85rem; text-align:left; }
.start-app-item:hover { background:rgba(255,255,255,.08); }
.start-app-item-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.start-footer { padding:12px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; }
.start-footer-btn { display:flex; align-items:center; gap:6px; padding:8px 16px; border:none; background:transparent; color:var(--text); border-radius:8px; cursor:pointer; font-family:var(--font); font-size:.8rem; transition:background .2s; }
.start-footer-btn:hover { background:rgba(255,255,255,.08); }

/* Notification Center */
#notification-center { position:fixed; bottom:60px; right:8px; width:360px; max-height:500px; background:var(--surface); backdrop-filter:blur(32px); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); z-index:6000; animation:startOpen .2s ease; overflow:hidden; display:flex; flex-direction:column; }
.notif-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border); }
.notif-header h3 { font-size:.9rem; }
.notif-clear { background:transparent; border:none; color:var(--accent); font-size:.75rem; cursor:pointer; font-family:var(--font); }
.notif-list { flex:1; overflow-y:auto; padding:12px; }
.notif-empty { text-align:center; color:var(--text2); font-size:.85rem; padding:20px; }
.notif-item { padding:12px; background:var(--glass); border-radius:8px; margin-bottom:8px; cursor:pointer; transition:background .2s; }
.notif-item:hover { background:rgba(255,255,255,.08); }
.notif-item-title { font-size:.8rem; font-weight:600; margin-bottom:4px; }
.notif-item-body { font-size:.75rem; color:var(--text2); }
.notif-item-time { font-size:.65rem; color:var(--text2); margin-top:4px; }
.quick-settings { padding:16px 20px; border-top:1px solid var(--border); }
.quick-settings h3 { font-size:.8rem; margin-bottom:12px; }
.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.quick-tile { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px; border:none; border-radius:8px; background:var(--glass); color:var(--text); cursor:pointer; font-family:var(--font); font-size:.6rem; transition:background .2s; }
.quick-tile.active { background:rgba(108,92,231,.3); }
.quick-tile:hover { background:rgba(255,255,255,.08); }
.quick-tile.active:hover { background:rgba(108,92,231,.4); }
.quick-tile span:first-child { font-size:1.1rem; }

/* Context Menu */
.context-menu { position:fixed; min-width:180px; background:var(--surface); backdrop-filter:blur(24px); border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); z-index:8000; padding:4px; }
.context-item { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:6px; cursor:pointer; font-size:.8rem; transition:background .2s; }
.context-item:hover { background:rgba(255,255,255,.08); }
.context-icon { font-size:.9rem; }
.context-divider { height:1px; background:var(--border); margin:4px 8px; }

/* Overlay & About */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; z-index:9500; }
.about-dialog { background:var(--surface); backdrop-filter:blur(24px); border:1px solid var(--border); border-radius:var(--radius); padding:32px; text-align:center; max-width:360px; box-shadow:var(--shadow); }
.about-logo svg { width:60px; height:60px; margin-bottom:12px; }
.about-dialog h2 { font-size:1.4rem; margin-bottom:4px; }
.about-dialog p { color:var(--text2); font-size:.85rem; }
.about-desc { margin-top:12px; }
.about-close { margin-top:20px; padding:8px 24px; border:none; background:var(--accent); color:#fff; border-radius:8px; cursor:pointer; font-family:var(--font); font-size:.85rem; transition:opacity .2s; }
.about-close:hover { opacity:.8; }

/* App-specific: Timetable */
.timetable { width:100%; border-collapse:collapse; }
.timetable th,.timetable td { border:1px solid var(--border); padding:8px 6px; text-align:center; font-size:.75rem; }
.timetable th { background:rgba(108,92,231,.2); font-weight:600; font-size:.7rem; }
.timetable td { cursor:pointer; transition:background .2s; min-width:60px; }
.timetable td:hover { background:rgba(255,255,255,.08); }
.timetable td.today-col { background:rgba(108,92,231,.1); }
.timetable .period-label { background:rgba(255,255,255,.03); font-weight:600; color:var(--text2); cursor:default; }
.timetable td input { background:transparent; border:none; color:var(--text); text-align:center; width:100%; outline:none; font-family:var(--font); font-size:.75rem; }

/* App: Calculator */
.calc-display { background:rgba(0,0,0,.3); border-radius:8px; padding:16px; margin-bottom:12px; text-align:right; }
.calc-expr { font-size:.8rem; color:var(--text2); height:20px; }
.calc-result { font-size:2rem; font-weight:300; }
.calc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.calc-btn { padding:14px; border:none; border-radius:8px; font-size:1rem; cursor:pointer; transition:background .2s,transform .1s; font-family:var(--font); color:var(--text); background:var(--glass); }
.calc-btn:hover { background:rgba(255,255,255,.12); }
.calc-btn:active { transform:scale(.95); }
.calc-btn.op { background:rgba(108,92,231,.3); }
.calc-btn.op:hover { background:rgba(108,92,231,.4); }
.calc-btn.eq { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; }
.calc-btn.eq:hover { opacity:.9; }
.calc-btn.ac { background:rgba(239,68,68,.3); }

/* App: Notes */
.notes-container { display:flex; height:100%; gap:12px; }
.notes-sidebar { width:180px; flex-shrink:0; display:flex; flex-direction:column; gap:8px; }
.notes-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.note-item { padding:8px 10px; border-radius:6px; cursor:pointer; font-size:.8rem; transition:background .2s; border:none; background:transparent; color:var(--text); text-align:left; font-family:var(--font); }
.note-item:hover { background:rgba(255,255,255,.08); }
.note-item.active { background:rgba(108,92,231,.2); }
.note-add-btn { padding:8px; border:1px dashed var(--border); border-radius:6px; background:transparent; color:var(--text2); cursor:pointer; font-size:.8rem; transition:background .2s; font-family:var(--font); }
.note-add-btn:hover { background:rgba(255,255,255,.05); }
.notes-editor { flex:1; display:flex; flex-direction:column; gap:8px; }
.notes-editor input { background:transparent; border:none; border-bottom:1px solid var(--border); color:var(--text); font-size:1.1rem; font-weight:600; padding:4px 0; outline:none; font-family:var(--font); }
.notes-editor textarea { flex:1; background:transparent; border:1px solid var(--border); border-radius:8px; color:var(--text); padding:12px; font-size:.85rem; outline:none; resize:none; font-family:var(--font); line-height:1.6; }

/* App: Calendar */
.cal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.cal-header h3 { font-size:1rem; font-weight:600; }
.cal-nav { display:flex; gap:4px; }
.cal-nav button { width:32px; height:32px; border:none; border-radius:8px; background:var(--glass); color:var(--text); cursor:pointer; font-size:.9rem; transition:background .2s; }
.cal-nav button:hover { background:rgba(255,255,255,.1); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-day-header { text-align:center; font-size:.7rem; font-weight:600; color:var(--text2); padding:8px 0; }
.cal-day { text-align:center; padding:10px 4px; border-radius:8px; font-size:.8rem; cursor:pointer; transition:background .2s; }
.cal-day:hover { background:rgba(255,255,255,.08); }
.cal-day.today { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; font-weight:700; border-radius:50%; }
.cal-day.other-month { color:var(--text2); opacity:.4; }
.cal-day.sun { color:#ef4444; }
.cal-day.sat { color:#3b82f6; }

/* App: Grades */
.grades-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.grade-card { background:var(--glass); border:1px solid var(--border); border-radius:8px; padding:16px; text-align:center; }
.grade-card-value { font-size:1.8rem; font-weight:700; background:linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.grade-card-label { font-size:.7rem; color:var(--text2); margin-top:4px; }
.grades-table { width:100%; border-collapse:collapse; }
.grades-table th,.grades-table td { border:1px solid var(--border); padding:8px 12px; font-size:.8rem; }
.grades-table th { background:rgba(108,92,231,.15); font-weight:600; text-align:left; }
.grades-table td input { background:transparent; border:none; color:var(--text); width:100%; outline:none; text-align:center; font-family:var(--font); }

/* App: Settings */
.settings-section { margin-bottom:20px; }
.settings-section h3 { font-size:.85rem; font-weight:600; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.settings-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; }
.settings-label { font-size:.8rem; }
.settings-label small { display:block; color:var(--text2); font-size:.7rem; }
.settings-input { padding:6px 12px; border:1px solid var(--border); border-radius:6px; background:var(--glass); color:var(--text); font-size:.8rem; font-family:var(--font); outline:none; }
.settings-input:focus { border-color:var(--accent); }
.toggle { width:44px; height:24px; background:rgba(255,255,255,.15); border-radius:12px; cursor:pointer; position:relative; border:none; transition:background .3s; }
.toggle.active { background:var(--accent); }
.toggle::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:transform .3s; }
.toggle.active::after { transform:translateX(20px); }
.color-options { display:flex; gap:8px; }
.color-opt { width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:border-color .2s; }
.color-opt.active { border-color:#fff; }

/* App: Timer */
.timer-display { text-align:center; padding:20px 0; }
.timer-time { font-size:3.5rem; font-weight:200; font-variant-numeric:tabular-nums; }
.timer-label { color:var(--text2); font-size:.8rem; margin-top:4px; }
.timer-controls { display:flex; justify-content:center; gap:12px; margin-top:20px; }
.timer-btn { padding:10px 24px; border:none; border-radius:8px; cursor:pointer; font-family:var(--font); font-size:.85rem; font-weight:500; transition:opacity .2s; color:var(--text); }
.timer-btn.primary { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; }
.timer-btn.secondary { background:var(--glass); }
.timer-presets { display:flex; gap:8px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.timer-preset { padding:6px 14px; border:1px solid var(--border); border-radius:20px; background:transparent; color:var(--text); cursor:pointer; font-size:.75rem; font-family:var(--font); transition:background .2s; }
.timer-preset:hover { background:rgba(255,255,255,.08); }

.hidden { display:none!important; }

/* Scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.25); }

/* Login Flow */
#login-flow { width: 100%; max-width: 500px; margin: 0 auto; }
.login-step { animation: fadeIn 0.3s ease; }
.step-title { font-size: 1.5rem; margin-bottom: 1.5rem; text-align: center; color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.selection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.selection-btn { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); color: white; padding: 1.5rem 1rem; border-radius: 12px; font-size: 1.1rem; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.5rem; }
.selection-btn:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); border-color: var(--accent); }
.students-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.student-id { font-size: 0.8rem; opacity: 0.7; }
.back-btn { background: none; border: none; color: white; cursor: pointer; padding: 0.5rem; margin-bottom: 1rem; opacity: 0.7; transition: opacity 0.2s; font-size: 0.9rem; }
.back-btn:hover { opacity: 1; }
.error-message { color: #ff6b6b; font-size: 0.9rem; margin-top: 1rem; text-align: center; background: rgba(255,0,0,0.1); padding: 0.5rem; border-radius: 6px; }

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