/* mystic-eye.css — GWAY Mystic, Esoteric, Occult, All-Seeing Theme
   Layer atop base.css.
*/

:root {
    --bg: linear-gradient(135deg, #19173a 0%, #262348 65%, #2e284c 100%);
    --bg-alt: #222142;
    --card-bg: linear-gradient(120deg, #28224a 60%, #24244d 100%);
    --fg: #e6eaff;
    --accent: #bd8af5;
    --accent-alt: #39e6c2;
    --muted: #8080aa;
    --sigil-gold: #e1d47a;
    --sigil-blue: #4fd0ff;
    --sigil-purple: #9466db;
    --sigil-shadow: 0 0 18px #bd8af577, 0 0 6px #39e6c277;
    --eye-shadow: 0 0 22px #bd8af588;
}

body, .page-wrap {
    background: var(--bg) fixed !important;
    color: var(--fg);
    font-family: 'Cormorant Garamond', 'EB Garamond', 'Georgia', serif;
    letter-spacing: 0.02em;
}

aside {
    background: linear-gradient(145deg, #18173a 80%, #31224a 100%);
    border-right: 2px solid #3c3881;
    color: var(--fg);
    font-family: inherit;
    box-shadow: 0 0 24px #362c8077;
    position: relative;
}
aside::before {
    content: '';
    display: block;
    position: absolute;
    top: 6%; left: 18px;
    width: 38px; height: 38px;
    background: url('data:image/svg+xml;utf8,<svg width="38" height="38" xmlns="http://www.w3.org/2000/svg"><ellipse cx="19" cy="19" rx="17" ry="16" fill="none" stroke="%23bd8af5" stroke-width="2.3"/><ellipse cx="19" cy="19" rx="8" ry="8" fill="%2339e6c2" fill-opacity="0.14" stroke="%234fd0ff" stroke-width="1.2"/><circle cx="19" cy="19" r="2.5" fill="%23bd8af5" /></svg>') no-repeat center center;
    opacity: 0.45;
    z-index: 0;
}

aside ul li a {
    color: var(--accent);
    font-family: inherit;
    border-radius: 10px;
    padding-left: 1.2em;
    font-size: 0.97em;
    font-weight: 500;
    letter-spacing: 0.09em;
    transition: background 0.16s, color 0.13s;
    border-left: 3px solid var(--sigil-gold);
    text-shadow: 0 0 4px #bd8af5aa;
}
aside ul li a.active,
aside ul li a:hover {
    background: linear-gradient(90deg, #39e6c222 70%, #bd8af522 100%);
    color: #e1d47a;
    border-left: 3.4px solid var(--sigil-blue);
    font-weight: bold;
    text-shadow: 0 0 12px #9466dbcc, 0 0 6px #39e6c2bb;
}

aside ul.sub-links {
    list-style: none;
    padding-left: 1em;
    margin: 0.2em 0 0.4em;
    font-size: 0.85em;
}

aside ul.sub-links li a {
    text-transform: none;
    padding: 0.2em 0 0.2em 1.2em;
}

main {
    background: var(--card-bg);
    box-shadow: 0 0 32px #19173a55, 0 1px 13px #9466db55;
    border-radius: 18px 28px 13px 18px/23px 18px 16px 18px;
    margin-bottom: 1em;
    color: var(--fg);
    border: 2.8px solid #31224a;
    position: relative;
}

h1, h2, h3, h4 {
    font-family: 'Cormorant Garamond', 'EB Garamond', 'Georgia', serif;
    letter-spacing: 0.11em;
    margin-top: 1.08em;
    margin-bottom: 0.38em;
    text-shadow: 0 0 14px #9466db22, 0 2px 6px #0008;
}
h1 {
    color: #bd8af5;
    font-size: 2.16em;
    font-weight: 800;
    letter-spacing: 0.13em;
    border-bottom: 2px solid #39e6c2cc;
    padding-bottom: 0.18em;
    text-shadow: 0 0 16px #bd8af588, 0 1px 0 #2e284c88;
}
h2 {
    color: #39e6c2;
    font-size: 1.29em;
    border-bottom: 2px solid #9466dbcc;
    padding-bottom: 0.13em;
}
h3, h4 {
    color: #e1d47a;
}

button,
input[type="submit"],
input[type="button"] {
    background: linear-gradient(90deg, #9466db 10%, #39e6c2 80%);
    color: #2e284c;
    border: 2.2px solid #bd8af5;
    border-radius: 13px 18px 11px 8px / 13px 8px 15px 11px;
    font-family: inherit;
    font-weight: bold;
    letter-spacing: 0.13em;
    font-size: 1.04em;
    padding: 0.37em 1.1em;
    text-shadow: 0 1px 0 #fff9, 0 0 2px #bd8af555;
    box-shadow: 0 0 17px #39e6c277, 0 2px 6px #9466db55;
    margin-top: 0.3em;
    margin-bottom: 0.5em;
    transition: background 0.18s, box-shadow 0.18s;
}
button:hover,
input[type="submit"]:hover {
    background: linear-gradient(90deg, #e1d47a 30%, #9466db 80%);
    color: #19173a;
    border-color: #39e6c2;
    box-shadow: 0 0 21px #e1d47a99;
}
button:active,
input[type="submit"]:active {
    background: #bd8af5;
    color: #262348;
}

input,
textarea,
select {
    background: #222142;
    color: #e6eaff;
    border: 1.7px solid #39e6c2;
    border-radius: 7px;
    font-family: inherit;
    font-size: 1em;
    margin-bottom: 0.3em;
    padding: 0.39em 1em;
    box-shadow: 0 0 5px #bd8af533;
    width: 100%;
    box-sizing: border-box;
}
input:focus,
textarea:focus,
select:focus {
    border-color: #bd8af5;
    background: #19173a;
    outline: 1.5px solid #bd8af5;
}

pre, code, pre code {
    background: #232049 !important;
    color: #39e6c2 !important;
    font-family: 'Fira Mono', 'JetBrains Mono', 'Consolas', monospace;
    border-radius: 7px;
    box-shadow: 0 2px 10px #9466db33;
    font-size: 0.97em;
    letter-spacing: 0.04em;
}

code {
    background: #232049 !important;
    color: #e1d47a !important;
    border-radius: 5px;
    border: 1.2px solid #bd8af566;
    font-size: 0.97em;
}

.current, .active {
    color: #2e284c !important;
    background: #39e6c2 !important;
    border-radius: 11px;
    font-weight: bold;
    box-shadow: 0 0 8px #bd8af5;
}

footer {
    background: linear-gradient(90deg, #19173a 0%, #232049 100%);
    color: #e1d47a;
    border-top: 2.5px solid #bd8af5;
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    letter-spacing: 0.13em;
    font-size: 1.03em;
    text-align: center;
    box-shadow: 0 -1px 21px #9466db33;
    position: relative;
}
footer::after {
    /* Occult eye sigil bar */
    content: "";
    display: block;
    width: 100%;
    height: 18px;
    background: url('data:image/svg+xml;utf8,<svg width="180" height="18" xmlns="http://www.w3.org/2000/svg"><ellipse cx="90" cy="9" rx="85" ry="8" fill="none" stroke="%23bd8af5" stroke-width="2.4"/><ellipse cx="90" cy="9" rx="28" ry="5" fill="none" stroke="%2339e6c2" stroke-width="1.3"/><circle cx="90" cy="9" r="3.5" fill="%23bd8af5" /></svg>') repeat-x bottom left / auto 18px;
    opacity: 0.39;
    margin-top: 0.32em;
    pointer-events: none;
}

::-webkit-scrollbar-thumb {
    background: #9466db;
    border-radius: 8px;
}
::-webkit-scrollbar-track {
    background: #232049;
}

.help-entry {
    background: #24244d;
    border: 2.3px solid #9466db88;
    border-radius: 11px 6px 12px 8px;
    box-shadow: 0 2px 12px #bd8af533;
    font-family: inherit;
}
.help-entry .doc {
    background: #232049;
    color: #39e6c2;
    border-left: 4px solid #bd8af5;
}
.help-entry pre, .help-entry pre code.python {
    background: #28224a;
    color: #e1d47a;
    box-shadow: 0 1px 3px #bd8af555;
}
.help-entry a {
    color: #bd8af5;
    text-shadow: 0 0 7px #9466db99;
    border-bottom: 1.7px dotted #39e6c2;
}
.help-entry a:hover {
    background: #23204999;
    color: #e1d47a;
    border-bottom: 2.3px double #bd8af5;
}

aside img[src*="qr"] {
    border-radius: 11px;
    border: 2px solid #9466db;
    box-shadow: 0 0 19px #bd8af555, 0 0 8px #39e6c255;
    background: #232049;
    padding: 7px;
    margin-bottom: 1.3em;
    margin-top: 0.7em;
}

hr {
    border: none;
    border-top: 2.2px dashed #9466db99;
    margin: 1.3em 0 0.7em 0;
    opacity: 0.75;
}

textarea.help {
    background: #232049;
    color: #bd8af5;
    border: 1.3px solid #39e6c2;
    font-family: inherit;
    border-radius: 8px;
    font-size: 1em;
}

@media (max-width: 650px) {
    main, aside, .help-entry { border-radius: 0 !important; }
    aside { min-width: 0; }
}

/* (Optionally, import Cormorant Garamond from Google Fonts for the full mystical effect.)
   @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&display=swap');
 */
