:root {
  --ink: #f1f5f7; --muted: #8796a8; --subtle: #627084; --line: #1b2b3d;
  --panel: #0d1b2a; --panel-2: #102235; --bg: #07111f; --blue: #3da5ff;
  --lime: #baf45e; --orange: #ffad5c; --purple: #b39af9; --danger: #ff7373;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'DM Sans', sans-serif; font-size: 15px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 240px; border-right: 1px solid var(--line); padding: 28px 18px 22px; display: flex; flex-direction: column; background: #081523; flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; font: 700 21px 'Space Grotesk', sans-serif; letter-spacing: -.7px; padding: 0 10px 45px; }
.brand > span:last-child span { color: var(--lime); }
.brand-mark { color: var(--lime); font: 700 12px 'JetBrains Mono', monospace; border: 1px solid #587b32; padding: 7px 5px; border-radius: 6px; }
.eyebrow { margin: 0 10px 14px; color: var(--subtle); letter-spacing: 1.6px; font-size: 10px; font-weight: 700; }
.eyebrow.accent { color: var(--lime); }
.main-nav { display: grid; gap: 6px; }
.nav-link { padding: 12px 13px; color: var(--muted); text-decoration: none; border-radius: 8px; display: flex; gap: 12px; align-items: center; font-weight: 600; }
.nav-link span { color: #6f8296; font-size: 17px; width: 18px; text-align: center; }
.nav-link.active, .nav-link:hover { background: #13263a; color: var(--ink); }
.nav-link.active span { color: var(--lime); }
.sidebar-bottom { margin-top: auto; border-top: 1px solid var(--line); padding-top: 20px; }
.user-chip { display: flex; gap: 10px; align-items: center; margin: 0 10px 19px; }
.avatar { border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; color: #102000; background: var(--lime); font-size: 10px; font-weight: 700; }
.user-chip strong, .user-chip small { display: block; }.user-chip strong { font-size: 12px; }.user-chip small { color: var(--subtle); font-size: 10px; margin-top: 2px; }
.ghost-button { width: 100%; text-align: left; border: 0; background: transparent; color: var(--subtle); padding: 8px 10px; font-size: 12px; }.ghost-button:hover { color: var(--danger); }
.main-content { flex: 1; max-width: 1420px; margin: 0 auto; width: 100%; }
.topbar { height: 70px; border-bottom: 1px solid var(--line); padding: 0 47px; display: flex; align-items: center; justify-content: space-between; }
.breadcrumb { display: flex; gap: 11px; color: var(--subtle); font-size: 12px; }.breadcrumb strong { color: var(--ink); font-weight: 500; }.breadcrumb b { color: #33465b; }
.connection-status { display: flex; gap: 8px; color: var(--subtle); font-size: 11px; align-items: center; }.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--subtle); display: inline-block; }.status-dot.online { background: var(--lime); box-shadow: 0 0 10px #baf45e88; }.status-dot.syncing { background: var(--orange); }
.view { padding: 49px 47px 70px; max-width: 1320px; margin: auto; }.hidden { display: none !important; }
.hero { display: flex; justify-content: space-between; position: relative; overflow: hidden; min-height: 182px; }.hero h1 { margin: 12px 0 14px; font: 600 clamp(31px, 4vw, 46px)/1.08 'Space Grotesk', sans-serif; letter-spacing: -2px; }.hero h1 em { font-style: normal; color: var(--lime); }.hero-copy { color: var(--muted); max-width: 555px; line-height: 1.65; margin: 0; }
.hero-orbit { width: 210px; height: 170px; border: 1px dashed #25445b; border-radius: 50%; margin: 4px 60px 0 0; transform: rotate(-18deg); color: #7593ad; position: relative; opacity: .8; }.hero-orbit:before, .hero-orbit:after { content: ''; position: absolute; border: 1px solid #21405a; border-radius: 50%; inset: 22px -20px; transform: rotate(45deg); }.hero-orbit:after { inset: 47px -47px; transform: rotate(-40deg); }.hero-orbit span { position: absolute; font: 600 12px 'JetBrains Mono', monospace; z-index: 1; }.hero-orbit span:nth-child(1) { top: 20px; left: 70px; color: var(--lime); }.hero-orbit span:nth-child(2) { right: -18px; top: 80px; color: var(--orange); }.hero-orbit span:nth-child(3) { left: 22px; top: 105px; color: var(--blue); }.hero-orbit span:nth-child(4) { bottom: 5px; left: 85px; color: var(--purple); }.hero-orbit span:nth-child(5) { top: 66px; left: 95px; font-size: 18px; color: #d8e5ef; }
.overview-grid { display: grid; grid-template-columns: 1.4fr 1fr .85fr; gap: 15px; margin: 24px 0 50px; }.overview-card { min-height: 147px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); padding: 19px 21px; position: relative; overflow: hidden; }.card-label { color: var(--subtle); font-size: 10px; letter-spacing: 1px; font-weight: 700; }.info-icon { border: 1px solid #446078; color: var(--subtle); border-radius: 50%; display: inline-grid; place-items: center; width: 13px; height: 13px; font-size: 9px; margin-left: 4px; }.progress-value { display: flex; align-items: baseline; gap: 13px; margin: 17px 0 12px; }.progress-value strong { font: 600 29px 'Space Grotesk'; }.progress-value span, .progress-foot { color: var(--subtle); font-size: 11px; }.progress-track { height: 5px; border-radius: 10px; background: #1b3045; overflow: hidden; }.progress-track span { height: 100%; display: block; width: 0; background: var(--lime); border-radius: inherit; transition: width .4s ease; }.progress-foot { display: flex; justify-content: space-between; margin-top: 11px; }.streak { color: var(--lime); }.focus-card { background: linear-gradient(125deg, #0d1b2a, #172f39); }.focus-card strong { display: block; font: 600 18px/1.2 'Space Grotesk'; margin-top: 16px; }.focus-card p { color: var(--muted); font-size: 11px; line-height: 1.45; margin-top: 8px; }.focus-icon { position: absolute; right: 27px; bottom: 19px; color: #739ba0; font-size: 48px; opacity: .45; }.total-card strong { display: block; font: 600 34px 'Space Grotesk'; margin-top: 13px; }.total-card > span { color: var(--muted); font-size: 11px; }.mini-bars { display: flex; gap: 5px; position: absolute; bottom: 20px; right: 20px; align-items: end; }.mini-bars i { width: 5px; border-radius: 2px; background: #2d5c62; height: 13px; }.mini-bars i:nth-child(2), .mini-bars i:nth-child(5) { height: 21px; background: #428a6d; }.mini-bars i:nth-child(3), .mini-bars i:nth-child(6) { height: 29px; background: var(--lime); }.mini-bars i:nth-child(4) { height: 18px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 21px; }.section-heading h2 { margin: 0; font: 600 25px 'Space Grotesk'; letter-spacing: -.8px; }.heading-count { color: var(--subtle); font-size: 11px; }.heading-count i { color: var(--lime); font-style: normal; margin: 0 5px; }.filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 19px; }.search-box { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; color: var(--subtle); padding: 0 12px; height: 38px; width: 250px; }.search-box input { border: 0; outline: 0; color: var(--ink); background: transparent; width: 100%; font-size: 12px; }.search-box input::placeholder { color: #637488; }.filter-pills { display: flex; gap: 5px; }.pill { border: 1px solid transparent; background: transparent; color: var(--subtle); border-radius: 5px; padding: 9px 12px; font-size: 11px; }.pill:hover, .pill.active { border-color: #2e6478; color: var(--lime); background: #102b37; }.filter-row select { margin-left: auto; border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 6px; padding: 9px 10px; font-size: 11px; outline: 0; }
.question-list { display: grid; gap: 8px; }.question-row { display: grid; grid-template-columns: 31px 1fr 200px 120px 24px; align-items: center; gap: 13px; min-height: 73px; padding: 11px 19px; border: 1px solid var(--line); background: var(--panel); border-radius: 7px; cursor: pointer; transition: border .15s, background .15s, transform .15s; }.question-row:hover { border-color: #32627d; background: #10253a; transform: translateY(-1px); }.question-index { font: 12px 'JetBrains Mono', monospace; color: var(--subtle); }.question-main strong { display: block; font-size: 13px; font-weight: 600; }.question-main small { color: var(--subtle); display: block; margin-top: 5px; font-size: 10px; }.question-track { color: var(--muted); font-size: 11px; }.question-track span { display: block; color: var(--subtle); font-size: 10px; margin-top: 4px; }.difficulty { font-size: 10px; border-radius: 4px; padding: 5px 7px; width: fit-content; }.difficulty.iniciante { color: var(--lime); background: #18352b; }.difficulty.intermediario { color: var(--orange); background: #392d21; }.difficulty.avancado { color: var(--purple); background: #282343; }.row-status { font-size: 13px; color: var(--subtle); }.row-status.resolvida { color: var(--lime); }.row-status.tentada { color: var(--orange); }.empty-state { color: var(--subtle); padding: 40px; text-align: center; border: 1px dashed var(--line); border-radius: 8px; }
.back-button { border: 0; background: transparent; color: var(--muted); padding: 0; margin-bottom: 25px; font-size: 12px; }.back-button:hover { color: var(--lime); }.question-layout { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(450px, 1.25fr); gap: 22px; }.problem-panel, .editor-panel { border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }.problem-panel { padding: 28px; }.problem-meta { display: flex; align-items: center; gap: 9px; }.tag { color: var(--blue); border: 1px solid #26577d; background: #102b42; border-radius: 4px; font-size: 10px; padding: 5px 8px; }.muted { color: var(--subtle); font-size: 11px; }.problem-panel h1 { font: 600 29px 'Space Grotesk'; margin: 25px 0 13px; letter-spacing: -.8px; }.problem-description { color: #b7c3ce; line-height: 1.7; font-size: 13px; }.concept-box { display: flex; gap: 11px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 26px 0; padding: 18px 0; }.concept-box > span { color: var(--lime); font-size: 19px; }.concept-box strong { font-size: 11px; }.concept-box p { color: var(--muted); margin: 5px 0 0; font-size: 11px; }.hint-box { background: #14273a; border-radius: 7px; padding: 13px 15px; min-height: 81px; }.hint-head { display: flex; justify-content: space-between; color: var(--lime); font-size: 10px; font-weight: 700; }.hint-head span:last-child { color: var(--subtle); font-weight: 500; }.hint-box p { color: #a7b8c9; font-size: 11px; line-height: 1.5; margin: 10px 0 0; }.editor-panel { display: flex; flex-direction: column; overflow: hidden; min-height: 510px; }.editor-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 17px; border-bottom: 1px solid var(--line); color: var(--muted); font: 11px 'JetBrains Mono', monospace; }.editor-toolbar > div { display: flex; align-items: center; gap: 8px; }.python-dot { width: 9px; height: 9px; background: var(--blue); border-radius: 50%; }.saved-label { color: var(--subtle); font: 10px 'DM Sans'; margin-left: 8px; }.reset-code { border: 0; background: transparent; color: var(--subtle); font-size: 11px; }.reset-code:hover { color: var(--ink); }.editor-panel textarea { flex: 1; min-height: 390px; width: 100%; resize: none; background: #091623; border: 0; outline: none; color: #d5edf6; padding: 22px; font: 13px/1.65 'JetBrains Mono', 'Courier New', monospace; tab-size: 4; }.editor-footer { display: flex; align-items: center; justify-content: space-between; padding: 13px 17px; border-top: 1px solid var(--line); color: var(--subtle); font-size: 10px; }.primary-button, .secondary-button { border: 0; border-radius: 5px; font-weight: 700; font-size: 11px; padding: 11px 15px; }.primary-button { background: var(--lime); color: #142100; }.primary-button:hover { background: #d2ff84; }.primary-button:disabled { opacity: .5; cursor: wait; }.runtime-status { padding: 9px 17px 12px; color: var(--subtle); font-size: 10px; display: flex; align-items: center; gap: 7px; }.runtime-status .status-dot { width: 6px; height: 6px; }.result-panel { margin-top: 18px; border: 1px solid #306c48; background: #102d25; border-radius: 8px; padding: 15px 18px; display: flex; align-items: center; gap: 13px; }.result-panel.failed { border-color: #704242; background: #301d25; }.result-icon { font-size: 22px; }.result-panel strong { font-size: 13px; }.result-panel p { color: #a8c0bb; font-size: 11px; margin: 5px 0 0; }.result-panel.failed p { color: #d4aeb0; }.secondary-button { margin-left: auto; background: #1f6747; color: var(--lime); }.result-panel.failed .secondary-button { display: none; }
.progress-heading { align-items: start; }.progress-heading p:last-child { color: var(--muted); font-size: 12px; max-width: 550px; line-height: 1.6; }.progress-dashboard { display: grid; grid-template-columns: 1fr 2fr; gap: 15px; margin: 20px 0 35px; }.big-progress, .dashboard-stats, .track-progress-item { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; }.big-progress { padding: 22px; }.big-progress strong { font: 600 38px 'Space Grotesk'; display: block; }.big-progress > span { color: var(--muted); font-size: 11px; display: block; margin: 3px 0 23px; }.dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; text-align: center; }.dashboard-stats strong, .dashboard-stats span { display: block; }.dashboard-stats strong { font: 600 27px 'Space Grotesk'; color: var(--lime); }.dashboard-stats span { font-size: 10px; color: var(--subtle); margin-top: 5px; }.track-progress-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.track-progress-item { padding: 17px; }.track-progress-item header { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 16px; }.track-progress-item header span { color: var(--muted); font-size: 10px; }.track-progress-item .progress-track { height: 4px; }.track-progress-item small { display: block; color: var(--subtle); font-size: 10px; margin-top: 10px; }
.toast { position: fixed; bottom: 25px; left: 50%; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #163148; border: 1px solid #32627d; color: var(--ink); padding: 12px 16px; border-radius: 6px; font-size: 11px; transition: .2s; z-index: 5; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 900px) { .sidebar { width: 76px; padding: 22px 10px; }.brand { padding: 0 8px 40px; }.brand > span:last-child, .eyebrow, .nav-link:not(.active)::after, .nav-link { font-size: 0; }.nav-link span { font-size: 17px; }.nav-link { justify-content: center; padding: 12px 8px; }.user-chip > span:last-child, .ghost-button { display: none; }.user-chip { margin: 0; justify-content: center; }.topbar, .view { padding-left: 25px; padding-right: 25px; }.hero-orbit { margin-right: 10px; }.question-row { grid-template-columns: 28px 1fr 100px 20px; }.question-track { display: none; }.question-layout { grid-template-columns: 1fr; }.track-progress-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .topbar { padding: 0 16px; }.view { padding: 35px 16px; }.hero-orbit { display: none; }.overview-grid { grid-template-columns: 1fr; margin-bottom: 38px; }.overview-card { min-height: 125px; }.section-heading { display: block; }.heading-count { display: block; margin-top: 10px; }.filter-row { flex-wrap: wrap; }.search-box { width: 100%; }.filter-row select { margin-left: 0; }.question-row { grid-template-columns: 26px 1fr 20px; padding: 12px; }.question-row > .difficulty { display: none; }.question-list .question-main strong { font-size: 12px; }.editor-footer { align-items: flex-start; gap: 10px; flex-direction: column; }.progress-dashboard, .track-progress-list { grid-template-columns: 1fr; }.dashboard-stats { min-height: 110px; }.result-panel { align-items: flex-start; flex-wrap: wrap; }.result-panel .secondary-button { margin-left: 35px; }.problem-panel { padding: 20px; } }