/* ══════════════════ Root ══════════════════ */
:root{
  --bg:#1e1e1e;
  --win:#F4F4F4;

  --overlay:rgba(0,0,0,.25);

  --border:#888;
  --border-dark:#000;

  --accent:#4a90e2;

  --link:#0b63d1;
  --link-hover:#666;

  --win-bg: url("../../assets/img/misc/window/bg.png");
}

:root.dark{
  --bg:#F4F4F4;
  --win:#1e1e1e;

  --overlay:rgba(0, 0, 0, 0.25);

  --border:#888;
  --border-dark:#000;

  --accent:#4a90e2;

  --link:#0b63d1;
  --link-hover:#666;

  --win-bg: url("../../assets/img/misc/window/bg-dark.png");
}

/* ══════════════════ Cursor ══════════════════ */
button,
[data-menu],
a{
  cursor:crosshair;
}

/* ══════════════════ Overlay ══════════════════ */
.overlay{
  position:fixed;
  inset:0;

  display:flex;
  justify-content:center;
  align-items:center;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  background:var(--overlay);
  backdrop-filter:blur(8px);

  transition:
    opacity .15s ease,
    visibility .15s ease;
}

.overlay.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* ══════════════════ Window ══════════════════ */
.window{
  width:980px;
  height:620px;

  display:flex;
  flex-direction:column;

  background:var(--win);

  border-top:1px solid #969696;
  border-left:1px solid #969696;
  border-right:1px solid rgba(0,0,0,.7);
  border-bottom:1px solid rgba(0,0,0,.7);

  box-shadow:0 20px 50px rgba(0,0,0,.45);

  transform:scale(.97);
  opacity:0;
  transition:.15s ease;

  overflow:hidden;

  font-size: 14px;
}

.window.small{
  width:680px;
  height:470px;
}

.window.welcome{
  width:880px;
  height:550px;
}
.overlay.active .window{
  transform:scale(1);
  opacity:1;
}

/* ══════════════════ Titlebar ══════════════════ */
.titlebar{
  height:42px;

  background:#000;
  color:#fff;

  display:flex;
  justify-content:space-between;
  align-items:center;
}

.title:before {
    content: ">";
    margin-right: 6px;
}


.title{
  padding-left:15px;
  font-size:14px;
}

/* ══════════════════ Window Controls ══════════════════ */
.controls{
  display:flex;
  gap:6px;
  padding-right:8px;
}

.control{
  width:28px;
  height:28px;

  border:1px solid rgba(255,255,255,.4);
  background:#111;
  color:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:crosshair;
}

.control:hover{
  background:#222;
}

.close:hover{
  background:#a00000;
}

/* ══════════════════ Body ══════════════════ */
.body{
  flex:1;
  position:relative;
  overflow:hidden;
  margin:0;
}

/* ══════════════════ Content Area ══════════════════ */
.content{
  position:relative;
  z-index:2;

  height:100%;
  overflow:auto;

  padding:26px 26px 40px;
  box-sizing:border-box;

  min-height:0;
  line-height:1.3;
}

/* ══════════════════ Side BG ══════════════════ */
.preview{
  position:absolute;
  top:0;
  right:0;

  width:380px;
  height:100%;

  background-image: var(--win-bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  z-index:1;
}

/* ══════════════════ Welcome ══════════════════ */
.welcome-body {
  display: flex;
  min-height: 458px;
}

.welcome-sidebar {
  width: 160px;
  background-image: url("../img/pages/extra/bgExtra.png");
  background-repeat: no-repeat;
  color: white;
  padding: 20px 12px;
  font-weight: bold;

  font-size: 22px;
  line-height: 1.2;
}

.welcome-content {
  flex: 1;
  padding: 24px;
  background-image: var(--win-bg);
}

.welcome-footer {
  border-top: 1px solid #808080;
  padding: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.button {
  min-width: 75px;
  padding: 4px 10px;
  background: #E9E9E9;
  border: 2px solid #fff;
  border-right-color: var(--border);
  border-bottom-color: var(--border-dark);
  font-family: inherit;
  font-size: 15px;
  cursor: crosshair;
}

.button:active {
  border: 2px solid #404040;
  border-right-color: #fff;
  border-bottom-color: #fff;
}

.button:hover {
  background: #d8d8d8;
}



/* ══════════════════ LOADING ══════════════════ */

.loading-overlay{
  position:fixed;
  inset:0;

  display:flex;
  justify-content:center;
  align-items:center;

  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(8px);

  z-index:2147483647;
  isolation:isolate;

  opacity:1;
  visibility:visible;

  transition:opacity .4s ease, visibility 0s linear .4s;

  pointer-events:all;
}

.loading-overlay.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.loading-menu{
  width:500px;
  height:180px;

  display:flex;
  flex-direction:column;

  background:var(--win);

  border-top:1px solid #969696;
  border-left:1px solid #969696;
  border-right:1px solid rgba(0,0,0,.7);
  border-bottom:1px solid rgba(0,0,0,.7);

  box-shadow:0 20px 50px rgba(0,0,0,.45);

  transform:scale(.97);

  font-size:14px;

  opacity:1;
  transition:transform .4s ease, opacity .4s ease;
}

.loading-overlay.hidden .loading-menu{
  opacity:0;
  transform:translateY(10px) scale(.97);
}