/* ═══════════════════════════════════════════════════════════
   dotHub Common Design System v2.0
   Shared CSS for all service pages
   Reference: index.html + profile.html
═══════════════════════════════════════════════════════════ */

/* === RESET & ROOT === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
    --green:#4ade80;--teal:#22d3ee;--purple:#a78bfa;--gold:#c8a84e;--blue:#3b82f6;--red:#f87171;--orange:#fb923c;
    --bg:#030406;--s1:#080a0f;--s2:#0c0f16;
    --glass:rgba(255,255,255,.025);--glass-border:rgba(255,255,255,.06);
    --text:#e8edf4;--t2:rgba(255,255,255,.5);--t3:rgba(255,255,255,.25)
}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit;border:none;background:none}

/* === COSMIC BACKGROUND === */
.cosmos{position:fixed;inset:0;z-index:-10;overflow:hidden}
.cosmos::before{content:'';position:absolute;inset:0;
    background:
        radial-gradient(ellipse 100% 80% at 15% 20%,rgba(74,222,128,.06) 0%,transparent 50%),
        radial-gradient(ellipse 80% 60% at 80% 15%,rgba(167,139,250,.05) 0%,transparent 45%),
        radial-gradient(ellipse 90% 70% at 50% 80%,rgba(34,211,238,.04) 0%,transparent 50%),
        radial-gradient(ellipse 50% 40% at 70% 60%,rgba(74,222,128,.03) 0%,transparent 40%)}
.cosmos::after{content:'';position:absolute;inset:0;
    background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='g' patternUnits='userSpaceOnUse' width='80' height='80'%3E%3Cpath d='M80 0H0v80' fill='none' stroke='%23ffffff' stroke-opacity='.015' stroke-width='.4'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23g)' width='100%25' height='100%25'/%3E%3C/svg%3E");opacity:.6}

/* Floating orbs */
.orb{position:fixed;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:-5;animation:orbFloat 20s ease-in-out infinite alternate}
.orb-1{width:600px;height:600px;background:rgba(74,222,128,.04);top:-10%;left:-5%;animation-duration:25s}
.orb-2{width:500px;height:500px;background:rgba(167,139,250,.035);top:40%;right:-10%;animation-duration:22s;animation-delay:-5s}
.orb-3{width:400px;height:400px;background:rgba(34,211,238,.03);bottom:-5%;left:30%;animation-duration:28s;animation-delay:-10s}
@keyframes orbFloat{0%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-40px) scale(1.1)}66%{transform:translate(-20px,30px) scale(.95)}100%{transform:translate(10px,-20px) scale(1.05)}}

/* Stars */
.stars{position:fixed;inset:0;z-index:-8;pointer-events:none}
.star{position:absolute;width:2px;height:2px;background:white;border-radius:50%;animation:starTwinkle linear infinite}
@keyframes starTwinkle{0%,100%{opacity:.1}50%{opacity:.6}}

/* === NAVIGATION === */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;padding:1.5rem 3rem;display:flex;align-items:center;justify-content:space-between;transition:all .4s}
.nav.scrolled{background:rgba(3,4,6,.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border);padding:1rem 3rem}
.nav-logo{font-size:1.75rem;font-weight:900;letter-spacing:-.04em;cursor:pointer;transition:all .3s}
.nav-logo:hover{letter-spacing:0}
.nav-logo .dot{color:var(--green)}
.nav-actions{display:flex;align-items:center;gap:1rem}

.btn-ghost{padding:.7rem 1.8rem;border-radius:100px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--t2);border:1px solid var(--glass-border);background:var(--glass);transition:all .35s}
.btn-ghost:hover{background:rgba(255,255,255,.06);color:var(--text);border-color:rgba(255,255,255,.12)}

