/* Seven complete visual directions. Layout and illustration belong to each edition. */
body .sidebar .brand { flex-direction:column;align-items:flex-start;gap:4px;padding:0 10px 23px; }
body .sidebar .brand b { display:none; }
body .sidebar .logo { width:166px;height:46px;background:transparent; }
body .sidebar .logo img { width:100%;height:auto; }
body .sidebar .brand small { font-size:10px;text-align:start; }
body.moroccan-login .brand { margin:0 0 23px;gap:7px;align-items:flex-start; }
body.moroccan-login .brand-logo { width:180px;height:50px;padding:5px;background:#fffdf8;border-radius:7px; }
body.moroccan-login .brand-logo img { width:100%;height:auto; }
body.moroccan-login .brand-name,body.moroccan-login .mobile-brand strong { display:none; }
body.moroccan-login .visual { padding:48px 55px; }
body.moroccan-login .visual-content { max-width:560px;width:100%; }
body.moroccan-login .visual h2 { font-size:clamp(37px,3.5vw,52px);line-height:1.12;margin:12px 0 17px;text-align:start;letter-spacing:-1.7px; }
body.moroccan-login .visual-text { margin:0;max-width:450px;font-size:12px;line-height:1.8; }
.template-edition { font:600 9px/1.6 Arial,sans-serif;letter-spacing:2.1px;text-transform:uppercase;color:#a38d60; }
.template-scene { margin:25px 0 17px;line-height:0; }
.template-scene img { display:block;width:100%;height:auto;max-height:250px;object-fit:contain; }
body.moroccan-login .features { display:flex;flex-wrap:wrap;gap:10px 15px;margin-top:20px; }
body.moroccan-login .feature { font-size:9px;gap:6px; }
body.moroccan-login .feature-icon { width:22px;height:22px;font-size:10px; }
body.moroccan-login .morocco-signature { margin-top:24px;padding-top:17px;font-size:8px; }
body.moroccan-login .auth-heading { margin-bottom:27px; }
body.moroccan-login .auth-container { max-width:360px; }
body.moroccan-login .auth-heading h1 { font-size:34px; }
body.moroccan-login .copyright { margin-top:25px; }
body.moroccan-login .visual::after { inset:22px;width:auto;height:auto; }

/* Moroccan / riad courtyard, ceramic colours, arched borders. */
body.moroccan-login[data-template=moroccan] .page { grid-template-columns:1.15fr 1fr; }
body.moroccan-login[data-template=moroccan] .visual { background:#153e32;padding-top:70px; }
body.moroccan-login[data-template=moroccan] .visual::after { border-radius:240px 240px 16px 16px;border-color:#c5a16977; }
body.moroccan-login[data-template=moroccan] .template-scene { border:6px solid #dbc399;border-radius:110px 110px 6px 6px;overflow:hidden;max-width:500px; }
body.moroccan-login[data-template=moroccan] .template-scene img { max-height:none; }
body.moroccan-login[data-template=moroccan] .visual h2 { font-family:Georgia,serif;color:#f6ebd6; }
body[data-template=moroccan] .sidebar { background:linear-gradient(#fffdf8ee,#fffdf8ee),url('../images/zellige.svg'); }
body[data-template=moroccan] :is(.stats article,.card,.settings-card,.extractor-card) { border-radius:16px 16px 7px 7px; }
body[data-template=moroccan] .morocco-welcome { border-radius:30px 30px 8px 8px;border-top:3px solid #b68c48; }
body.dark[data-template=moroccan] .sidebar { background:linear-gradient(#101b18f5,#101b18f5),url('../images/zellige.svg'); }

/* Hacker / a workstation, visible grids, sharp edges and terminal typography. */
body.moroccan-login[data-template=hacker] .page { background:#070d09;grid-template-columns:1.2fr 1fr; }
body.moroccan-login[data-template=hacker] .visual { padding:40px;background:linear-gradient(#070d09e8,#070d09e8),repeating-linear-gradient(90deg,transparent 0 39px,#386344 39px 40px); }
body.moroccan-login[data-template=hacker] .visual::after { display:none; }
body.moroccan-login[data-template=hacker] .visual h2 { font-family:ui-monospace,Consolas,monospace;font-size:45px;font-weight:400;letter-spacing:-2px; }
body.moroccan-login[data-template=hacker] .template-edition::before { content:'> '; }
body.moroccan-login[data-template=hacker] .template-edition { color:#5ddb91; }
body.moroccan-login[data-template=hacker] .auth-side { margin:45px 40px 45px 0;min-height:0;border:1px solid #294b34;border-radius:0;background:#101b13;padding:35px; }
body.moroccan-login[data-template=hacker] :is(.input-wrap,.submit,.login-language select,.login-language button) { border-radius:0; }
body.moroccan-login[data-template=hacker] .auth-side::before { height:2px; }
body.moroccan-login[data-template=hacker] .template-scene img { max-height:280px; }
body[data-template=hacker] :is(.stats article,.card,.settings-card,.extractor-card,.notebook-card,.users-directory,.users-editor,.chat-shell,.chat-composer,.users-button,input,select,textarea) { border-radius:2px!important; }
body[data-template=hacker] :is(.users-button,.chat-button,.chat-conversation,.users-table,.chat-message-meta) { font-family:ui-monospace,Consolas,monospace; }
body[data-template=hacker] .sidebar nav>a::after { content:'_';margin-inline-start:auto;opacity:.4; }
body[data-template=hacker] .stats strong { font-family:ui-monospace,Consolas,monospace;font-size:34px;font-weight:400; }
body[data-template=hacker] .morocco-welcome { border-inline-start:4px solid #63df96; }

/* Rolex-inspired / the timepiece and a restrained luxury frame. Fa9ir branding. */
body.moroccan-login[data-template=rolex] { background:#e9e6dc; }
body.moroccan-login[data-template=rolex] .page { max-width:1260px;margin:40px auto;min-height:calc(100dvh - 80px);grid-template-columns:1.25fr 1fr;border:1px solid #b79958;box-shadow:0 20px 65px #15291918; }
body.moroccan-login[data-template=rolex] .visual { background:#102a1c; }
body.moroccan-login[data-template=rolex] .visual::before,body.moroccan-login[data-template=rolex] .visual::after { display:none; }
body.moroccan-login[data-template=rolex] .visual h2 { text-align:center;font:400 54px/1.05 Georgia,serif;letter-spacing:-2px; }
body.moroccan-login[data-template=rolex] .visual-text,.moroccan-login[data-template=rolex] .template-edition { text-align:center;margin-inline:auto; }
body.moroccan-login[data-template=rolex] .brand { align-items:center; }
body.moroccan-login[data-template=rolex] .template-scene img { max-height:280px; }
body.moroccan-login[data-template=rolex] .features { justify-content:center; }
body.moroccan-login[data-template=rolex] .auth-side { padding:45px 35px;background:#fffdf4;border-inline-start:1px solid #b79958; }
body.moroccan-login[data-template=rolex] .submit { border-radius:1px;text-transform:uppercase;letter-spacing:2px;font-size:11px; }
body[data-template=rolex] :is(.stats article,.card,.settings-card,.extractor-card,.users-directory,.users-editor,.notebook-card) { border-radius:2px;border-color:#d7c8a7; }
body[data-template=rolex] .stats strong { font:42px Georgia,serif;color:#285136; }
body[data-template=rolex] .morocco-welcome { border-block:1px solid #b79958;border-radius:0;padding:35px; }
body[data-template=rolex] .sidebar .logo { background:#fffdf4;border-radius:2px;padding:3px; }
body[data-template=rolex] .sidebar :is(nav>a,summary) { border-radius:0;font-size:12px; }
body[data-template=rolex] .card th { letter-spacing:1px;font-size:9px; }
body.dark[data-template=rolex] .stats strong { color:#d6bd80; }

/* Paris / an editorial spread: sign-in left, illustration right. */
body.moroccan-login[data-template=paris] .page { grid-template-columns:1fr 1.15fr;background:#fcf7f1; }
body.moroccan-login[data-template=paris] .visual { order:2;background:#e9ddd4;border-inline-start:1px solid #c8b6ab; }
body.moroccan-login[data-template=paris] .auth-side { order:1;background:#fcf7f1; }
body.moroccan-login[data-template=paris] .visual::before,body.moroccan-login[data-template=paris] .visual::after { display:none; }
body.moroccan-login[data-template=paris] .visual h2 { font:italic 54px/1.1 Georgia,serif;letter-spacing:-2px; }
body.moroccan-login[data-template=paris] .template-scene { border-block:1px solid #b09a94;padding-block:15px; }
body.moroccan-login[data-template=paris] .brand { border-bottom:1px solid #b09a94;padding-bottom:17px; }
body.moroccan-login[data-template=paris] .template-edition { font-family:Georgia,serif;letter-spacing:3px; }
body.moroccan-login[data-template=paris] .submit { border-radius:0; }
body[data-template=paris] :is(.card,.stats article,.settings-card,.extractor-card,.notebook-card,.users-directory,.users-editor) { border-radius:0;box-shadow:none; }
body[data-template=paris] .morocco-welcome { border-radius:0;border:0;border-block:1px solid #d0b5b3;background:transparent;padding-inline:0; }
body[data-template=paris] .morocco-welcome h1 { font:italic 32px Georgia,serif; }
body[data-template=paris] .sidebar nav>a { font-family:Georgia,serif;font-size:14px;border-radius:0; }
body[data-template=paris] .stats strong { font:40px Georgia,serif;color:#81394f; }
body.dark[data-template=paris] .stats strong { color:#dca5b5; }

/* Finance / a crisp product dashboard, sign-in in a floating white card. */
body.moroccan-login[data-template=fortuneo] .page { grid-template-columns:1fr 1.25fr;background:#edf4e5;padding:35px;gap:20px; }
body.moroccan-login[data-template=fortuneo] .auth-side { order:1;margin:15px;min-height:0;border-radius:22px;box-shadow:0 20px 50px #29461b0c;padding:38px; }
body.moroccan-login[data-template=fortuneo] .visual { order:2;background:transparent;padding:45px 35px; }
body.moroccan-login[data-template=fortuneo] .visual::before,body.moroccan-login[data-template=fortuneo] .visual::after { display:none; }
body.moroccan-login[data-template=fortuneo] .visual h2 { font:700 49px/1.1 Arial,sans-serif;letter-spacing:-2px; }
body.moroccan-login[data-template=fortuneo] .template-scene { filter:drop-shadow(0 15px 18px #29461b12); }
body.moroccan-login[data-template=fortuneo] .auth-side::before { display:none; }
body.moroccan-login[data-template=fortuneo] .submit { border-radius:25px; }
body[data-template=fortuneo] :is(.card,.stats article,.settings-card,.extractor-card,.notebook-card,.users-directory,.users-editor) { border-radius:18px;border:1px solid #e2eadb;box-shadow:0 6px 15px #28441904; }
body[data-template=fortuneo] .sidebar nav>a { border-radius:22px; }
body[data-template=fortuneo] .morocco-welcome { border:0;border-radius:18px;background:#eaf4de;padding:30px; }
body[data-template=fortuneo] .stats strong { font-size:40px;font-weight:500;letter-spacing:-2px; }

/* USA / a bold poster with stars, stripes, skyline and condensed headlines. */
body.moroccan-login[data-template=usa] .page { grid-template-columns:1.2fr 1fr;background:#15345b; }
body.moroccan-login[data-template=usa] .visual { background:#15345b;padding:45px; }
body.moroccan-login[data-template=usa] .visual::before,body.moroccan-login[data-template=usa] .visual::after { display:none; }
body.moroccan-login[data-template=usa] .visual h2 { font:900 65px/.95 Impact,'Arial Narrow',Arial,sans-serif;text-transform:uppercase;letter-spacing:.2px; }
body.moroccan-login[data-template=usa] .template-edition { color:#f0b0b2;letter-spacing:4px; }
body.moroccan-login[data-template=usa] .auth-side { margin:30px;border-radius:0;min-height:0;padding:35px; }
body.moroccan-login[data-template=usa] .auth-side::before { height:7px; }
body.moroccan-login[data-template=usa] .template-scene { border:4px solid #f3efdf; }
body.moroccan-login[data-template=usa] .submit { border-radius:0;background:#b83542;font-weight:800;text-transform:uppercase; }
body[data-template=usa] :is(.card,.stats article,.settings-card,.extractor-card,.users-directory,.users-editor) { border-radius:4px; }
body[data-template=usa] .stats article { border-top:4px solid #15345b; }
body[data-template=usa] .stats article:nth-child(even) { border-top-color:#b83542; }
body[data-template=usa] .stats strong { font:44px Impact,'Arial Narrow',Arial,sans-serif; }
body[data-template=usa] .morocco-welcome { border:0;border-radius:4px;background:#15345b;color:#fff; }
body[data-template=usa] .morocco-welcome :is(h1,p) { color:#fff; }
body[data-template=usa] .morocco-welcome .morocco-eyebrow { color:#f0b0b2; }
body[data-template=usa] .sidebar nav>a.active { border-radius:4px;background:#15345b;color:#fff; }

/* Dubai / night architecture, a gold frame and a spacious luxury suite. */
body.moroccan-login[data-template=dubai] .page { grid-template-columns:1.4fr 1fr;background:#0b2231;padding:25px;gap:20px; }
body.moroccan-login[data-template=dubai] .visual { background:transparent;padding:45px 35px; }
body.moroccan-login[data-template=dubai] .visual::before,body.moroccan-login[data-template=dubai] .visual::after { display:none; }
body.moroccan-login[data-template=dubai] .visual h2 { font:400 62px/1.08 Georgia,serif;letter-spacing:-2px; }
body.moroccan-login[data-template=dubai] .template-scene { margin-top:26px;border-bottom:1px solid #b9955c; }
body.moroccan-login[data-template=dubai] .template-scene img { max-height:290px; }
body.moroccan-login[data-template=dubai] .auth-side { margin:15px 10px;min-height:0;padding:38px;border:1px solid #c0a574;border-radius:5px; }
body.moroccan-login[data-template=dubai] .auth-heading h1 { font-weight:400;font-size:40px; }
body.moroccan-login[data-template=dubai] .submit { border-radius:3px;letter-spacing:1px; }
body[data-template=dubai] .sidebar { background:#102a3b;border-color:#304957; }
body[data-template=dubai] .sidebar :is(nav>a,summary,.profile-info b) { color:#cdd4d6; }
body[data-template=dubai] .sidebar .logo { background:#fffdf8;border-radius:4px;padding:3px; }
body[data-template=dubai] .sidebar nav>a.active { color:#e1c58c;background:#233c4a;box-shadow:inset 3px 0 #b9955c; }
body[data-template=dubai] .sidebar :is(.language-selector,.profile) { border-color:#36505b; }
body[data-template=dubai] .sidebar .language-selector select { background:#193544;border-color:#36505b;color:#e9e3d3; }
body[data-template=dubai] :is(.card,.stats article,.settings-card,.extractor-card,.users-directory,.users-editor) { border-radius:7px;border-color:#dfd4bf; }
body[data-template=dubai] .morocco-welcome { background:#102a3b;border-color:#b9955c;padding:32px; }
body[data-template=dubai] .morocco-welcome :is(h1,p) { color:#eee7d6; }
body[data-template=dubai] .morocco-welcome .morocco-eyebrow { color:#c5a572; }
body[data-template=dubai] .stats strong { font:38px Georgia,serif;color:#102a3b; }
body.dark[data-template=dubai] .stats strong { color:#d8b776; }

/* Shared mobile and RTL behaviour stays functional across every design. */
@media(max-width:1100px) { body.moroccan-login .visual { padding:38px 30px; } body.moroccan-login .visual h2 { font-size:40px; } body.moroccan-login[data-template=rolex] .page { margin:20px;min-height:calc(100dvh - 40px); } }
@media(max-width:900px) {
 body.moroccan-login[data-template] .page { display:block;padding:0;margin:0;min-height:100dvh;max-width:none;border:0; }
 body.moroccan-login[data-template] .visual { display:none; }
 body.moroccan-login[data-template] .auth-side { margin:0;border:0;border-radius:0;min-height:100dvh;padding:30px 25px;display:flex; }
 body.moroccan-login[data-template] .mobile-brand { display:flex;margin-bottom:30px; }
 body.moroccan-login[data-template] .mobile-brand .brand-logo { width:180px;height:50px;background:#fffdf8;border-radius:5px; }
 body.moroccan-login[data-template=rolex] .auth-side { border-top:6px solid #b79958; }
 body.moroccan-login[data-template=paris] .auth-side { border-top:6px solid #81394f; }
 body.moroccan-login[data-template=usa] .auth-side { border-top:6px solid #b83542; }
 body.moroccan-login[data-template=dubai] .auth-side { border-top:6px solid #b9955c; }
}
@media(max-width:760px) { body .sidebar .logo { width:166px; } body[data-template] .morocco-welcome { padding:22px; } body[data-template] .morocco-welcome h1 { font-size:24px; } }
html[dir=rtl] body[data-template] .sidebar nav>a.active { box-shadow:inset -3px 0 var(--theme-primary); }
@media(prefers-reduced-motion:reduce) { .template-scene { filter:none!important; } }
body[data-template=hacker] .sidebar .logo,body.dark .sidebar .logo { background:#f8f7ee;padding:3px;border-radius:3px; }
body.dark[data-template=fortuneo] .morocco-welcome { background:#183020; }
body.dark[data-template=fortuneo] .morocco-welcome h1 { color:#e1ead8; }
body.dark[data-template=fortuneo] .morocco-welcome p { color:#9fb69f; }
body.moroccan-login[data-template=rolex] .brand { flex-direction:column; }
.design-preview { position:relative;height:110px;padding:0;display:block; }
.design-preview .design-art { width:100%;max-width:none;height:100%;object-fit:cover; }
.design-preview .design-logo { position:absolute;top:7px;left:7px;width:80px;height:24px;max-width:none;object-fit:contain;background:#fffdf7;padding:2px;border-radius:3px; }
.animated-terminal { height:250px;border:1px solid #2b5d3f;border-radius:7px;background:#090f0c;overflow:hidden;color:#64df96;font:12px/1.9 ui-monospace,SFMono-Regular,Consolas,monospace;text-align:left; }
.terminal-chrome { display:flex;gap:7px;align-items:center;height:36px;padding:0 15px;border-bottom:1px solid #2b5d3f;background:#0e1711; }
.terminal-chrome>span { width:7px;height:7px;border-radius:50%;background:#5ddb91; }
.terminal-chrome>span:nth-child(2) { opacity:.55; }
.terminal-chrome>span:nth-child(3) { opacity:.25; }
.terminal-chrome small { margin-left:auto;color:#6b9479;font-size:9px; }
.terminal-output { padding:19px 20px; }
.terminal-output>div { min-height:24px;white-space:pre-wrap;overflow-wrap:anywhere; }
.terminal-output>div:not(:first-child):not(:last-child) { color:#abc5b3; }
.terminal-current::after { content:'▍';color:#64df96;animation:terminal-cursor 1s steps(1,end) infinite; }
@keyframes terminal-cursor { 50% { opacity:0; } }
@media(prefers-reduced-motion:reduce) { .terminal-current::after { animation:none; } }
.live-clock { display:block;width:100%;height:auto;aspect-ratio:2/1;max-height:280px;border:0;pointer-events:none; }
.clock-readout { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 17px;margin-bottom:22px;border-bottom:1px solid #b7995840;color:#85703d; }
.clock-readout time { font:24px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:2px; }
.clock-readout small { font-size:11px;letter-spacing:.04em;overflow-wrap:anywhere; }