*{
  box-sizing:border-box;
}

:root{
  --bg:#06080a;

  --surface:#0c0f12;
  --surface-2:#101419;
  --surface-3:#14191f;

  --panel:rgba(12,15,18,.72);

  --line:rgba(255,255,255,.065);
  --line-strong:rgba(255,255,255,.105);

  --text:#f4f6f7;
  --muted:rgba(244,246,247,.42);
  --muted-2:rgba(244,246,247,.22);

  --accent:#57f0c6;

  --radius:18px;
}


/* =========================================================
   BASE
   ========================================================= */

html,
body{
  width:100%;
  min-height:100%;
  margin:0;
}


body{
  min-height:100svh;

  color:var(--text);

  background:var(--bg);

  font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  overflow-x:hidden;
}


button,
input,
textarea,
select{
  font:inherit;
}


button{
  -webkit-tap-highlight-color:transparent;
}


.svg-sprite{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}


svg{
  width:1em;
  height:1em;

  display:block;

  fill:none;

  stroke:currentColor;
  stroke-width:1.7;

  stroke-linecap:round;
  stroke-linejoin:round;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.admin-bg{
  position:fixed;
  inset:0;

  z-index:-10;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(255,255,255,.055),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #0a0c0f,
      #050709 65%,
      #040607
    );
}


.admin-bg::after{
  content:"";

  position:absolute;
  inset:0;

  opacity:.34;

  background-image:
    linear-gradient(
      rgba(255,255,255,.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.012) 1px,
      transparent 1px
    );

  background-size:
    56px 56px;

  mask-image:
    radial-gradient(
      circle at 50% 40%,
      black,
      transparent 78%
    );
}


.admin-glow{
  position:absolute;

  border-radius:50%;

  filter:blur(130px);

  pointer-events:none;
}


.g1{
  width:480px;
  height:480px;

  left:4%;
  top:8%;

  opacity:.09;

  background:#b8b8b8;
}


.g2{
  width:440px;
  height:440px;

  right:-100px;
  bottom:-100px;

  opacity:.055;

  background:var(--accent);
}


.g3{
  width:280px;
  height:280px;

  left:48%;
  top:52%;

  opacity:.035;

  background:#fff;
}


/* =========================================================
   SHELL
   ========================================================= */

.admin-shell{
  width:
    min(
      1420px,
      calc(100% - 34px)
    );

  margin:0 auto;

  padding:
    28px 0
    38px;
}


/* =========================================================
   ACCESS
   ========================================================= */

.access-view{
  min-height:
    calc(100svh - 66px);

  display:grid;
  place-items:center;

  text-align:center;
}


.access-content{
  width:min(430px,100%);

  padding:22px;

  animation:
    accessIn .6s
    cubic-bezier(.2,.8,.2,1)
    both;
}


.access-icon{
  width:58px;
  height:58px;

  margin:
    0 auto
    20px;

  display:grid;
  place-items:center;

  color:
    rgba(255,255,255,.72);

  position:relative;
}


.access-icon::after{
  content:"";

  position:absolute;

  width:36px;
  height:36px;

  border-radius:50%;

  background:
    rgba(255,255,255,.06);

  filter:blur(16px);

  z-index:-1;
}


.access-icon svg{
  width:42px;
  height:42px;

  stroke-width:1.35;
}


.denied-icon{
  color:
    rgba(255,105,105,.75);
}


.access-label{
  margin-bottom:10px;

  color:
    rgba(255,255,255,.24);

  font-size:8px;
  font-weight:700;

  letter-spacing:.28em;
}


.denied-label{
  color:
    rgba(255,105,105,.56);
}


.access-content h1{
  margin:0;

  font-size:
    clamp(
      28px,
      6vw,
      40px
    );

  letter-spacing:-.05em;
}


.access-content p{
  max-width:330px;

  margin:
    13px auto
    27px;

  color:
    rgba(255,255,255,.37);

  font-size:10px;

  line-height:1.7;
}


.access-button{
  min-height:44px;

  padding:0 18px;

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

  gap:8px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:12px;

  background:
    rgba(255,255,255,.94);

  color:#080a0b;

  text-decoration:none;

  font-size:10px;
  font-weight:700;

  box-shadow:
    0 12px 34px
    rgba(0,0,0,.22);

  transition:
    transform .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}


.access-button svg{
  width:15px;
  height:15px;
}


