/* =========================================================
lunode /// INSTALLER MODE
?install=1 = installer only, full app hidden
========================================================= */
html.myspace-install-mode,
html.myspace-install-mode body{
min-width:100%;
min-height:100%;
margin:0!important;
background:#050505!important;
overflow:hidden!important;
}
html.myspace-install-mode #app{
display:none!important;
}
/* =========================================================
INSTALLER ROOT
========================================================= */
#mySpaceInstaller{
--ms-accent:#ff7b00;
--ms-accent-rgb:255,123,0;
position:fixed;
inset:0;
z-index:2147483647;
display:flex;
align-items:center;
justify-content:center;
padding:18px;
background:
radial-gradient(
circle at 50% 18%,
rgba(var(--ms-accent-rgb),.10),
transparent 34%
),
#050505;
font-family:"Rajdhani",Arial,sans-serif;
box-sizing:border-box;
}
#mySpaceInstaller *{
box-sizing:border-box;
}
/* =========================================================
CARD
========================================================= */
.ms-install-card{
position:relative;
width:min(510px,100%);
min-height:520px;
display:flex;
flex-direction:column;
padding:24px 26px 22px;
overflow:hidden;
border:
1px solid
rgba(var(--ms-accent-rgb),.85);
border-radius:10px;
background:
linear-gradient(
145deg,
#070707 0%,
#111 58%,
#070707 100%
);
box-shadow:
0 22px 70px rgba(0,0,0,.72),
0 0 24px rgba(var(--ms-accent-rgb),.14),
inset 0 1px 0 rgba(255,255,255,.08);
}
.ms-install-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:5px;
background:
linear-gradient(
90deg,
var(--ms-accent) 0%,
var(--ms-accent) 42%,
rgba(var(--ms-accent-rgb),.10) 42%,
rgba(var(--ms-accent-rgb),.10) 100%
);
}
/* =========================================================
TOP
========================================================= */
.ms-install-top{
display:flex;
align-items:center;
gap:18px;
margin:4px 0 18px;
}
.ms-install-moon{
flex:0 0 92px;
width:92px;
height:92px;
object-fit:contain;
transform:
rotate(16deg);
filter:
drop-shadow(
0 0 11px
rgba(var(--ms-accent-rgb),.28)
)
drop-shadow(
0 0 4px
rgba(255,255,255,.08)
);
}
.ms-install-brand{
min-width:0;
}
.ms-install-kicker{
margin:0 0 3px;
color:var(--ms-accent);
font-size:12px;
font-weight:600;
line-height:1;
letter-spacing:1.3px;
text-transform:lowercase;
}
.ms-install-title{
margin:0;
color:#fff;
font-size:31px;
font-weight:700;
line-height:1;
letter-spacing:.55px;
text-transform:none;
}
.ms-install-title span{
color:var(--ms-accent);
}
.ms-install-copy{
margin:7px 0 0;
color:#aeb6bf;
font-size:14px;
font-weight:500;
line-height:1.25;
}
/* =========================================================
INSTALL SECTION
========================================================= */
.ms-install-section{
margin-top:4px;
padding:16px 0 7px;
border-top:
1px solid
rgba(255,255,255,.10);
}
.ms-install-section-title{
margin:0 0 11px;
color:#fff;
font-size:13px;
font-weight:700;
line-height:1;
letter-spacing:.85px;
text-transform:lowercase;
}
/* =========================================================
DESKTOP APP ROW
========================================================= */
.ms-install-option{
position:relative;
display:flex;
align-items:center;
gap:11px;
min-height:43px;
margin:0 0 8px;
padding:0 12px;
border:
1px solid
rgba(var(--ms-accent-rgb),.35);
border-radius:5px;
background:
rgba(255,255,255,.025);
color:#dbe0e5;
cursor:default;
user-select:none;
}
.ms-install-option input{
position:absolute;
opacity:0;
pointer-events:none;
}
.ms-install-check{
position:relative;
flex:0 0 18px;
width:18px;
height:18px;
border:
1px solid
rgba(255,255,255,.55);
border-radius:3px;
background:#090909;
}
.ms-install-option
input:checked
+
.ms-install-check{
border-color:
var(--ms-accent);
background:
var(--ms-accent);
}
.ms-install-option
input:checked
+
.ms-install-check::after{
content:"✓";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
color:#050505;
font-family:Arial,sans-serif;
font-size:13px;
font-weight:700;
}
.ms-install-option-copy{
display:flex;
flex-direction:column;
justify-content:center;
}
.ms-install-option-copy strong{
color:#fff;
font-size:13px;
font-weight:700;
line-height:1.1;
letter-spacing:.35px;
text-transform:lowercase;
}
.ms-install-option-copy span{
margin-top:3px;
color:#707982;
font-size:11px;
font-weight:500;
line-height:1.1;
}
/* =========================================================
INSTALL BUTTON
========================================================= */
.ms-install-action{
width:100%;
height:44px;
margin-top:auto;
padding:0 15px;
border:
1px solid #ff9a36;
border-radius:5px;
background:
linear-gradient(
180deg,
#ff9327 0%,
#ff7b00 55%,
#e96700 100%
);
color:#050505;
font-family:"Rajdhani",Arial,sans-serif;
font-size:16px;
font-weight:700;
line-height:1;
letter-spacing:.75px;
text-transform:lowercase;
cursor:pointer;
box-shadow:
0 0 11px rgba(255,123,0,.30),
inset 0 1px 0 rgba(255,255,255,.32);
}
.ms-install-action:hover:not(:disabled){
background:#fff;
}
.ms-install-action:disabled{
cursor:default;
opacity:.45;
}
/* =========================================================
STATUS
========================================================= */
.ms-install-status{
min-height:17px;
margin:9px 0 0;
color:#808891;
font-size:11px;
font-weight:600;
line-height:1.2;
text-align:center;
}
.ms-install-status.is-good{
color:var(--ms-accent);
}
.ms-install-note{
margin:11px 0 0;
color:#555e67;
font-size:10px;
font-weight:500;
line-height:1.25;
text-align:center;
}
/* =========================================================
INSTALLED STATE
========================================================= */
#mySpaceInstaller
.ms-install-action.is-installed,
#mySpaceInstaller
.ms-install-action.is-installed:hover{
opacity:1!important;
border-color:
var(--ms-accent)!important;
background:
var(--ms-accent)!important;
color:#050505!important;
cursor:default!important;
box-shadow:
0 0 16px rgba(var(--ms-accent-rgb),.42),
inset 0 1px 0 rgba(255,255,255,.30)!important;
}

