:root{
    /* =========================
       THEME
    ========================= */
    --font-size:12px;

    --bg:#0B0F14;
    --navbg:#0D1117;
    --panel-bg:#101722;
    --control-bg:#151C26;
    --control-bg-hover:#1C2633;
    --control-bg-focus:#202B3A;

    --border:#253041;
    --border-soft:#334155;
    --border-hover:#4F6B8F;

    --text:#E6EDF3;
    --muted:#8B949E;
    --placeholder:#888;
    --hover:#232A36;

    --accent:#6EA8FF;
    --accent-bright:#8FDBFF;
    --highlight-color:#66CCFF;

    --shadow-lg:0 18px 50px rgba(0,0,0,.45);
    --shadow-md:0 8px 24px rgba(0,0,0,.35);
    --glow:0 0 0 1px rgba(110,168,255,.25),
           0 0 22px rgba(110,168,255,.12);

    /* =========================
       CONTROL SYSTEM
    ========================= */
    --control-height:36px;
    --control-font:14px;
    --control-radius:10px;
    --control-padding:0 16px;
    --control-gap:8px;
    --control-width:220px;

    --nav-width:240px;
    --title-height:34px;
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    scrollbar-width:thin;
    scrollbar-color:#334155 #0D1117;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:var(--bg);
    color:var(--text);
    font-family:monospace;
    font-size:var(--font-size);
}

body{
    display:flex;
    flex-direction:column;
    background:
        radial-gradient(circle at top left, rgba(110,168,255,.12), transparent 38%),
        radial-gradient(circle at bottom right, rgba(141,219,255,.08), transparent 35%),
        var(--bg);
}

/* =========================
   MAIN LAYOUT
========================= */
#main{
    width:100%;
    height:100%;
    overflow:hidden;
    display:flex;
}

#main.nav-collapsed{
    --nav-width:60px;
}

/* =========================
   NAVIGATION
========================= */
.nav-column,
#navA{
    flex:0 0 var(--nav-width);
    flex-shrink:0;
    height:100%;
    overflow-y:auto;
    display:block;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), transparent 120px),
        var(--navbg) !important;
    color:var(--text);
    border-right:1px solid rgba(255,255,255,.08);
    box-shadow:8px 0 28px rgba(0,0,0,.35);
    padding:8px;
}

.nav-controls{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:12px;
    margin:10px 0 16px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.07);
    border-radius:14px;
    box-shadow:var(--shadow-md);
}

/* =========================
   SHARED CONTROLS
========================= */
button,
input[type="button"]{
    height:var(--control-height);
    min-height:var(--control-height);
    padding:var(--control-padding);

    font-size:var(--control-font);
    font-family:Arial,sans-serif;
    font-weight:600;
    letter-spacing:.02em;

    color:#FFF;
    background:
        linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.03)),
        linear-gradient(180deg, #263244, #151C26);

    border:1px solid rgba(255,255,255,.10);
    border-bottom-color:rgba(0,0,0,.45);
    border-radius:var(--control-radius);

    cursor:pointer;
    white-space:nowrap;
    text-align:center;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 8px 18px rgba(0,0,0,.32);

    transition:
        transform .08s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

button:hover,
input[type="button"]:hover{
    transform:translateY(-1px);
    border-color:rgba(110,168,255,.45);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        var(--glow),
        0 12px 24px rgba(0,0,0,.4);
}

button:active,
input[type="button"]:active{
    transform:translateY(0) scale(.98);
}

button:focus-visible,
input[type="button"]:focus-visible,
select:focus-visible,
input[type="text"]:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
}

#go,
#goC,
#goD,
#goE,
#layoutToggle{
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
        linear-gradient(180deg, #2F81F7, #1F5FBF);
    border-color:rgba(141,219,255,.35);
}

#toggleControls,
#toggleSearch,
#toggleGo,
#toggleInfo,
#layoutToggle{
    width:100%;
    max-width:var(--control-width);
    margin:0 auto;
}

#go,
#goC,
#goD,
#goE{
    min-width:70px;
}