.access-button:hover{
  transform:
    translateY(-2px);

  background:#fff;

  box-shadow:
    0 16px 40px
    rgba(0,0,0,.28);
}


.access-back{
  width:fit-content;

  margin:
    17px auto 0;

  display:block;

  color:
    rgba(255,255,255,.25);

  font-size:9px;

  text-decoration:none;

  transition:
    color .18s ease;
}


.access-back:hover{
  color:
    rgba(255,255,255,.65);
}


@keyframes accessIn{
  from{
    opacity:0;

    transform:
      translateY(12px)
      scale(.985);
  }

  to{
    opacity:1;

    transform:none;
  }
}


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

.admin-header{
  min-height:94px;

  padding:
    0 4px;

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:30px;
}


.tiny-label{
  margin-bottom:10px;

  display:flex;
  align-items:center;

  gap:7px;

  color:
    rgba(255,255,255,.24);

  font-size:8px;
  font-weight:700;

  letter-spacing:.20em;
}


.tiny-dot{
  width:5px;
  height:5px;

  border-radius:50%;

  background:var(--accent);

  box-shadow:
    0 0 10px
    color-mix(
      in srgb,
      var(--accent) 60%,
      transparent
    );
}


.heading-row{
  display:flex;
  align-items:center;

  gap:13px;
}


.heading-icon{
  width:43px;
  height:43px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border:
    1px solid
    rgba(255,255,255,.065);

  border-radius:12px;

  background:
    rgba(255,255,255,.027);

  color:
    rgba(255,255,255,.62);
}


.heading-icon svg{
  width:19px;
  height:19px;
}


.admin-heading h1{
  margin:0;

  font-size:32px;

  letter-spacing:-.05em;
}


.admin-heading p{
  margin:
    6px 0 0;

  color:var(--muted);

  font-size:10px;
}


.header-actions{
  display:flex;
  align-items:center;

  justify-content:flex-end;

  flex-wrap:wrap;

  gap:7px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.primary-btn,
.secondary-btn{
  min-height:39px;

  padding:
    0 14px;

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

  gap:7px;

  border-radius:10px;

  text-decoration:none;

  cursor:pointer;

  font-size:10px;

  transition:
    transform .18s ease,
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}


.primary-btn svg,
.secondary-btn svg{
  width:14px;
  height:14px;
}


.primary-btn{
  border:
    1px solid
    rgba(255,255,255,.10);

  background:
    rgba(255,255,255,.94);

  color:#080a0b;

  font-weight:700;

  box-shadow:
    0 8px 22px
    rgba(0,0,0,.15);
}


.primary-btn:hover{
  transform:
    translateY(-1px);

  background:#fff;

  box-shadow:
    0 10px 28px
    rgba(0,0,0,.20);
}


.secondary-btn{
  border:
    1px solid
    rgba(255,255,255,.06);

  background:
    rgba(255,255,255,.026);

  color:
    rgba(255,255,255,.52);
}


.secondary-btn:hover{
  color:#fff;

  background:
    rgba(255,255,255,.06);

  border-color:
    rgba(255,255,255,.11);
}


/* =========================================================
   STATUS
   ========================================================= */

.status-line{
  height:32px;

  display:flex;
  align-items:center;

  justify-content:space-between;

  padding:0 4px;
}


.save-status{
  min-height:20px;

  display:flex;
  align-items:center;

  color:var(--muted);

  font-size:9px;
}


.save-status.ok{
  color:var(--accent);
}


.save-status.bad{
  color:#ff7373;
}


.config-online{
  display:flex;
  align-items:center;

  gap:6px;

  color:
    rgba(255,255,255,.22);

  font-size:8px;
}


.config-online-dot{
  width:5px;
  height:5px;

  border-radius:50%;

  background:var(--accent);

  box-shadow:
    0 0 8px
    color-mix(
      in srgb,
      var(--accent) 55%,
      transparent
    );
}


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

.workspace{
  height:
    min(
      760px,
      calc(100svh - 155px)
    );

  min-height:600px;

  display:grid;

  grid-template-columns:
    225px
    minmax(0,1fr)
    330px;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      rgba(13,16,19,.78),
      rgba(6,8,10,.62)
    );

  box-shadow:
    0 30px 80px
    rgba(0,0,0,.25),
    inset 0 1px 0
    rgba(255,255,255,.018);

  backdrop-filter:
    blur(24px);

  -webkit-backdrop-filter:
    blur(24px);
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar{
  padding:
    17px 12px
    13px;

  display:flex;
  flex-direction:column;

  border-right:
    1px solid
    rgba(255,255,255,.05);

  background:
    rgba(5,7,9,.28);
}


.sidebar-head{
  min-height:54px;

  padding:
    5px 8px
    15px;

  display:flex;
  align-items:center;

  gap:10px;

  border-bottom:
    1px solid
    rgba(255,255,255,.04);

  margin-bottom:12px;
}


.sidebar-logo{
  width:35px;
  height:35px;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius:10px;

  background:
    rgba(255,255,255,.025);

  color:var(--accent);
}


.sidebar-logo svg{
  width:16px;
  height:16px;
}


.sidebar-head strong{
  display:block;

  color:
    rgba(255,255,255,.78);

  font-size:10px;
}


.sidebar-head span{
  display:block;

  margin-top:3px;

  color:
    rgba(255,255,255,.22);

  font-size:8px;
}


.sidebar-nav{
  display:grid;

  gap:4px;
}


.nav-item{
  width:100%;

  min-height:52px;

  padding:
    7px 8px;

  display:flex;
  align-items:center;

  gap:9px;

  border:
    1px solid transparent;

  border-radius:11px;

  background:transparent;

  color:
    rgba(255,255,255,.36);

  text-align:left;

  cursor:pointer;

  position:relative;

  transition:
    background .17s ease,
    border-color .17s ease,
    color .17s ease,
    transform .17s ease;
}


.nav-item::before{
  content:"";

  position:absolute;

  left:-12px;
  top:13px;

  width:2px;
  height:26px;

  border-radius:
    0 3px 3px 0;

  background:var(--accent);

  opacity:0;

  transform:
    scaleY(.4);

  transition:
    opacity .18s ease,
    transform .18s ease;
}


.nav-item:hover{
  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.72);
}