/* =========================================================
MOBILE
========================================================= */
@media (max-width:560px){
#mySpaceInstaller{
padding:10px;
}
.ms-install-card{
min-height:0;
max-height:
calc(100vh - 20px);
padding:
20px 18px 18px;
overflow:auto;
}
.ms-install-moon{
flex-basis:74px;
width:74px;
height:74px;
}
.ms-install-title{
font-size:27px;
}

/* =========================================================
LUNODE /// GLOBAL CONTENT TYPOGRAPHY +1PX
CRVENI / SADRŽAJNI TEKST = +1px
ZELENI / SYSTEM UI = OSTAVLJEN KAKO JESTE
OVO JE OD SADA CENTRALNA FONT KONTROLA ZA APP CONTENT.
========================================================= */
#app{
--lunode-content-font-plus:1px;
}
/* =========================================================
HEADER SUBTITLE
GLAVNI /// lunode SE NE DIRA.
========================================================= */
.brand-sub{
font-size:
calc(10px + var(--lunode-content-font-plus))!important;
}
/* =========================================================
SIDEBAR META + LIST
SEARCH POLJE SE NE DIRA.
========================================================= */
.sidebar-meta{
font-size:
calc(10px + var(--lunode-content-font-plus))!important;
}
.group-title{
font-size:
calc(10px + var(--lunode-content-font-plus))!important;
}
.tool-num{
font-size:
calc(10px + var(--lunode-content-font-plus))!important;
}
.tool-label{
font-size:
calc(11px + var(--lunode-content-font-plus))!important;
}
.tool-pin{
font-size:
calc(11px + var(--lunode-content-font-plus))!important;
}
/* =========================================================
STAGE PATH
MY SPACE HOME TITLE SE NE DIRA.
========================================================= */
.stage-path{
font-size:
calc(10px + var(--lunode-content-font-plus))!important;
}
/* =========================================================
HOME CONTENT
VERSION BADGE SE NAMJERNO NE DIRA.
========================================================= */
#screen .hero h1{
font-size:
calc(24px + var(--lunode-content-font-plus))!important;
}
#screen .hero p{
font-size:
calc(11px + var(--lunode-content-font-plus))!important;
}
#screen .info-card strong{
font-size:
calc(11px + var(--lunode-content-font-plus))!important;
}
#screen .info-card span{
font-size:
calc(10px + var(--lunode-content-font-plus))!important;
}
/* =========================================================
TOOL BUTTONS / TOOL CONTENT
PRIMJENJUJE SE I NA BUDUĆE MODULE KOJE STAVLJAMO U #screen.
========================================================= */
#screen button{
font-size:
calc(10px + var(--lunode-content-font-plus));
}
/* =========================================================
TYPING TEXT
TEKST KOJI KORISNIK UNOSI JE TAKOĐER +1PX.
========================================================= */
#screen .note-body{
font-size:
calc(12px + var(--lunode-content-font-plus))!important;
}
#screen input:not(.sidebar-search),
#screen textarea,
#screen select,
#screen [contenteditable="true"]{
font-size:
calc(12px + var(--lunode-content-font-plus));
}
/* =========================================================
FUTURE STANDARD TEXT
OVE KLASE KORISTIMO ZA SVE NOVE LUNODE MODULE.
========================================================= */
#screen .lunode-text-xs{
font-size:
calc(11px + var(--lunode-content-font-plus));
}
#screen .lunode-text-sm{
font-size:
calc(12px + var(--lunode-content-font-plus));
}
#screen .lunode-text-md{
font-size:
calc(13px + var(--lunode-content-font-plus));
}
#screen .lunode-text-lg{
font-size:
calc(14px + var(--lunode-content-font-plus));
}
/* =========================================================
   HARD PROTECTION — ZELENI ELEMENTI

   OVO NAMJERNO NE MIJENJA NJIHOV TRENUTNI FONT SIZE.
========================================================= */

