:root{
    --bg:#090909;
    --panel:#0d0d0d;
    --panel-2:#111111;
    --panel-3:#151515;
    --line:#2a2a2a;
    --line-soft:#1d1d1d;
    --text:#e9edf2;
    --muted:#7d8793;
    --accent:#ff7b00;
    --accent-soft:rgba(255,123,0,.14);
    --accent-rgb:255,123,0;
    --good:#59d37a;
    --danger:#ff5252;
    --font:Consolas,"Cascadia Mono","Courier New",monospace;
    --sidebar:286px;
    --moon-logo-global:url("../icons/my-space-moon.png");
    --header-h:62px;
    --tabs-h:42px;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#050505;color:var(--text);font-family:var(--font)}
body{
    min-height:100vh;
    background:
        radial-gradient(circle at 12% 8%,rgba(var(--accent-rgb),.05),transparent 24%),
        #050505;
    overflow:hidden;
}

button,input,textarea{font:inherit}

.app{
    width:100vw;
    height:100vh;
    display:grid;
    grid-template-rows:var(--header-h) var(--tabs-h) 1fr;
    background:var(--bg);
    border-top:2px solid var(--accent);
}

/* =========================================================
   TOP HEADER
========================================================= */

.topbar{
    display:flex;
    align-items:center;
    gap:18px;
    padding:8px 14px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,#0d0d0d,#090909);
    min-width:0;
}

.brand{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:390px;
}

/* USER MOON LOGO — exact source image, instant skin recolor */
.brand-moon{
    --moon-logo:url("../icons/my-space-moon.png");
    position:relative;
    flex:0 0 48px;
    width:48px;
    height:48px;
    border-radius:50%;
    overflow:hidden;
    isolation:isolate;
    filter:drop-shadow(0 0 7px rgba(var(--accent-rgb),.16));
    transform:rotate(24deg);
    transform-origin:center;
    backface-visibility:hidden;
    contain:paint;
}

/* Exact uploaded moon image — loaded once and NEVER swapped on skin change */
.brand-moon::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--moon-logo) center/contain no-repeat;
    transform:translateZ(0);
}

/* Skin color layer.
   Only --accent changes, so the color switch is immediate with no new image request. */
.brand-moon::after{
    content:"";
    position:absolute;
    inset:0;
    background:var(--accent);
    -webkit-mask:var(--moon-logo) center/contain no-repeat;
    mask:var(--moon-logo) center/contain no-repeat;
    clip-path:inset(0 49% 0 0);
    mix-blend-mode:color;
    opacity:.98;
    pointer-events:none;
    transform:translateZ(0);
}

.brand-copy{
    min-width:0;
}

.brand-title{
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--accent);
    white-space:nowrap;
    line-height:.88;
    font-family:"Rajdhani",sans-serif;
    font-weight:700;
    text-transform:uppercase;
}

.brand-slashes{
    font-family:"Rajdhani",sans-serif;
    font-size:24px;
    font-weight:700;
    letter-spacing:-1px;
    line-height:.88;
    transform:skewX(-9deg);
}

.brand-name{
    display:inline-block;
    font-family:"Rajdhani",sans-serif;
    font-size:24px;
    font-weight:700;
    letter-spacing:.8px;
    line-height:.88;
    text-transform:uppercase;
    transform:scaleX(.94);
    transform-origin:left center;
}

.brand-sub{
    margin-top:6px;
    color:var(--muted);
    font-family:"Rajdhani",sans-serif;
    font-size:10px;
    font-weight:600;
    letter-spacing:.72px;
    line-height:1;
    text-transform:uppercase;
    white-space:nowrap;
}

.top-spacer{flex:1}