.nav-item.active{
  color:#fff;

  background:
    linear-gradient(
      90deg,
      color-mix(
        in srgb,
        var(--accent) 7%,
        rgba(255,255,255,.028)
      ),
      rgba(255,255,255,.025)
    );

  border-color:
    rgba(255,255,255,.055);
}


.nav-item.active::before{
  opacity:1;

  transform:
    scaleY(1);
}


.nav-icon{
  width:33px;
  height:33px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border:
    1px solid
    rgba(255,255,255,.045);

  border-radius:9px;

  background:
    rgba(255,255,255,.018);

  color:
    rgba(255,255,255,.35);
}


.nav-item.active .nav-icon{
  color:var(--accent);

  border-color:
    color-mix(
      in srgb,
      var(--accent) 17%,
      rgba(255,255,255,.045)
    );

  background:
    color-mix(
      in srgb,
      var(--accent) 7%,
      rgba(255,255,255,.018)
    );
}


.nav-icon svg{
  width:15px;
  height:15px;
}


.nav-copy{
  min-width:0;

  display:grid;

  gap:3px;
}


.nav-copy strong{
  font-size:9px;

  font-weight:600;
}


.nav-copy small{
  color:
    rgba(255,255,255,.19);

  font-size:7px;

  font-weight:400;
}


.sidebar-bottom{
  margin-top:auto;
}


.config-source{
  min-height:52px;

  padding:
    8px;

  display:grid;

  grid-template-columns:
    31px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:8px;

  border:
    1px solid
    rgba(255,255,255,.04);

  border-radius:11px;

  background:
    rgba(255,255,255,.013);
}


.config-source-icon{
  width:31px;
  height:31px;

  display:grid;
  place-items:center;

  border-radius:8px;

  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.32);
}


.config-source-icon svg{
  width:14px;
  height:14px;
}


.config-source strong{
  display:block;

  color:
    rgba(255,255,255,.54);

  font-size:8px;
}


.config-source span:not(.source-dot){
  display:block;

  margin-top:2px;

  color:
    rgba(255,255,255,.18);

  font-size:7px;
}


.source-dot{
  width:6px;
  height:6px;

  border-radius:50%;

  background:var(--accent);

  box-shadow:
    0 0 9px
    color-mix(
      in srgb,
      var(--accent) 60%,
      transparent
    );
}


/* =========================================================
   EDITOR
   ========================================================= */

.editor-area{
  height:100%;

  min-width:0;

  display:grid;

  grid-template-rows:
    minmax(0,1fr)
    auto;

  overflow:hidden;
}