.brand-name,
.brand-slashes,
.tab,
.mini-btn,
.sidebar-search,
.stage-title,
.current-path,
.status-pill,
.version,
.stage-foot .version{
    /* intentionally untouched */
}

/* =========================================================
   LUNODE /// HEADER SUBTITLE
   +1PX + MALO JAČA DEBLJINA
========================================================= */
.brand-sub{
    font-size:13px!important;
    font-weight:700!important;
}
}
/* =========================================================
LUNODE /// DARK / LIGHT UI SWITCH
========================================================= */
/* ---------------------------------------------------------
PATH BAR — MALO LIJEVO
--------------------------------------------------------- */
.current-path{
position:relative;
left:-12px;
}
/* ---------------------------------------------------------
WHITE / BLACK SWITCHES
--------------------------------------------------------- */
.lunode-ui-mode{
display:flex;
align-items:center;
gap:7px;
margin-right:8px;
}
.lunode-ui-mode-btn{
width:20px;
height:20px;
flex:0 0 20px;
margin:0;
padding:0;
border-radius:50%;
cursor:pointer;
box-sizing:border-box;
}
.lunode-ui-mode-btn.is-light{
background:#f4f4f4;
border:
1px solid
#ffffff;
}
.lunode-ui-mode-btn.is-dark{
background:#050505;
border:
1px solid
#ffffff;
}
/* ACTIVE RING */
.lunode-ui-mode-btn.active{
outline:
1px solid
var(--accent);
outline-offset:2px;
}
/* =========================================================
WHITE SKIN
NAMJERNO NIJE #FFFFFF SVUDA.
BLAGO OFF-WHITE DA NE PEČE OČI.
========================================================= */
html.lunode-light,
html.lunode-light body{
background:#e8e8e8!important;
color:#202326!important;
}
html.lunode-light .app{
background:#ececec!important;
}
/* HEADER */
html.lunode-light .topbar{
background:#f3f3f3!important;
border-color:#c5c5c5!important;
}
html.lunode-light .brand-sub{
color:#59616a!important;
}
/* TABS */
html.lunode-light .tabsbar{
background:#e6e6e6!important;
border-color:#bebebe!important;
}
html.lunode-light .tab{
background:#ededed!important;
color:#262b30!important;
border-color:#c7c7c7!important;
}
html.lunode-light .tab:hover{
background:#e1e1e1!important;
}
html.lunode-light .tab.active{
color:var(--accent)!important;
background:
rgba(var(--accent-rgb),.08)!important;
}
/* RIGHT HEADER CONTROLS */
html.lunode-light .current-path,
html.lunode-light .status-pill,
html.lunode-light .mini-btn{
background:#f8f8f8!important;
color:#252b31!important;
border-color:#bfc3c7!important;
}
/* WORKSPACE */
html.lunode-light .workspace{
background:#ececec!important;
}
html.lunode-light .sidebar{
background:#e6e6e6!important;
border-color:#bebebe!important;
}
html.lunode-light .sidebar-head{
border-color:#c4c4c4!important;
}
html.lunode-light .sidebar-search{
background:#f7f7f7!important;
color:#20252a!important;
border-color:#b8bdc2!important;
}
html.lunode-light .sidebar-search::placeholder{
color:#777f87!important;
}
html.lunode-light .sidebar-meta{
color:#58616a!important;
}
/* SIDEBAR ITEMS */
html.lunode-light .tool-item{
background:#f1f1f1!important;
color:#252a30!important;
border-color:#c5c5c5!important;
}
html.lunode-light .tool-item:hover{
background:#e5e5e5!important;
color:#111!important;
}
html.lunode-light .tool-item.active{
background:
rgba(var(--accent-rgb),.09)!important;
color:#15191d!important;
}
/* STAGE */
html.lunode-light .stage{
background:#e8e8e8!important;
}
html.lunode-light .stage-head{
border-color:#c3c3c3!important;
}
html.lunode-light .stage-title,
html.lunode-light .stage-path{
background:#f7f7f7!important;
border-color:#bfc3c7!important;
color:#24292e!important;
}
html.lunode-light .stage-body{
background:#ececec!important;
}
/* MAIN SCREEN */
html.lunode-light .screen{
border-color:#bebebe!important;
border-left-color:
var(--accent)!important;
background:
linear-gradient(
rgba(0,0,0,.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(0,0,0,.035) 1px,
transparent 1px
),
#f4f4f4!important;
background-size:
22px 22px!important;
}
/* HOME HERO */
html.lunode-light .hero{
border-color:#c5c5c5!important;
background:
linear-gradient(
90deg,
rgba(var(--accent-rgb),.10),
transparent 58%
)!important;
}
html.lunode-light .hero h1{
color:#181b1e!important;
}
html.lunode-light .hero p{
color:#48515a!important;
}
/* INFO CARDS */
html.lunode-light .info-card{
background:#ededed!important;
border-color:#c5c5c5!important;
}
html.lunode-light .info-card span{
color:#4f5962!important;
}
/* PLACEHOLDERS */
html.lunode-light .placeholder-box{
background:#f1f1f1!important;
border-color:#bfc3c7!important;
border-top-color:
var(--accent)!important;
}
html.lunode-light .placeholder h2{
color:#1b2025!important;
}
html.lunode-light .placeholder p{
color:#505a63!important;
}
html.lunode-light .placeholder .module-id{
color:#68727b!important;
}
/* NOTES */
html.lunode-light .notes-toolbar{
background:#e7e7e7!important;
border-color:#bfc3c7!important;
}
html.lunode-light .notes-toolbar button{
background:#f4f4f4!important;
border-color:#b8bec4!important;
color:#20252a!important;
}
html.lunode-light .notes-toolbar button.primary{
background:
var(--accent)!important;
border-color:
var(--accent)!important;
}
html.lunode-light .note-title,
html.lunode-light .note-body{
background:#fafafa!important;
color:#20252a!important;
border-color:#b8bec4!important;
}
html.lunode-light .note-body{
border-left-color:
var(--accent)!important;
}
html.lunode-light .note-body::placeholder,
html.lunode-light .note-title::placeholder{
color:#7c848c!important;
}
/* FOOT */
html.lunode-light .stage-foot{
background:#e8e8e8!important;
border-color:#bfc3c7!important;
color:#5d666f!important;
}
html.lunode-light .kbd{
background:#f5f5f5!important;
border-color:#b9bec3!important;
color:#363d44!important;
}
/* =========================================================
LUNODE /// LIGHT / DARK SWITCH
========================================================= */
.lunode-ui-mode{
display:flex!important;
align-items:center!important;
gap:9px!important;
margin:0 10px!important;
overflow:visible!important;
}
.lunode-ui-mode .lunode-ui-mode-btn{
all:unset!important;
position:relative!important;
display:block!important;
width:18px!important;
height:18px!important;
min-width:18px!important;
min-height:18px!important;
border-radius:50%!important;
box-sizing:border-box!important;
cursor:pointer!important;
opacity:.55!important;
transform:scale(1)!important;
transition:
opacity .15s ease,
transform .15s ease!important;
}
/* BIJELA */
.lunode-ui-mode .lunode-ui-light{
background:#FFEADB!important;
border:1px solid #ffffff!important;
}
/* CRNA */
.lunode-ui-mode .lunode-ui-dark{
background:#050505!important;
border:1px solid #777!important;
}
/* AKTIVNA — BEZ FRAMEA */
.lunode-ui-mode .lunode-ui-mode-btn.is-active{
opacity:1!important;
transform:translateY(-1px) scale(1.08)!important;
}
/* MALA CRTA ISPOD AKTIVNE */
.lunode-ui-mode .lunode-ui-mode-btn.is-active::after{
content:""!important;
position:absolute!important;
left:50%!important;
bottom:-6px!important;
width:8px!important;
height:2px!important;
border-radius:2px!important;
background:var(--accent)!important;
transform:translateX(-50%)!important;
}
/* =========================================================
LUNODE /// CREAM LIGHT SKIN
========================================================= */
html.lunode-cream,
html.lunode-cream body,
html.lunode-cream #app,
html.lunode-cream .app,
html.lunode-cream .workspace,
html.lunode-cream .stage,
html.lunode-cream .stage-body{
background:#FFEADB!important;
}
/* GLAVNE POVRŠINE */
html.lunode-cream .topbar,
html.lunode-cream .tabsbar,
html.lunode-cream .sidebar,
html.lunode-cream .sidebar-head,
html.lunode-cream .stage-head,
html.lunode-cream .stage-foot{
background:#FFEADB!important;
}
/* POLJA / KARTICE */
html.lunode-cream .screen,
html.lunode-cream .current-path,
html.lunode-cream .status-pill,
html.lunode-cream .mini-btn,
html.lunode-cream .sidebar-search,
html.lunode-cream .stage-title,
html.lunode-cream .stage-path,
html.lunode-cream .tool-item,
html.lunode-cream .info-card,
html.lunode-cream .placeholder-box,
html.lunode-cream .notes-toolbar,
html.lunode-cream .note-title,
html.lunode-cream .note-body{
background:#FFEADB!important;
}
/* GRID */
html.lunode-cream .screen{
background:
linear-gradient(
rgba(0,0,0,.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(0,0,0,.035) 1px,
transparent 1px
),
#FFEADB!important;
background-size:22px 22px!important;
}
/* HERO */
html.lunode-cream .hero{
background:
linear-gradient(
90deg,
rgba(var(--accent-rgb),.10),
transparent 58%
),
#FFEADB!important;
}
/* TAMNI TEKST */
html.lunode-cream body,
html.lunode-cream .tab,
html.lunode-cream .tool-item,
html.lunode-cream .tool-label,
html.lunode-cream .sidebar-search,
html.lunode-cream .stage-title,
html.lunode-cream .stage-path,
html.lunode-cream .current-path,
html.lunode-cream .status-pill,
html.lunode-cream .mini-btn,
html.lunode-cream .hero h1,
html.lunode-cream .hero p,
html.lunode-cream .info-card span,
html.lunode-cream .placeholder h2,
html.lunode-cream .placeholder p,
html.lunode-cream .note-title,
html.lunode-cream .note-body,
html.lunode-cream .stage-foot{
color:#171717!important;
}
/* ACCENT OSTAJE ACCENT */
html.lunode-cream .brand-slashes,
html.lunode-cream .group-title,
html.lunode-cream .tool-num,
html.lunode-cream .info-card strong,
html.lunode-cream .version,
html.lunode-cream .tab.active{
color:var(--accent)!important;
}
/* LINIJE */
html.lunode-cream .topbar,
html.lunode-cream .tabsbar,
html.lunode-cream .sidebar,
html.lunode-cream .stage-head,
html.lunode-cream .stage-foot,
html.lunode-cream .screen,
html.lunode-cream .current-path,
html.lunode-cream .status-pill,
html.lunode-cream .mini-btn,
html.lunode-cream .sidebar-search,
html.lunode-cream .stage-title,
html.lunode-cream .stage-path,
html.lunode-cream .tool-item,
html.lunode-cream .info-card{
border-color:#b7a89d!important;
}