.quick-status{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.current-path{
    height:32px;
    min-width:240px;
    max-width:480px;
    padding:0 12px;
    display:flex;
    align-items:center;
    border:1px solid var(--line);
    background:#0b0b0b;
    color:#aeb7c1;
    font-size:11px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.status-pill{
    height:32px;
    padding:0 12px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    background:#0b0b0b;
    color:#c7cdd3;
    font-size:11px;
}

/* APP SKIN SWITCH — no tray / no gray strip */
.skin-strip{
    height:34px;
    padding:0;
    display:flex;
    align-items:center;
    gap:5px;
    border:0;
    background:transparent;
    box-shadow:none;
}

.skin-dot{
    width:20px;
    height:20px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:3px;
    cursor:pointer;
    position:relative;
    box-shadow:0 0 0 1px rgba(0,0,0,.75);
}
.skin-dot:hover{transform:translateY(-1px)}
.skin-dot.active::after{
    content:"";
    position:absolute;
    inset:3px;
    border:1px solid #fff;
    border-radius:2px;
}
.skin-dot[data-skin="orange"]{background:#ff7b00}
.skin-dot[data-skin="blue"]{background:#00bfe6}
.skin-dot[data-skin="green"]{background:#52c879}
.skin-dot[data-skin="red"]{background:#ff4f5e}
.skin-dot[data-skin="yellow"]{background:#FFD700}
.skin-dot[data-skin="purple"]{background:#a84dff}
.skin-dot[data-skin="white"]{background:#ffffff}
.skin-dot[data-skin="gray"]{background:#9aa0a6}


/* =========================================================
   HEADER TABS
========================================================= */

.tabsbar{
    display:flex;
    align-items:stretch;
    gap:1px;
    padding:0 14px;
    border-bottom:1px solid var(--line);
    background:#0b0b0b;
    overflow-x:auto;
    scrollbar-width:thin;
}

.tab{
    min-width:126px;
    border:0;
    border-left:1px solid var(--line-soft);
    border-right:1px solid var(--line-soft);
    background:#0d0d0d;
    color:#b8c0c8;
    cursor:pointer;
    font-weight:700;
    font-size:12px;
    letter-spacing:.65px;
    transition:background .12s ease,color .12s ease;
}
.tab:hover{
    color:#fff;
    background:#141414;
}
.tab.active{
    color:var(--accent);
    background:var(--accent-soft);
    box-shadow:inset 0 -2px 0 var(--accent);
}

.tab-tools{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:6px;
    padding-left:10px;
}
.mini-btn{
    height:28px;
    padding:0 10px;
    border:1px solid var(--line);
    background:#111;
    color:#aeb7c1;
    cursor:pointer;
    font-size:10px;
}
.mini-btn:hover{border-color:var(--accent);color:#fff}

/* =========================================================
   WORKSPACE
========================================================= */

.workspace{
    display:grid;
    grid-template-columns:var(--sidebar) 1fr;
    min-height:0;
}

.sidebar{
    min-width:0;
    background:#0a0a0a;
    border-right:1px solid var(--line);
    display:flex;
    flex-direction:column;
}

.sidebar-head{
    padding:10px;
    border-bottom:1px solid var(--line);
}
.sidebar-search{
    width:100%;
    height:34px;
    padding:0 10px;
    border:1px solid #343434;
    background:#0e0e0e;
    color:#e6e6e6;
    outline:none;
}
.sidebar-search:focus{border-color:var(--accent)}
.sidebar-search::placeholder{color:#666}

.sidebar-meta{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:8px;
    color:#6f7882;
    font-size:10px;
}
.sidebar-list{
    padding:8px;
    overflow:auto;
    min-height:0;
    scrollbar-width:thin;
}

.group-title{
    margin:8px 4px 6px;
    color:var(--accent);
    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
}

.tool-item{
    width:100%;
    display:flex;
    align-items:center;
    gap:9px;
    min-height:38px;
    margin:3px 0;
    padding:7px 9px;
    border:1px solid #252525;
    border-radius:4px;
    background:#101010;
    color:#c5cbd1;
    text-align:left;
    cursor:pointer;
}
.tool-item:hover{
    border-color:#3c3c3c;
    background:#141414;
    color:#fff;
}
.tool-item.active{
    border-color:rgba(var(--accent-rgb),.7);
    background:var(--accent-soft);
    color:#fff;
    box-shadow:inset 3px 0 0 var(--accent);
}
.tool-num{
    color:var(--accent);
    font-size:10px;
    min-width:22px;
}
.tool-label{
    flex:1;
    font-size:11px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.tool-pin{
    color:#555;
    font-size:11px;
}

.stage{
    min-width:0;
    min-height:0;
    display:grid;
    grid-template-rows:46px 1fr 28px;
    background:#0c0c0c;
}

.stage-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding:7px 10px;
    border-bottom:1px solid var(--line);
}

.stage-title{
    flex:1;
    height:32px;
    display:flex;
    align-items:center;
    padding:0 12px;
    border:1px solid #343434;
    border-radius:4px;
    background:#0b0b0b;
    color:#dfe4e8;
    font-weight:700;
    font-size:12px;
}

.stage-path{
    height:32px;
    max-width:42%;
    display:flex;
    align-items:center;
    padding:0 12px;
    border:1px solid #343434;
    border-radius:4px;
    background:#0b0b0b;
    color:#8d97a1;
    font-size:10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.stage-body{
    min-height:0;
    padding:10px;
    overflow:auto;
    scrollbar-width:thin;
}

.screen{
    min-height:100%;
    border:1px solid #343434;
    border-left:2px solid var(--accent);
    border-radius:5px;
    background:
        linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px),
        #0a0a0a;
    background-size:22px 22px;
    overflow:hidden;
}

.stage-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 10px;
    border-top:1px solid var(--line);
    color:#68717b;
    font-size:9px;
}

.kbd{
    border:1px solid #343434;
    border-radius:2px;
    padding:1px 4px;
    color:#9aa3ac;
    background:#0b0b0b;
}

/* =========================================================
   HOME / PLACEHOLDER PANELS
========================================================= */

.home-screen{
    padding:22px;
}

.hero{
    display:grid;
    grid-template-columns:1fr auto;
    gap:20px;
    align-items:end;
    padding:18px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(90deg,var(--accent-soft),transparent 58%);
}

.hero h1{
    margin:0;
    color:#fff;
    font-size:24px;
    letter-spacing:1px;
}
.hero h1 span{color:var(--accent)}
.hero p{
    max-width:850px;
    margin:8px 0 0;
    color:#8e98a2;
    font-size:11px;
    line-height:1.7;
}
.version{
    color:var(--accent);
    font-size:11px;
    border:1px solid rgba(var(--accent-rgb),.45);
    background:rgba(var(--accent-rgb),.07);
    padding:7px 10px;
}

.grid-cards{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    padding:14px;
}
.info-card{
    min-height:116px;
    padding:13px;
    border:1px solid #292929;
    background:#0f0f0f;
}
.info-card strong{
    display:block;
    color:var(--accent);
    font-size:11px;
    margin-bottom:9px;
}
.info-card span{
    color:#808a94;
    font-size:10px;
    line-height:1.6;
}

.placeholder{
    min-height:100%;
    display:grid;
    place-items:center;
    padding:28px;
}
.placeholder-box{
    width:min(760px,92%);
    border:1px solid #2d2d2d;
    border-top:2px solid var(--accent);
    background:#0d0d0d;
    padding:22px;
}
.placeholder-eyebrow{
    color:var(--accent);
    font-size:10px;
    letter-spacing:1px;
    margin-bottom:8px;
}
.placeholder h2{
    margin:0 0 8px;
    font-size:20px;
    color:#f0f3f6;
}
.placeholder p{
    margin:0;
    color:#818b95;
    font-size:11px;
    line-height:1.7;
}
.placeholder .module-id{
    margin-top:14px;
    color:#606a74;
    font-size:9px;
}

/* =========================================================
   NOTES MODULE — FUNCTIONAL IN v0.0.1
========================================================= */

.notes-shell{
    height:100%;
    min-height:520px;
    display:grid;
    grid-template-rows:44px 1fr;
}
.notes-toolbar{
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px;
    border-bottom:1px solid var(--line);
    background:#101010;
}
.notes-toolbar button{
    height:30px;
    padding:0 10px;
    border:1px solid #333;
    background:#141414;
    color:#d4dae0;
    cursor:pointer;
    font-size:10px;
}
.notes-toolbar button.primary{
    background:var(--accent);
    border-color:var(--accent);
    color:#080808;
    font-weight:800;
}
.notes-toolbar button:hover{filter:brightness(1.08)}

.notes-editor{
    display:grid;
    grid-template-rows:40px 1fr;
    padding:10px;
    min-height:0;
}
.note-title{
    width:100%;
    border:1px solid #343434;
    background:#0b0b0b;
    color:#e8edf2;
    padding:0 12px;
    outline:none;
}
.note-title:focus{border-color:var(--accent)}

.note-body{
    width:100%;
    height:100%;
    resize:none;
    margin-top:8px;
    border:1px solid #343434;
    border-left:2px solid var(--accent);
    background:#090909;
    color:#cfd6dd;
    padding:14px;
    outline:none;
    line-height:1.65;
    font-size:12px;
}
.note-body:focus{border-color:rgba(var(--accent-rgb),.65)}
.note-body::placeholder{color:#5f6871}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1050px){
    :root{--sidebar:236px}
    .brand{min-width:280px}
    .brand-sub{display:none}
    .current-path{display:none}
    .grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){
    body{overflow:auto}
    .app{
        min-height:100vh;
        height:auto;
        grid-template-rows:auto auto 1fr;
    }
    .topbar{flex-wrap:wrap}
    .brand{min-width:0;flex:1}
    .quick-status{width:100%}
    .skin-strip{margin-left:auto}
    .workspace{grid-template-columns:1fr}
    .sidebar{
        border-right:0;
        border-bottom:1px solid var(--line);
        max-height:270px;
    }
    .stage{min-height:720px}
    .grid-cards{grid-template-columns:1fr}
    .stage-path{display:none}
    .tab{min-width:112px}
}

/* =========================================================
   BOOKMARK BUTTON — integration hook, no browser hack here
========================================================= */
.brand-bookmark{
    height:15px;
    margin-left:6px;
    padding:0 5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:flex-end;
    position:relative;
    top:-4px;
    border:1px solid var(--accent);
    background:var(--accent);
    color:#050505;
    font-family:"Rajdhani",sans-serif;
    cursor:pointer;
    user-select:none;
    white-space:nowrap;
    box-shadow:0 0 8px rgba(var(--accent-rgb),.10);
    overflow:hidden;
}
.brand-bookmark-label{
    display:block;
    position:relative;
    top:1px;
    font-family:"Rajdhani",sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:.05px;
    line-height:1;
    text-transform:uppercase;
}