/* Profile dropdown */
.profile-trigger{display:flex;align-items:center;gap:.8rem;cursor:pointer;padding:.4rem;border-radius:1rem;transition:background .3s}
.profile-trigger:hover{background:rgba(255,255,255,.04)}
.profile-avatar{width:42px;height:42px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.profile-avatar img{width:100%;height:100%;object-fit:cover}
.profile-info{text-align:right}
.profile-name{font-size:.85rem;font-weight:700}
.profile-tag{font-size:.6rem;opacity:.35;text-transform:uppercase;letter-spacing:.15em}

.user-dropdown{position:absolute;right:0;top:calc(100% + 12px);background:rgba(8,10,15,.96);backdrop-filter:blur(30px);border:1px solid var(--glass-border);border-radius:1.2rem;min-width:200px;box-shadow:0 30px 60px rgba(0,0,0,.7);overflow:hidden;display:none;animation:dropIn .25s ease}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.user-dropdown a,.user-dropdown button{display:block;width:100%;text-align:left;padding:.9rem 1.4rem;font-size:.85rem;font-weight:600;transition:background .2s}
.user-dropdown a:hover{background:rgba(255,255,255,.04)}
.user-dropdown button:hover{background:rgba(248,113,113,.08);color:var(--red)}

/* === AUTH MODAL (dnd_app pattern) === */
.dh-auth-overlay{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;
    background:radial-gradient(ellipse at 50% 40%,rgba(8,10,15,.97),rgba(3,4,6,.99));
    backdrop-filter:blur(12px);padding:20px}
.dh-auth-overlay.show{display:flex}
.dh-auth-card{background:rgba(8,10,15,.98);border:2px solid var(--glass-border);border-radius:2rem;padding:48px 40px;max-width:420px;width:100%;text-align:center;
    box-shadow:0 40px 80px rgba(0,0,0,.5);position:relative;overflow:hidden;animation:authModalIn .5s ease-out}
.dh-auth-card::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:80%;height:1px;background:linear-gradient(90deg,transparent,var(--glass-border),transparent)}
.dh-auth-icon{font-size:48px;margin-bottom:14px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));animation:authBreath 3s ease-in-out infinite}
@keyframes authBreath{0%,100%{transform:scale(1);filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}50%{transform:scale(1.05);filter:drop-shadow(0 6px 20px rgba(0,0,0,.4))}}
.dh-auth-card h2{font-size:1.5rem;font-weight:900;margin-bottom:8px;letter-spacing:-.02em}
.dh-auth-card .subtitle{font-size:.82rem;color:var(--t2);margin-bottom:28px;line-height:1.5}
.dh-auth-btn{display:block;width:100%;padding:14px;border-radius:.875rem;border:none;font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:all .3s;margin-bottom:8px;text-align:center;text-decoration:none}
.dh-auth-btn.primary{color:#000}
.dh-auth-btn.primary:hover{transform:translateY(-2px)}
.dh-auth-btn.secondary{background:rgba(255,255,255,.04);color:var(--t2);border:1px solid var(--glass-border)}
.dh-auth-btn.secondary:hover{background:rgba(255,255,255,.08);color:var(--text)}
.dh-auth-hint{font-size:.72rem;opacity:.25;margin-top:16px}
@keyframes authModalIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* === LOADING SCREEN === */
#loadingScreen{position:fixed;inset:0;z-index:99999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .5s ease,visibility .5s ease}
#loadingScreen.fade-out{opacity:0;visibility:hidden;pointer-events:none}
.loader-logo{font-size:2.5rem;font-weight:900;letter-spacing:-.04em;margin-bottom:1.5rem;opacity:0;animation:loaderFadeIn .6s ease .1s forwards}
.loader-logo .dot{color:var(--green)}
.loader-bar-wrap{width:160px;height:3px;background:rgba(255,255,255,.06);border-radius:10px;overflow:hidden;opacity:0;animation:loaderFadeIn .6s ease .3s forwards}
.loader-bar{width:0;height:100%;border-radius:10px;animation:loaderProgress 1.2s ease .4s forwards}
.loader-hint{margin-top:1.2rem;font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.2);opacity:0;animation:loaderFadeIn .6s ease .5s forwards}
@keyframes loaderFadeIn{to{opacity:1}}
@keyframes loaderProgress{0%{width:0}60%{width:70%}100%{width:100%}}

/* === FOOTER === */
.dh-footer{text-align:center;padding:3rem 1.5rem;border-top:1px solid var(--glass-border)}
.dh-footer p{font-size:.55rem;text-transform:uppercase;letter-spacing:.35em;color:var(--t3)}

/* === COMMON UTILITIES === */
.hidden{display:none!important}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* === SCROLLBAR === */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:4px}

/* === RESPONSIVE NAV === */
@media(max-width:700px){
    .nav{padding:1rem 1.5rem}
    .nav.scrolled{padding:.8rem 1.5rem}
}