.tab-panel{
  display:none;

  height:100%;

  padding:
    28px 30px;

  overflow:auto;

  scrollbar-width:thin;

  scrollbar-color:
    rgba(255,255,255,.09)
    transparent;
}


.tab-panel::-webkit-scrollbar{
  width:5px;
}


.tab-panel::-webkit-scrollbar-thumb{
  background:
    rgba(255,255,255,.08);

  border-radius:999px;
}


.tab-panel.active{
  display:block;

  animation:
    panelIn .25s
    cubic-bezier(.2,.8,.2,1)
    both;
}


@keyframes panelIn{
  from{
    opacity:0;

    transform:
      translateY(6px);
  }

  to{
    opacity:1;

    transform:none;
  }
}


/* =========================================================
   PANEL HEAD
   ========================================================= */

.panel-head{
  display:flex;

  align-items:center;

  gap:13px;

  margin-bottom:23px;
}


.panel-head-icon{
  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  border:
    1px solid
    rgba(255,255,255,.055);

  border-radius:12px;

  background:
    rgba(255,255,255,.02);

  color:var(--accent);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.015);
}


.panel-head-icon svg{
  width:19px;
  height:19px;
}


.panel-index{
  margin-bottom:5px;

  color:
    rgba(255,255,255,.18);

  font-size:7px;
  font-weight:700;

  letter-spacing:.20em;
}


.panel-head h2{
  margin:0;

  font-size:21px;

  letter-spacing:-.04em;
}


.panel-head p{
  margin:
    5px 0 0;

  color:var(--muted);

  font-size:9px;

  line-height:1.55;
}


/* =========================================================
   SETTINGS GROUP
   ========================================================= */

.settings-group{
  padding:17px;

  margin-bottom:12px;

  border:
    1px solid
    rgba(255,255,255,.045);

  border-radius:14px;

  background:
    linear-gradient(
      150deg,
      rgba(255,255,255,.018),
      rgba(255,255,255,.006)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.012);
}


.settings-group-head{
  margin-bottom:14px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:15px;
}


.settings-group-head strong{
  color:
    rgba(255,255,255,.67);

  font-size:9px;
}


.settings-group-head span{
  color:
    rgba(255,255,255,.18);

  font-size:7px;
}


/* =========================================================
   FIELDS
   ========================================================= */

.fields{
  display:grid;

  gap:12px;
}


.fields.two{
  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );
}


.fields .full{
  grid-column:1/-1;
}


.field{
  display:grid;

  gap:7px;
}


.field-name{
  color:
    rgba(255,255,255,.37);

  font-size:8px;

  font-weight:600;
}


input[type="text"],
input[type="url"],
input[type="number"],
textarea,
select{
  width:100%;

  min-height:41px;

  padding:
    10px 12px;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius:9px;

  outline:0;

  background:
    rgba(0,0,0,.18);

  color:
    rgba(255,255,255,.86);

  font-size:9px;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.01);

  transition:
    background .17s ease,
    border-color .17s ease,
    box-shadow .17s ease;
}


input::placeholder,
textarea::placeholder{
  color:
    rgba(255,255,255,.17);
}


textarea{
  min-height:95px;

  resize:vertical;
}


input:focus,
textarea:focus,
select:focus{
  border-color:
    color-mix(
      in srgb,
      var(--accent) 28%,
      rgba(255,255,255,.055)
    );

  background:
    rgba(0,0,0,.25);

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--accent) 5%,
      transparent
    );
}


select{
  cursor:pointer;
}


/* =========================================================
   INPUT UNIT
   ========================================================= */

.input-unit{
  position:relative;
}


.input-unit input{
  padding-right:46px;
}


.input-unit span{
  position:absolute;

  right:11px;
  top:50%;

  transform:
    translateY(-50%);

  color:
    rgba(255,255,255,.22);

  font-size:7px;
}


/* =========================================================
   COLOR
   ========================================================= */

.color-field{
  min-height:41px;

  padding:
    4px 9px 4px 4px;

  display:flex;
  align-items:center;

  gap:9px;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius:9px;

  background:
    rgba(0,0,0,.18);
}


.color-field input[type="color"]{
  width:33px;
  height:31px;

  padding:0;

  border:0;

  border-radius:7px;

  overflow:hidden;

  background:transparent;

  cursor:pointer;
}


.color-field span{
  color:
    rgba(255,255,255,.22);

  font-size:7px;
}