/* =========================
   FORM CONTROLS
========================= */
select,
#fontSelector,
#highlightSelector,
input[type="text"],
#search,
#searchC,
#searchD,
#searchE{
    height:var(--control-height);
    min-height:var(--control-height);
    padding:0 12px;

    font-size:var(--control-font);
    font-family:Arial,sans-serif;
    font-weight:600;

    color:var(--text);
    background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)),
        var(--control-bg);

    border:1px solid rgba(255,255,255,.10);
    border-radius:var(--control-radius);
    outline:none;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 4px 12px rgba(0,0,0,.25);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

select,
#fontSelector,
#highlightSelector{
    width:100%;
    max-width:var(--control-width);
    margin:0 auto;
    cursor:pointer;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}

#search,
#searchC,
#searchD,
#searchE,
input[type="text"]{
    min-width:var(--control-width);
}

select:hover,
#fontSelector:hover,
#highlightSelector:hover,
#search:hover,
#searchC:hover,
#searchD:hover,
#searchE:hover,
input[type="text"]:hover{
    background:var(--control-bg-hover);
    border-color:var(--border-hover);
}

select:focus,
#fontSelector:focus,
#highlightSelector:focus,
#search:focus,
#searchC:focus,
#searchD:focus,
#searchE:focus,
input[type="text"]:focus{
    border-color:var(--accent);
    box-shadow:var(--glow);
    background:var(--control-bg-focus);
}

option{
    color:#000;
    background:#FFF;
}

select option:checked,
select option:hover{
    background:#CFCFCF;
    color:#000;
}

/* =========================
   NAVIGATION TREE
========================= */
ul{
    list-style:none;
    margin:0;
    padding:0;
}

li{
    margin:0;
    padding:0;
}

.toggle,
.file-link{
    display:block;
    width:100%;
    padding:6px 9px;
    margin:2px 0;
    border:none;
    border-radius:8px;
    background:none;
    color:#D8D8D8;
    text-align:left;
    cursor:pointer;
    line-height:1.3;
    font-size:13px;
    transition:
        background .15s ease,
        color .15s ease;
}

.toggle{
    font-weight:700;
    color:#F0F6FC;
}

.file-link{
    padding-left:18px;
    font-weight:400;
    color:#B8C7D9;
}

.toggle:hover,
.file-link:hover{
    background:linear-gradient(90deg, rgba(110,168,255,.18), rgba(110,168,255,.04));
    color:#FFF;
}

.file-link.active{
    background:linear-gradient(90deg, rgba(47,129,247,.65), rgba(47,129,247,.20));
    color:#FFF;
    box-shadow:inset 3px 0 0 var(--accent-bright);
}

.nested{
    display:none !important;
    margin-left:12px;
    padding-left:8px;
    border-left:1px solid rgba(110,168,255,.18);
}

.nested.open{
    display:block !important;
}

/* =========================
   SEARCH CONTROLS
========================= */
.search-row{
    height:48px;
    display:flex;
    align-items:center;
    gap:var(--control-gap);
    padding:6px 8px;
    margin:0;
    background:rgba(255,255,255,.025);
    border-bottom:1px solid rgba(255,255,255,.07);
}

#search::placeholder,
#searchC::placeholder,
#searchD::placeholder,
#searchE::placeholder,
input[type="text"]::placeholder{
    color:var(--placeholder);
}

.search-count,
#countB,
#countC,
#countD,
#countE{
    min-width:42px;
    color:var(--muted);
    font-size:12px;
    font-family:Arial,sans-serif;
    text-align:center;
    white-space:nowrap;
}

/* =========================
   FRAMES
========================= */
iframe{
    display:block;
    width:100%;
    height:100%;
    border:none;
    padding-bottom:30px;
    contain:size layout;
    overflow:hidden;
}

.iframe-title{
    height:var(--title-height);
    min-height:var(--title-height);
    display:flex;
    align-items:center;

    padding:0 10px;
    margin:0;
    overflow:hidden;

    background:
        linear-gradient(180deg, rgba(255,255,255,.06), transparent),
        #111A26;
    color:#F4F8FF !important;

    font-size:14px;
    font-weight:bold;
    letter-spacing:.04em;
    text-transform:uppercase;

    border-bottom:1px solid rgba(110,168,255,.25);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 4px 14px rgba(0,0,0,.25);
}

/* =========================
   TABLE / PANEL LAYOUT
========================= */
#layouttable{
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    vertical-align:top;
    border-collapse:collapse;
    border-spacing:0;
    overflow:hidden;
    min-width:0;
    table-layout:fixed;
}

