:root {
    --py-bg: #080a0d;
    --py-panel: #101318;
    --py-panel-raised: #171b22;
    --py-border: #272d37;
    --py-border-soft: #1d222a;
    --py-text: #e8edf4;
    --py-muted: #8e99a9;
    --py-accent: #34bff1;
    --py-violet: #8c7cff;
    --py-green: #43d7a1;
}

body.python-modern {
    color: var(--py-text);
    background: radial-gradient(circle at 18% 0, rgba(52,191,241,.06), transparent 28%), var(--py-bg);
    font-family: Inter, "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.python-modern *, body.python-modern *::before, body.python-modern *::after { box-sizing:border-box; }

/* Application bar */
body.python-modern .drop { position:relative; z-index:1000; }
body.python-modern .drop_menu {
    position:fixed;
    inset:0 0 auto;
    z-index:1000;
    display:flex;
    align-items:center;
    gap:5px;
    height:64px;
    padding:0 18px;
    border-bottom:1px solid var(--py-border-soft);
    background:rgba(8,10,13,.94);
    box-shadow:0 10px 34px rgba(0,0,0,.18);
    backdrop-filter:blur(18px);
}
body.python-modern .drop_menu > li { position:relative; float:none; height:auto; border:0; }
body.python-modern .drop_menu > li > a,
body.python-modern button.btn-submit {
    display:flex;
    align-items:center;
    gap:8px;
    width:auto;
    height:40px;
    padding:0 13px;
    border:1px solid transparent;
    border-radius:9px;
    color:var(--py-muted);
    background:transparent;
    font:600 13px/1 Inter,system-ui,sans-serif;
    transition:color .15s ease,background .15s ease,border-color .15s ease,transform .15s ease;
}
body.python-modern .drop_menu > li:first-child > a { padding-left:2px; color:var(--py-text); }
body.python-modern .drop_menu > li:hover,
body.python-modern button.btn-submit:hover { height:auto; border:0; background:transparent; }
body.python-modern .drop_menu > li > a:hover,
body.python-modern button.btn-submit:hover { color:var(--py-text); border-color:var(--py-border); background:var(--py-panel-raised); }
body.python-modern button.btn-submit { position:static; margin:0; cursor:pointer; }
body.python-modern .drop_menu > li > a .material-symbols-outlined,
body.python-modern button.btn-submit .material-symbols-outlined { color:var(--py-accent); font-size:20px; }
body.python-modern span.icon-label { position:static; color:inherit; font-size:13px !important; }
body.python-modern span.icon-dropdown { position:static; color:#667284; font-size:18px; }
body.python-modern .editor-mode {
    display:inline-flex;
    align-items:center;
    height:24px;
    margin-left:7px;
    padding:0 9px;
    border:1px solid rgba(52,191,241,.35);
    border-radius:999px;
    color:#bdeeff;
    background:rgba(52,191,241,.1);
    font-size:10px;
    font-weight:750;
    letter-spacing:.06em;
    text-transform:uppercase;
}
body.python-modern #run { order:10; display:block; float:none; position:relative; top:0; margin-left:auto; }
body.python-modern #run > a { color:#baf5de; border-color:rgba(67,215,161,.22); background:rgba(67,215,161,.08); }
body.python-modern #run > a .material-symbols-outlined { color:var(--py-green); }
body.python-modern #run > a:hover { border-color:rgba(67,215,161,.42); background:rgba(67,215,161,.14); transform:translateY(-1px); }
body.python-modern #settings-menu { order:11; }
body.python-modern #user-menu { order:12; }
body.python-modern #user-menu > a { max-width:190px; overflow:hidden; white-space:nowrap; }

/* Stable dropdown geometry prevents hover shifts. */
body.python-modern .drop_menu ul.sub-menu {
    top:calc(100% - 1px);
    left:-9999px;
    min-width:230px;
    padding:7px !important;
    overflow:hidden;
    border:1px solid var(--py-border);
    border-radius:13px;
    background:rgba(15,18,23,.98);
    box-shadow:0 22px 65px rgba(0,0,0,.48);
    backdrop-filter:blur(18px);
}
body.python-modern .drop_menu li:hover > ul.sub-menu { top:calc(100% - 1px); left:0; }
body.python-modern #settings-menu:hover > ul.sub-menu,
body.python-modern #user-menu:hover > ul.sub-menu { right:0; left:auto; }
body.python-modern #settings-menu ul { min-width:260px; }
body.python-modern .drop_menu ul.sub-menu li { float:none; width:100%; height:auto; border:0; background:transparent; }
body.python-modern .drop_menu li:hover ul.sub-menu li a,
body.python-modern .drop_menu li:hover ul.sub-menu li a.medium,
body.python-modern .drop_menu li:hover ul.sub-menu li a.large {
    display:flex;
    align-items:center;
    width:100%;
    min-height:42px;
    height:auto;
    padding:9px 11px;
    border-radius:8px;
    color:#b8c0cc;
    background:transparent;
    text-indent:0;
}
body.python-modern .drop_menu li:hover ul.sub-menu li a:hover { height:auto; color:#f0f4f8; background:#242a33; }
body.python-modern ul.sub-menu span.sub-menu-item { position:static; display:flex; align-items:center; gap:11px; width:100%; }
body.python-modern ul.sub-menu .material-symbols-outlined { flex:none; color:#7e8999; font-size:20px; }
body.python-modern ul.sub-menu a:hover .material-symbols-outlined { color:var(--py-accent); }
body.python-modern .badge { position:static; top:auto; left:auto; display:inline-flex; align-items:center; align-self:center; height:18px; margin-left:auto; padding:0 6px; border-radius:5px; color:#92dff9; background:rgba(52,191,241,.1); font-size:8px; line-height:1; text-transform:uppercase; }
body.python-modern #settings-menu .range-container { display:flex; align-items:center; gap:10px; width:100%; padding:0; }
body.python-modern #settings-menu .range { flex:1; width:auto; accent-color:var(--py-accent); }
body.python-modern #settings-menu a.no-select { gap:10px; cursor:default !important; }
body.python-modern #settings-menu a.no-select:hover { height:auto; background:#242a33 !important; }
body.python-modern .switch { flex:none; top:0; }

/* Editor workspace */
body.python-modern .python-workspace {
    position:fixed;
    inset:64px 0 34px;
    z-index:0;
    display:flex;
    overflow:hidden;
    padding:10px 10px 0;
    background:transparent;
}
body.python-modern #a,
body.python-modern #b {
    position:relative;
    height:100%;
    overflow:hidden;
    border:1px solid var(--py-border);
    background:var(--py-panel);
}
body.python-modern #a { border-radius:13px 0 0 13px; }
body.python-modern #b { border-radius:0 13px 13px 0; }
body.python-modern .python-pane-heading,
body.python-modern .terminal-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:42px;
    padding:0 14px;
    border:0;
    border-bottom:1px solid var(--py-border);
    color:#98a3b2;
    background:#151920;
    font:650 10px/1 Inter,system-ui,sans-serif;
    letter-spacing:.08em;
    text-transform:uppercase;
}
body.python-modern .python-pane-heading > span:first-child,
body.python-modern .terminal-title { display:flex; align-items:center; gap:7px; }
body.python-modern .python-pane-heading .material-symbols-outlined,
body.python-modern .terminal-title .material-symbols-outlined { position:static !important; top:auto !important; color:var(--py-accent); font-size:17px !important; }
body.python-modern .python-file-name { color:#647083; font:600 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:0; text-transform:none; }
body.python-modern #py { width:100%; height:calc(100% - 42px) !important; }
body.python-modern .lang-logo { right:15px; bottom:14px; height:34px !important; opacity:.13; }
body.python-modern .terminal-wrapper { background:#0d1014; }
body.python-modern .terminal-btn { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid transparent; border-radius:7px; color:#7f8a99; }
body.python-modern .terminal-btn:hover { color:#ff9ca5; border-color:rgba(255,135,146,.24); background:rgba(255,135,146,.08); }
body.python-modern #preview {
    width:100%;
    height:calc(100% - 42px);
    padding:18px;
    color:#d5dbe3;
    background:#0d1014;
    font:13px/1.65 "SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
body.python-modern #preview:empty::before { content:"Run your Python code to see the output here."; color:#596474; }
body.python-modern .gutter.gutter-horizontal { position:relative; z-index:3; width:8px !important; margin:0 -2px; background:transparent; }
body.python-modern .gutter.gutter-horizontal::after { content:""; position:absolute; inset:42px 3px 0; width:2px; border-radius:2px; background:#323a46; transition:background .15s ease,box-shadow .15s ease; }
body.python-modern .gutter.gutter-horizontal:hover::after { background:var(--py-accent); box-shadow:0 0 10px rgba(52,191,241,.35); }

/* Loading and footer */
body.python-modern #splashscreen { background:rgba(8,10,13,.98); }
body.python-modern .python-loader { display:flex; flex-direction:column; align-items:center; }
body.python-modern .python-loader i { display:grid; place-items:center; width:62px; height:62px; border:1px solid rgba(52,191,241,.28); border-radius:18px; color:#9be5ff; background:linear-gradient(145deg,rgba(52,191,241,.17),rgba(140,124,255,.14)); font-size:30px; }
body.python-modern .python-loader .loading-text { margin-top:15px; color:#99a5b5; font-size:12px; }
body.python-modern .footer { inset:auto 0 0; z-index:20; display:flex; align-items:center; height:34px; padding:0 16px; border-top:1px solid var(--py-border-soft); background:#090b0e; }
body.python-modern .footer ul { font-size:10px !important; }
body.python-modern .footer ul li { padding-right:14px; }
body.python-modern .footer ul li a { color:#697486; }
body.python-modern .footer ul li a:hover { color:#a9eaff; text-decoration:none; }
body.python-modern ::-webkit-scrollbar { width:8px; height:8px; }
body.python-modern ::-webkit-scrollbar-track { background:transparent; }
body.python-modern ::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:9px; background:#38404c; background-clip:padding-box; }

@media (max-width:860px) {
    body.python-modern .drop_menu { padding:0 10px; }
    body.python-modern .drop_menu > li > a, body.python-modern button.btn-submit { padding:0 9px; }
    body.python-modern .drop_menu > li:not(:first-child) .icon-label, body.python-modern #user-menu .icon-label { display:none; }
    body.python-modern #user-menu > a { width:42px !important; }
}
@media (max-width:620px) {
    body.python-modern .python-workspace { display:block; overflow:auto; padding:8px; }
    body.python-modern #a, body.python-modern #b { float:none; width:100% !important; height:50% !important; border-radius:11px; }
    body.python-modern #b { margin-top:8px; }
    body.python-modern .gutter.gutter-horizontal { display:none; }
    body.python-modern .editor-mode { display:none; }
}
@media (prefers-reduced-motion:reduce) {
    body.python-modern *, body.python-modern *::before, body.python-modern *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}