/* =========================================================
   SWITCH
   ========================================================= */

.switch-row{
  min-height:59px;

  padding:
    10px 12px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:15px;

  border:
    1px solid
    rgba(255,255,255,.045);

  border-radius:11px;

  background:
    rgba(255,255,255,.012);
}


.switch-copy{
  min-width:0;

  display:grid;

  gap:3px;
}


.switch-copy strong{
  color:
    rgba(255,255,255,.62);

  font-size:9px;
}


.switch-copy span{
  color:
    rgba(255,255,255,.20);

  font-size:7px;

  font-weight:400;
}


.switch-row input{
  appearance:none;
  -webkit-appearance:none;

  width:36px;
  height:20px;

  position:relative;

  flex-shrink:0;

  border-radius:999px;

  background:
    rgba(255,255,255,.075);

  cursor:pointer;

  transition:
    background .18s ease,
    box-shadow .18s ease;
}


.switch-row input::after{
  content:"";

  position:absolute;

  left:3px;
  top:3px;

  width:14px;
  height:14px;

  border-radius:50%;

  background:
    rgba(255,255,255,.65);

  transition:
    transform .18s ease,
    background .18s ease;
}


.switch-row input:checked{
  background:
    color-mix(
      in srgb,
      var(--accent) 32%,
      rgba(255,255,255,.06)
    );

  box-shadow:
    0 0 14px
    color-mix(
      in srgb,
      var(--accent) 10%,
      transparent
    );
}


.switch-row input:checked::after{
  transform:
    translateX(16px);

  background:var(--accent);
}


.main-switch{
  margin-bottom:12px;
}


/* =========================================================
   SOCIAL EDITOR
   ========================================================= */

.social-editor{
  display:grid;

  gap:8px;
}


.social-line{
  min-height:56px;

  padding:8px 10px;

  display:grid;

  grid-template-columns:
    90px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:8px;

  border:
    1px solid
    rgba(255,255,255,.04);

  border-radius:10px;

  background:
    rgba(255,255,255,.01);
}


.social-name{
  color:
    rgba(255,255,255,.56);

  font-size:8px;
  font-weight:700;
}


.social-options{
  display:flex;

  align-items:center;

  gap:7px;
}


.social-options label{
  display:flex;

  align-items:center;

  gap:5px;

  color:
    rgba(255,255,255,.28);

  font-size:7px;
}


.social-options input{
  accent-color:var(--accent);
}


/* =========================================================
   RAW CONFIG
   ========================================================= */

.raw-group{
  padding:0;

  overflow:hidden;
}


.code-toolbar{
  min-height:42px;

  padding:
    0 13px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  border-bottom:
    1px solid
    rgba(255,255,255,.04);

  background:
    rgba(0,0,0,.15);

  color:
    rgba(255,255,255,.22);

  font-size:8px;
}


.code-dot{
  width:6px;
  height:6px;

  display:inline-block;

  margin-right:4px;

  border-radius:50%;
}


.code-dot.red{
  background:#ff6868;
}


.code-dot.yellow{
  background:#e4bb57;
}


.code-dot.green{
  background:#55cc80;
}


.raw-config{
  width:100%;

  min-height:430px;

  padding:17px;

  resize:none;

  border:0;

  border-radius:0;

  background:
    rgba(0,0,0,.23);

  color:
    rgba(255,255,255,.62);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:9px;

  line-height:1.7;
}


.raw-config:focus{
  box-shadow:none;

  border:0;
}


.raw-note{
  margin:0;

  padding:
    10px 15px;

  color:
    rgba(255,255,255,.18);

  font-size:7px;

  border-top:
    1px solid
    rgba(255,255,255,.035);
}


/* =========================================================
   FOOTER
   ========================================================= */

