:root { --ink:#25243a; --muted:#77768a; --paper:#fcfbff; --lavender:#f1efff; --line:#e9e7f0; --purple:#6d5dfc; --danger:#eb5f63; --warning:#ed9e3b; --good:#36b789; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; } [hidden] { display:none !important; }
button,input { font:inherit; } button { cursor:pointer; } .app-shell { display:block; min-height:100vh; }
.brand { display:flex; gap:10px; align-items:center; color:var(--ink); font:bold 21px "Plus Jakarta Sans"; text-decoration:none; padding:0; margin-right:12px; }
.brand-mark { width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--purple);color:#fff;font:700 17px sans-serif; }
.profile-card { margin:0; padding:6px 14px; border-radius:20px; background:var(--lavender); display:flex; align-items:center; gap:8px; cursor:pointer; transition:all .2s ease; border:1px solid transparent; user-select:none; }
.profile-card:hover { background:#e8e4ff; border-color:#d4cdfa; transform:translateY(-1px); box-shadow:0 4px 12px #6d5dfc18; }
.profile-card strong { font-size:13px; }
.profile-card small { display:none; }
.profile-card .profile-gear { font-size:12px; color:var(--purple); opacity:0.75; transition:transform .2s ease; }
.profile-card:hover .profile-gear { opacity:1; transform:rotate(45deg); }
.avatar { display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#d8d3ff;color:#4e40cc;font-weight:700;font-size:12px; }
.user-switch { border:0; background:transparent; color:#77768a; padding:6px 10px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; transition:background .15s; }
.user-switch:hover { background:#f1efff; color:var(--purple); }
.content { max-width:1210px;width:100%;padding:36px 32px 70px;margin:0 auto; }
.topbar { display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line); }
.topbar-main { display:flex;align-items:center;gap:24px;flex-wrap:wrap; }
.topbar-actions { display:flex;align-items:center;gap:12px; }
.section-heading,.modal-header { display:flex;justify-content:space-between;align-items:center;gap:20px; }.eyebrow { color:#8d8a9f;font-size:11px;font-weight:700;letter-spacing:1.15px;margin:0 0 8px; } h1,h2,h3 { font-family:"Plus Jakarta Sans",sans-serif; } h1 { margin:0;font-size:29px;letter-spacing:-1px; } h2 { font-size:19px;margin:0;letter-spacing:-.5px; } .wave { font-family:sans-serif;font-size:24px; } .button { border:0;border-radius:10px;padding:11px 16px;font-size:13px;font-weight:700;transition:transform .15s,box-shadow .15s; }.button:hover { transform:translateY(-1px); }.primary { background:var(--purple);color:white;box-shadow:0 7px 15px #6d5dfc2e; }.secondary { color:#5b4bd9;background:#ebe9ff; }.wide { width:100%;margin-top:22px; }
.overview { margin-top:52px; }.section-heading p { margin:5px 0 0;color:var(--muted);font-size:14px; }.stats-grid { margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }.stat-card { padding:21px 22px;border:1px solid var(--line);border-radius:16px;background:#fff; }.stat-icon { width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:16px;background:#f0efff;color:#6252ea; }.stat-card:nth-child(2) .stat-icon { background:#e5f8f1;color:#20a375; }.stat-card p { color:var(--muted);font-size:13px;margin:16px 0 5px; }.stat-card strong { font:800 25px "Plus Jakarta Sans";letter-spacing:-1px; }.stat-card strong small { color:var(--muted);font:500 13px "DM Sans";letter-spacing:0; }
.alerts { margin-top:39px; }.compact { margin-bottom:12px; }.alert { padding:13px 16px;border-radius:11px;background:#fff2e7;color:#a95d12;font-size:13px;border:1px solid #ffdfbd; }.subjects-section { margin-top:44px; }.subjects-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px; }.subject-card { position:relative;padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:box-shadow .2s,transform .2s; }.subject-card:hover { transform:translateY(-2px);box-shadow:0 12px 24px #3431540e; }.subject-card-top { display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px; }.subject-card-header-left { display:flex;align-items:center;gap:10px;flex:1; }.subject-card-header-right { display:flex;align-items:center;gap:6px; }.pie-chart-wrapper { position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px; }.pie-chart { width:44px;height:44px; }.pie-fill { transition:stroke-dashoffset .35s ease,stroke .35s ease; }.pie-text { position:absolute;font:800 8.5px "Plus Jakarta Sans",sans-serif;color:var(--ink);letter-spacing:-.4px; }.subject-dot { display:block;width:12px;height:12px;border-radius:50%;flex-shrink:0; }.more-button,.icon-button { border:0;background:transparent;color:#8d8a9f;font-weight:800; }.more-button { width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:background .15s,color .15s;cursor:pointer; }.more-button:hover { background:#f0efff;color:var(--purple); }.subject-name { font-size:16px;margin:0;word-break:break-word; }.subject-schedule { min-height:20px;color:var(--muted);font-size:12px;margin:0 0 22px; }.progress-meta { display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:8px; }.progress-meta strong { color:var(--ink); }.progress-track { height:7px;background:#f0eff3;border-radius:10px;overflow:hidden; }.progress-bar { height:100%;width:0;border-radius:10px;background:var(--good);transition:width .25s; }.remaining-text { font-size:12px;color:var(--muted);margin:10px 0 16px;min-height:18px; }.card-actions { display:flex;gap:7px; }.absence-button { flex:1;padding:8px 4px;border:1px solid #e4e1ee;border-radius:8px;background:#fff;color:#666578;font-size:11px;font-weight:700; }.add-absence { background:#f1efff;color:#5b4bd9;border-color:#e2ddff; }.menu { display:none;position:absolute;top:44px;right:16px;z-index:10;width:150px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 25px #2220351f; }.menu.open { display:grid;gap:2px; }.menu button { border:0;background:#fff;text-align:left;padding:8px 10px;border-radius:7px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px;color:var(--ink);transition:background .15s; }.menu button:hover { background:#f7f6fb; }.menu .delete-subject { color:var(--danger); }.menu .delete-subject:hover { background:#fff1f2; }.empty-state { text-align:center;padding:52px 20px;border:1px dashed #d9d5e5;border-radius:16px;margin-top:20px;background:#fff; }.empty-icon { margin:auto;width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:var(--lavender);color:var(--purple);font-size:23px; }.empty-state h3 { margin:15px 0 8px;font-size:16px; }.empty-state p { margin:0;color:var(--muted);font-size:13px; }.empty-state .button { margin-top:18px; }
.calendar-section { margin-top:44px; }.week-calendar { display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:20px; }.calendar-day { min-height:145px;padding:13px 11px;border:1px solid var(--line);border-radius:13px;background:#fff; }.calendar-day h3 { font-size:12px;margin:0 0 12px;text-transform:uppercase;letter-spacing:.4px;color:#6d6a7e; }.calendar-item { display:block;width:100%;padding:8px;margin:7px 0 0;border:0;border-left:4px solid;border-radius:7px;background:#f6f5fa;color:var(--ink);font-size:11px;font-weight:700;text-align:left;line-height:1.25;min-height:44px; }.calendar-item-placeholder { display:block;width:100%;margin:7px 0 0;min-height:44px;visibility:hidden;pointer-events:none; }.calendar-empty { color:#aaa7b4;font-size:11px;margin:12px 0 0; }
.period-section { margin-top:60px;padding:28px 30px;display:flex;justify-content:space-between;gap:32px;align-items:center;background:#f1efff;border-radius:18px; }.period-copy h2 { font-size:17px; }.period-copy > p:last-child { color:var(--muted);font-size:13px;max-width:470px;margin:7px 0 0; }.period-form { display:flex;align-items:end;gap:10px; }.period-form label { font-size:11px;color:#686678;font-weight:700; }.period-form input { display:block;margin-top:6px;border:1px solid #d8d4e7;border-radius:8px;background:#fff;padding:8px;color:var(--ink);font-size:12px; }
.modal { color:var(--ink);border:0;border-radius:18px;padding:0;width:min(470px,calc(100% - 28px));box-shadow:0 25px 80px #17152e47; }.modal::backdrop { background:#28234278;backdrop-filter:blur(3px); }.modal form { padding:29px; }.modal h2 { font-size:22px;margin:0; }.modal label { display:block;font-size:12px;font-weight:700;color:#5c5a6c;margin-top:19px; }.modal input, .modal select { width:100%;margin-top:7px;padding:11px 12px;border:1px solid #dedbe7;border-radius:9px;outline-color:var(--purple);color:var(--ink);background:#fff; }.modal-header { align-items:start; }.icon-button { font-size:24px;line-height:18px; }.form-row { display:grid;grid-template-columns:1fr 1.6fr;gap:14px; }.form-row input[type=color] { padding:3px;height:42px; }.modal fieldset { border:0;padding:0;margin:21px 0 0; }.modal legend { font-size:12px;font-weight:700;color:#5c5a6c;margin-bottom:10px; }.days-picker { display:grid;gap:10px; }.day-picker-item { border:1px solid #e9e7f0;border-radius:11px;background:#fff;padding:10px 12px; }.day-header { display:flex;justify-content:space-between;align-items:center; }.day-checkbox-label { display:flex!important;align-items:center;gap:8px;cursor:pointer;font-size:13px;margin:0!important; }.day-checkbox-label input[type=checkbox] { width:16px;height:16px;margin:0;accent-color:var(--purple); }.day-total-badge { font-size:11px;font-weight:700;color:var(--purple); }.slots-container { margin-top:10px;padding-top:8px;border-top:1px dashed #edeaf5;display:grid;gap:7px; }.slot-row { display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);background:#f9f8fd;padding:6px 8px;border-radius:8px; }.slot-row input[type=time] { width:auto!important;margin:0!important;padding:4px 6px!important;font-size:11px!important;border:1px solid #dedbe7;border-radius:6px; }.slot-badge { font-size:11px;font-weight:700;color:var(--purple);margin-left:auto; }.remove-slot-btn { border:0;background:transparent;color:#a09cb4;font-size:12px;cursor:pointer;padding:2px 5px;border-radius:4px; }.remove-slot-btn:hover { color:var(--danger);background:#ffebeb; }.add-slot-btn { border:0;background:transparent;color:#5d4de1;font-size:11px;font-weight:700;text-align:left;padding:4px 0;cursor:pointer;margin-top:2px; }.add-slot-btn:hover { text-decoration:underline; }.helper { color:var(--muted);font-size:11px;line-height:1.4;margin:16px 0 -4px; }.user-modal { width:min(400px,calc(100% - 28px)); }.user-modal .modal-brand { font:bold 18px "Plus Jakarta Sans";display:flex;align-items:center;gap:9px;margin-bottom:34px; }.user-modal h2 { font-size:25px; }.user-modal p { color:var(--muted);margin:8px 0 0;font-size:14px; }.saved-users { margin-top:22px;display:grid;gap:7px; }.saved-users:empty { display:none; }.saved-users::before { content:'ou entre em um perfil salvo';font-size:11px;color:var(--muted);margin-top:4px; }.saved-user { border:1px solid var(--line);border-radius:9px;background:#fff;padding:9px 11px;text-align:left;color:var(--ink);font-size:13px;font-weight:700; }
.modal-footer { display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px; } .danger-text { background:transparent;color:var(--danger);border:1px solid #fecdd3;padding:10px 14px;border-radius:9px; } .danger-text:hover { background:#fff1f2;color:#e11d48; }
.auth-toggle { display:block;margin:17px auto 0;border:0;background:transparent;color:#5d4de1;font-weight:700;font-size:12px; }.auth-message { min-height:18px;margin:14px 0 -8px!important;font-size:12px!important;color:var(--danger)!important; }.auth-message.success { color:var(--good)!important; }
.auth-tabs { display:flex;gap:6px;margin:20px 0;background:#f1efff;padding:4px;border-radius:12px; }
.auth-tab { flex:1;border:0;background:transparent;padding:10px 14px;font-weight:700;font-size:13px;color:var(--muted);border-radius:8px;transition:all .15s;cursor:pointer; }
.auth-tab.active { background:#fff;color:var(--purple);box-shadow:0 3px 10px #00000014; }
body.logged-out { background:linear-gradient(135deg, #f6f5ff 0%, #eae7ff 100%);min-height:100vh; }
body.logged-out .user-modal::backdrop { background:transparent;backdrop-filter:none; }
.settings-fieldset { border:0; padding:0; margin:22px 0 0; }
.settings-fieldset legend { font-size:12px; font-weight:700; color:#5c5a6c; margin-bottom:12px; }
.settings-options { display:grid; gap:10px; }
.setting-option-card { display:flex!important; align-items:flex-start; gap:12px; padding:14px; border:1.5px solid #e9e7f0; border-radius:12px; background:#fff; cursor:pointer; transition:all .18s ease; margin-top:0!important; }
.setting-option-card:hover { border-color:#d4cdfa; background:#faf9ff; }
.setting-option-card:has(input:checked) { border-color:var(--purple); background:#f6f4ff; box-shadow:0 3px 12px #6d5dfc14; }
.setting-option-card input[type=radio] { width:18px; height:18px; margin:2px 0 0 0!important; accent-color:var(--purple); flex-shrink:0; }
.setting-option-content { flex:1; }
.setting-option-header { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.setting-option-header strong { font-size:13px; color:var(--ink); font-weight:700; }
.setting-badge { background:#edeaff; color:var(--purple); font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; text-transform:uppercase; letter-spacing:0.4px; }
.setting-option-content p { margin:5px 0 0; font-size:11.5px; color:var(--muted); line-height:1.4; }
.input-readonly { background:#f5f4f8!important; color:#777589!important; cursor:not-allowed; border-color:#e4e1ee!important; }

@media (max-width:900px) { .navbar-container{padding:0 20px}.content{padding:28px 20px}.subjects-grid{grid-template-columns:repeat(2,1fr)}.week-calendar{grid-template-columns:repeat(3,1fr)}.period-section{align-items:start;flex-direction:column}.period-form{flex-wrap:wrap} }
@media (max-width:570px) { .top-nav{display:none}.navbar-container{padding:0 16px}.content{padding:22px 16px 45px}.topbar{align-items:start}.topbar .button{padding:10px;font-size:0}.topbar .button:first-letter{font-size:18px}.stats-grid,.subjects-grid,.week-calendar{grid-template-columns:1fr}.period-form{display:grid;grid-template-columns:1fr 1fr;width:100%}.period-form .button{grid-column:span 2}.period-form input{width:100%}.modal form{padding:23px}.day-row{grid-template-columns:20px 1fr 95px} }