#layouttableframes1{
    width:var(--nav-width);
}

#layouttable tr,
#layouttable td{
    height:100%;
    vertical-align:top;
}

#layouttable td{
    overflow:hidden;
    border-left:1px solid rgba(255,255,255,.06);
    background:#0E141D;
}

#layouttable td:first-child{
    border-left:none;
}

#layoutRow td{
    vertical-align:top;
    height:100%;
}

.left-item,
.center-col,
.center-col2,
.right-item{
    position:relative;
}

.dummy{
    width:2px;
    color:#000;
    padding:0;
    margin:0;
}

.table-wrap{
    overflow:hidden;
    width:calc(100% - 10px);
}

table{
    margin-right:-10px;
}

/* =========================
   PANEL MODES
========================= */
body.four-panel .left-item,
body.four-panel .center-col2,
body.four-panel .center-col,
body.four-panel .right-item{
    display:table-cell;
}

body.three-panel .center-col,
body.three-panel .center-item2{
    display:none;
}

body.two-panel .center-col,
body.two-panel .center-col2,
body.two-panel .center-item,
body.two-panel .center-item2{
    display:none;
}

body.one-panel #layouttable{
    width:100% !important;
    table-layout:fixed;
}

body.one-panel .center-col2,
body.one-panel .center-col,
body.one-panel .right-item,
body.one-panel .dummy,
body.one-panel .center-item,
body.one-panel .center-item2,
body.one-panel .center-item3{
    display:none !important;
}

body.one-panel .left-item{
    width:100% !important;
    padding:0;
}

body.one-panel #titleB,
body.one-panel #frameB{
    width:100% !important;
}

body.one-panel #frameB{
    display:block;
    border:none;
}

/* =========================
   HIDDEN STATES
========================= */
body.hide-search #search,
body.hide-search #searchC,
body.hide-search #searchD,
body.hide-search #searchE,
body.hide-search #go,
body.hide-search #goC,
body.hide-search #goD,
body.hide-search #goE,
body.hide-search .search-row{
    display:none !important;
}

body.hide-go #go,
body.hide-go #goC,
body.hide-go #goD,
body.hide-go #goE{
    display:none !important;
}

body.hide-controls .nav-controls,
.hidden-info,
.hidden-controls{
    display:none !important;
}

/* =========================
   FONT SIZE SYSTEM
========================= */
body.font-12,
:root.font-12{ --font-size:12px; }

body.font-14,
:root.font-14{ --font-size:14px; }

body.font-16,
:root.font-16{ --font-size:16px; }

body.font-18,
:root.font-18{ --font-size:18px; }

body.font-20,
:root.font-20{ --font-size:20px; }

body.font-24,
:root.font-24{ --font-size:24px; }

body.font-28,
:root.font-28{ --font-size:28px; }

/* =========================
   HIGHLIGHT SYSTEM
========================= */
mark,
.search-highlight,
.highlight{
    background:transparent;
    color:var(--highlight-color);
    font-weight:bold;
}

body.highlight-blue,
:root.highlight-blue{ --highlight-color:#66CCFF; }

body.highlight-green,
:root.highlight-green{ --highlight-color:#70E000; }

body.highlight-yellow,
:root.highlight-yellow{ --highlight-color:#FFD54F; }

body.highlight-orange,
:root.highlight-orange{ --highlight-color:#FFB347; }

body.highlight-purple,
:root.highlight-purple{ --highlight-color:#B388FF; }

body.highlight-lightgreen,
:root.highlight-lightgreen{ --highlight-color:#9CFF9C; }

/* =========================
   SCROLLBARS
========================= */
::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-track{
    background:#0D1117;
}

::-webkit-scrollbar-thumb{
    background:#334155;
    border-radius:999px;
    border:2px solid #0D1117;
}

::-webkit-scrollbar-thumb:hover{
    background:#4F6B8F;
}

/* =========================
   SMALL SCREENS
========================= */
@media (max-width:900px){
    :root{
        --nav-width:210px;
        --control-width:190px;
    }

    .search-row{
        gap:6px;
        padding:6px;
    }

    #search,
    #searchC,
    #searchD,
    #searchE,
    input[type="text"]{
        min-width:150px;
    }
}