.editor-footer{
  min-height:66px;

  padding:
    10px 18px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:15px;

  border-top:
    1px solid
    rgba(255,255,255,.05);

  background:
    rgba(4,6,8,.22);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


.footer-info{
  display:flex;
  align-items:center;

  gap:7px;

  color:
    rgba(255,255,255,.18);

  font-size:7px;
}


.footer-dot{
  width:5px;
  height:5px;

  border-radius:50%;

  background:
    rgba(255,255,255,.22);
}


.footer-actions{
  display:flex;

  gap:7px;
}


/* =========================================================
   PREVIEW
   ========================================================= */

.preview-column{
  min-width:0;

  padding:17px;

  border-left:
    1px solid
    rgba(255,255,255,.05);

  background:
    rgba(4,6,8,.17);
}


.preview-card{
  height:100%;

  display:flex;

  flex-direction:column;
}


.preview-head{
  min-height:46px;

  padding:
    1px 2px
    12px;

  display:flex;

  align-items:center;

  justify-content:space-between;
}


.preview-head strong{
  display:block;

  color:
    rgba(255,255,255,.62);

  font-size:9px;
}


.preview-head span{
  display:block;

  margin-top:2px;

  color:
    rgba(255,255,255,.18);

  font-size:7px;
}


.preview-live{
  display:flex;

  align-items:center;

  gap:6px;

  color:
    rgba(255,255,255,.24);

  font-size:7px;

  letter-spacing:.12em;
}


.live-dot{
  width:5px;
  height:5px;

  border-radius:50%;

  background:var(--accent);

  box-shadow:
    0 0 9px
    color-mix(
      in srgb,
      var(--accent) 55%,
      transparent
    );
}


/* preview content */

.preview-box{
  flex:1;

  min-height:0;

  position:relative;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.045);

  border-radius:15px;

  padding-bottom:24px;

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(255,255,255,.065),
      transparent 35%
    ),
    linear-gradient(
      160deg,
      #151a20,
      #090c0f 62%
    );

  background-size:cover;

  background-position:center;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.015);
}


.p-banner{
  height:92px;

  background:
    center / cover
    no-repeat;

  border-bottom:
    1px solid
    rgba(255,255,255,.04);
}


.p-avatar{
  width:61px;
  height:61px;

  margin:
    -31px auto 0;

  position:relative;

  border:
    2px solid
    rgba(255,255,255,.08);

  border-radius:15px;

  background:
    linear-gradient(
      145deg,
      #484b50,
      #171a1d
    );

  box-shadow:
    0 10px 26px
    rgba(0,0,0,.34);
}


.p-online{
  position:absolute;

  right:-2px;
  bottom:5px;

  width:9px;
  height:9px;

  border:
    2px solid
    #11161a;

  border-radius:50%;

  background:var(--accent);

  box-shadow:
    0 0 9px
    color-mix(
      in srgb,
      var(--accent) 55%,
      transparent
    );
}


.p-name{
  margin-top:9px;

  text-align:center;

  font-size:11px;
  font-weight:700;
}


.p-bio{
  width:76%;

  margin:
    7px auto 0;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  color:
    rgba(255,255,255,.34);

  text-align:center;

  font-size:7px;
}


.p-socials{
  margin-top:15px;

  display:flex;

  justify-content:center;

  gap:7px;
}


.p-socials i{
  width:29px;
  height:29px;

  border:
    1px solid
    rgba(255,255,255,.035);

  border-radius:8px;

  background:
    rgba(255,255,255,.035);
}


.p-player{
  width:84%;

  min-height:60px;

  margin:
    15px auto 0;

  padding:9px;

  display:flex;

  align-items:center;

  gap:9px;

  border:
    1px solid
    rgba(255,255,255,.04);

  border-radius:11px;

  background:
    rgba(0,0,0,.18);

  backdrop-filter:
    blur(12px);
}


.p-player-cover{
  width:37px;
  height:37px;

  flex-shrink:0;

  border-radius:50%;

  background:
    rgba(255,255,255,.075);
}


.p-player-lines{
  flex:1;

  display:grid;

  gap:6px;
}


.p-player-lines span{
  width:66%;
  height:5px;

  border-radius:99px;

  background:
    rgba(255,255,255,.09);
}


.p-player-lines small{
  width:42%;
  height:4px;

  border-radius:99px;

  background:
    rgba(255,255,255,.05);
}


.p-presence{
  width:84%;

  min-height:58px;

  margin:
    9px auto 0;

  padding:9px;

  display:flex;

  align-items:center;

  gap:9px;

  border:
    1px solid
    rgba(255,255,255,.04);

  border-radius:11px;

  background:
    rgba(0,0,0,.15);
}


.p-presence-avatar{
  width:34px;
  height:34px;

  flex-shrink:0;

  border-radius:50%;

  background:
    rgba(255,255,255,.07);
}


.p-presence > div:last-child{
  flex:1;

  display:grid;

  gap:5px;
}


.p-presence span{
  width:48%;
  height:5px;

  border-radius:99px;

  background:
    rgba(255,255,255,.09);
}


.p-presence small{
  width:30%;
  height:4px;

  border-radius:99px;

  background:
    rgba(255,255,255,.045);
}


.preview-footer{
  min-height:38px;

  display:flex;

  align-items:center;

  gap:6px;

  color:
    rgba(255,255,255,.18);

  font-size:7px;
}


.preview-footer svg{
  width:12px;
  height:12px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1100px){

  .workspace{
    grid-template-columns:
      215px
      minmax(0,1fr);
  }


  .preview-column{
    display:none;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:720px){

  .admin-shell{
    width:
      min(
        100% - 16px,
        1420px
      );

    padding:
      17px 0
      24px;
  }


  .admin-header{
    min-height:0;

    align-items:flex-start;

    flex-direction:column;
  }


  .heading-icon{
    width:38px;
    height:38px;
  }


  .admin-heading h1{
    font-size:27px;
  }


  .header-actions{
    width:100%;

    justify-content:flex-start;
  }


  .header-actions > *{
    flex:1;
  }


  .status-line{
    height:28px;
  }


  .config-online{
    display:none;
  }


  .workspace{
    height:auto;

    min-height:0;

    grid-template-columns:1fr;

    overflow:visible;
  }


  /* horizontal tabs */

  .sidebar{
    position:sticky;

    top:0;

    z-index:25;

    padding:8px;

    flex-direction:row;

    overflow-x:auto;

    overscroll-behavior-x:contain;

    border-right:0;

    border-bottom:
      1px solid
      rgba(255,255,255,.05);

    background:
      rgba(7,9,11,.82);

    backdrop-filter:
      blur(22px);

    -webkit-backdrop-filter:
      blur(22px);

    scrollbar-width:none;
  }


  .sidebar::-webkit-scrollbar{
    display:none;
  }


  .sidebar-head,
  .sidebar-bottom{
    display:none;
  }


  .sidebar-nav{
    display:flex;

    gap:5px;
  }


  .nav-item{
    width:auto;

    min-width:max-content;

    min-height:40px;

    padding:
      4px 9px;

    gap:6px;
  }


  .nav-item::before{
    display:none;
  }


  .nav-icon{
    width:29px;
    height:29px;
  }


  .nav-copy small{
    display:none;
  }


  .nav-copy strong{
    font-size:8px;
  }


  .editor-area{
    height:auto;

    overflow:visible;
  }


  .tab-panel{
    min-height:560px;

    height:auto;

    padding:
      20px 14px;

    overflow:visible;
  }


  .panel-head{
    align-items:flex-start;
  }


  .panel-head-icon{
    width:39px;
    height:39px;
  }


  .fields.two{
    grid-template-columns:1fr;
  }


  .fields .full{
    grid-column:auto;
  }


  .settings-group{
    padding:13px;
  }


  .settings-group-head{
    align-items:flex-start;

    flex-direction:column;

    gap:4px;
  }


  .social-line{
    grid-template-columns:1fr;
  }


  .editor-footer{
    position:sticky;

    bottom:0;

    z-index:20;

    padding:
      9px
      max(
        10px,
        env(safe-area-inset-right)
      )
      max(
        9px,
        env(safe-area-inset-bottom)
      )
      max(
        10px,
        env(safe-area-inset-left)
      );

    justify-content:flex-end;

    backdrop-filter:
      blur(22px);

    -webkit-backdrop-filter:
      blur(22px);
  }


  .footer-info{
    display:none;
  }


  .footer-actions{
    width:100%;
  }


  .footer-actions > *{
    flex:1;
  }

}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media(max-width:390px){

  .admin-shell{
    width:
      calc(100% - 12px);
  }


  .admin-header{
    padding:
      0 3px;
  }


  .header-actions{
    display:grid;

    grid-template-columns:
      repeat(3,1fr);
  }


  .header-actions .secondary-btn,
  .header-actions .primary-btn{
    padding:
      0 8px;
  }


  .heading-row{
    gap:9px;
  }


  .admin-heading h1{
    font-size:24px;
  }


  .settings-group{
    border-radius:12px;
  }

}


/* =========================================================
   VIEW VISIBILITY
   ========================================================= */

[hidden]{
  display:none !important;
}


#loginView:not([hidden]),
#deniedView:not([hidden]){
  display:grid;
}


#panelView:not([hidden]){
  display:block;
}


/* =========================================================
   MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;

    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;
  }

}