/* ==========================================================
   EDGITEK_STUDIO_V1_START
   Dark Creative Workspace · Amber Master Identity
   ========================================================== */

:root{
  --es-amber:#F59E0B;
  --es-amber-deep:#D97706;
  --es-amber-soft:#FEF3C7;

  --es-bg:#080C12;
  --es-sidebar:#0F172A;

  --es-panel:#101722;
  --es-panel-2:#131C29;
  --es-panel-3:#172231;

  --es-line:#263244;
  --es-line-soft:#202B3B;

  --es-text:#F8FAFC;
  --es-muted:#94A3B8;
  --es-muted-2:#64748B;

  --es-green:#12B76A;
  --es-red:#F04438;

  --bg:#080C12 !important;
  --panel:#101722 !important;
  --panel2:#131C29 !important;
  --line:#263244 !important;

  --text:#F8FAFC !important;
  --muted:#94A3B8 !important;

  --accent:#F59E0B !important;
  --ink:#111827 !important;

  --good:#12B76A !important;
  --bad:#F04438 !important;
  --warn:#F59E0B !important;
}


/* GLOBAL ================================================= */

html,
body{
  background:
    var(--es-bg) !important;

  color:
    var(--es-text) !important;
}

body{
  -webkit-font-smoothing:
    antialiased;
}

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


/* LOGIN ================================================== */

.login-shell{
  background:
    radial-gradient(
      circle at 18% 10%,
      rgba(245,158,11,.14),
      transparent 31%
    ),
    radial-gradient(
      circle at 86% 85%,
      rgba(51,65,85,.23),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #070A0F,
      #0C121C
    ) !important;
}

.login-card{
  position:relative;

  overflow:hidden;

  width:min(
    440px,
    100%
  ) !important;

  padding:34px !important;

  background:
    linear-gradient(
      180deg,
      rgba(19,28,41,.98),
      rgba(13,20,30,.98)
    ) !important;

  border:
    1px solid #283548 !important;

  border-radius:
    21px !important;

  box-shadow:
    0 32px 100px rgba(0,0,0,.42) !important;
}

.login-card:before{
  content:"";

  position:absolute;

  width:190px;
  height:190px;

  top:-105px;
  right:-95px;

  border-radius:50%;

  background:
    rgba(245,158,11,.09);

  pointer-events:none;
}

.login-card .brand-mark{
  position:relative;

  z-index:1;
}

.login-card h1{
  position:relative;

  z-index:1;

  margin:
    18px 0 6px !important;

  color:
    #FFFFFF !important;

  font-size:
    29px !important;

  letter-spacing:
    -.045em !important;
}

.login-card p{
  position:relative;

  z-index:1;

  color:
    var(--es-muted) !important;

  line-height:1.6;
}


/* EDGE FOLD ============================================== */

.brand-mark{
  color:
    transparent !important;

  font-size:
    0 !important;

  background:
    #0F172A
    url("/brand/edgitek-icon-192.png")
    center/cover no-repeat !important;

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

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

.brand-mark.small{
  width:
    40px !important;

  height:
    40px !important;

  border-radius:
    11px !important;
}


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

.app-shell{
  grid-template-columns:
    264px minmax(0,1fr) !important;

  background:
    var(--es-bg) !important;
}


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

.sidebar{
  padding:
    18px 13px !important;

  background:
    linear-gradient(
      180deg,
      #0F172A,
      #101827
    ) !important;

  border-right:
    1px solid rgba(255,255,255,.055) !important;
}

.logo-row{
  min-height:
    61px;

  gap:
    11px !important;

  padding:
    3px 7px 18px !important;

  margin-bottom:
    13px;

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

.logo-row strong{
  color:
    #FFFFFF !important;

  font-size:
    14px !important;

  font-weight:
    850;

  letter-spacing:
    -.025em;
}

.logo-row span{
  color:
    #7D8DA4 !important;

  font-size:
    9px !important;

  letter-spacing:
    .035em;
}

.sidebar nav{
  gap:
    3px !important;
}

.sidebar nav:before{
  content:
    "STUDIO";

  display:block;

  margin:
    7px 10px 5px;

  color:
    #64748B;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .15em;
}

.nav{
  position:relative;

  min-height:
    43px;

  display:flex;

  align-items:center;

  gap:
    10px;

  padding:
    9px 11px !important;

  color:
    #AAB7C7 !important;

  background:
    transparent !important;

  border-radius:
    9px !important;

  font-size:
    12px;

  font-weight:
    680;

  transition:
    background .14s ease,
    color .14s ease;
}

.nav:before{
  width:
    25px;

  flex:
    0 0 25px;

  display:grid;

  place-items:center;

  color:
    #718198;

  font-size:
    15px;

  font-weight:
    500;
}

.nav[data-view="create"]:before{
  content:"✦";
}

.nav[data-view="projects"]:before{
  content:"▦";
}

.nav[data-view="brand"]:before{
  content:"◆";
}

.nav[data-view="system"]:before{
  content:"⚙";
}

.nav:hover{
  color:
    #FFFFFF !important;

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

.nav.active{
  color:
    #FFFFFF !important;

  background:
    rgba(245,158,11,.115) !important;

  box-shadow:
    inset 3px 0 0 var(--es-amber);
}

.nav.active:before{
  color:
    var(--es-amber);
}

.nav[data-view="system"]{
  margin-top:
    19px;
}

.nav[data-view="system"]:after{
  content:"SYSTEM";

  position:absolute;

  left:
    10px;

  top:
    -14px;

  color:
    #64748B;

  font-size:
    7px;

  font-weight:
    900;

  letter-spacing:
    .14em;
}


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

.sidebar-foot{
  padding:
    15px 8px 2px !important;

  color:
    #7D8DA4 !important;

  border-top:
    1px solid rgba(255,255,255,.075) !important;

  font-size:
    11px !important;
}

#userLabel{
  display:flex;

  align-items:center;

  gap:
    7px;

  color:
    #CBD5E1;
}

#userLabel:before{
  content:"";

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--es-green);

  box-shadow:
    0 0 0 4px rgba(18,183,106,.09);
}

.text-btn{
  color:
    #94A3B8 !important;

  font-size:
    10px;

  font-weight:
    750;
}

.text-btn:hover{
  color:
    #FFFFFF !important;
}


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

.app-shell main{
  max-width:
    1540px !important;

  padding:
    35px 38px 80px !important;
}


/* PAGE HEAD ============================================= */

.page-head{
  margin-bottom:
    23px !important;
}

.page-head h1{
  margin:
    3px 0 7px !important;

  color:
    #FFFFFF !important;

  font-size:
    31px !important;

  font-weight:
    850;

  letter-spacing:
    -.045em !important;
}

.page-head > div > p:last-child{
  color:
    var(--es-muted) !important;

  font-size:
    12px;

  line-height:
    1.65;
}

.eyebrow{
  color:
    #D99A28 !important;

  font-size:
    9px !important;

  font-weight:
    900 !important;

  letter-spacing:
    .14em !important;
}

.status-pill{
  color:
    #D6A64E !important;

  background:
    rgba(245,158,11,.065);

  border:
    1px solid rgba(245,158,11,.26) !important;

  font-size:
    9px !important;

  font-weight:
    780;

  letter-spacing:
    .04em;

  text-transform:
    uppercase;
}


/* CREATIVE GRID ========================================== */

.studio-grid{
  gap:
    14px !important;
}


/* PANELS ================================================= */

.panel{
  position:relative;

  overflow:hidden;

  padding:
    21px !important;

  background:
    linear-gradient(
      180deg,
      #131C29,
      #101722
    ) !important;

  border:
    1px solid var(--es-line) !important;

  border-radius:
    15px !important;

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

.panel h2{
  display:flex;

  align-items:center;

  gap:
    9px;

  margin:
    0 0 18px !important;

  color:
    #F8FAFC !important;

  font-size:
    14px !important;

  font-weight:
    820;

  letter-spacing:
    -.015em;
}

.panel h2:after{
  content:"";

  height:
    1px;

  flex:
    1;

  margin-left:
    5px;

  background:
    linear-gradient(
      90deg,
      #293547,
      transparent
    );
}


/* FORMS ================================================== */

.panel label,
.login-card label{
  color:
    #CBD5E1 !important;

  font-size:
    10px !important;

  font-weight:
    720 !important;
}

.panel input,
.panel select,
.panel textarea,
.login-card input{
  min-height:
    42px;

  color:
    #F8FAFC !important;

  background:
    #0B111A !important;

  border:
    1px solid #2A374A !important;

  border-radius:
    9px !important;

  box-shadow:
    none !important;

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

.panel textarea{
  line-height:
    1.55;
}

.panel input:hover,
.panel select:hover,
.panel textarea:hover,
.login-card input:hover{
  border-color:
    #394A62 !important;
}

.panel input:focus,
.panel select:focus,
.panel textarea:focus,
.login-card input:focus{
  border-color:
    var(--es-amber) !important;

  box-shadow:
    0 0 0 3px rgba(245,158,11,.10) !important;
}

.panel select option{
  color:
    #F8FAFC;

  background:
    #111827;
}


/* UPLOAD ================================================= */

.upload-box{
  padding:
    15px !important;

  background:
    rgba(245,158,11,.025) !important;

  border:
    1px dashed #46546A !important;

  border-radius:
    11px !important;
}

.upload-box:hover{
  border-color:
    rgba(245,158,11,.65) !important;

  background:
    rgba(245,158,11,.045) !important;
}

.upload-box span{
  color:
    #7F8FA5 !important;
}

.upload-box input{
  min-height:
    0 !important;

  background:
    transparent !important;
}


/* CHECKBOXES ============================================= */

.check{
  color:
    #B8C4D3 !important;
}

.check input{
  accent-color:
    var(--es-amber);
}


/* HINT =================================================== */

.hint,
.muted{
  color:
    var(--es-muted) !important;

  font-size:
    10px !important;

  line-height:
    1.6 !important;
}


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

.primary,
.secondary{
  min-height:
    42px;

  padding:
    10px 15px !important;

  border-radius:
    9px !important;

  font-size:
    11px;

  font-weight:
    820 !important;

  box-shadow:
    none !important;
}

.primary{
  color:
    #111827 !important;

  background:
    var(--es-amber) !important;

  border:
    1px solid var(--es-amber) !important;
}

.primary:hover:not(:disabled){
  background:
    var(--es-amber-deep) !important;

  border-color:
    var(--es-amber-deep) !important;
}

.secondary{
  color:
    #DCE3EB !important;

  background:
    #172231 !important;

  border:
    1px solid #344258 !important;
}

.secondary:hover:not(:disabled){
  color:
    #FFFFFF !important;

  background:
    #1B293B !important;

  border-color:
    #47576D !important;
}

.actions{
  margin-top:
    2px;

  padding-top:
    3px !important;
}

.actions .primary{
  min-width:
    250px;
}


/* JOB PROGRESS ========================================== */

.job-panel{
  margin-top:
    17px !important;

  background:
    linear-gradient(
      135deg,
      #111B29,
      #151C27
    ) !important;

  border-color:
    rgba(245,158,11,.19) !important;
}

.job-top h2{
  color:
    #FFFFFF !important;
}

.job-top span{
  color:
    var(--es-amber) !important;

  font-size:
    22px !important;
}

.progress{
  height:
    8px !important;

  background:
    #080C12 !important;
}

.progress div{
  background:
    linear-gradient(
      90deg,
      #D97706,
      #F59E0B
    ) !important;

  box-shadow:
    0 0 18px rgba(245,158,11,.21);
}


/* GENERATED RESULTS ===================================== */

.result-grid{
  gap:
    14px !important;

  margin-top:
    17px !important;
}

.result-card{
  padding:
    17px !important;

  background:
    #101722 !important;

  border:
    1px solid var(--es-line) !important;

  border-radius:
    14px !important;
}

.result-card h3{
  color:
    #F8FAFC !important;

  font-size:
    12px !important;

  font-weight:
    800;
}

.result-card img,
.result-card video{
  border:
    1px solid #1E293B;

  border-radius:
    10px !important;

  background:
    #05070A !important;
}

.copy-block{
  padding:
    14px !important;

  color:
    #CBD5E1 !important;

  background:
    #090E16 !important;

  border:
    1px solid #202C3B;

  border-radius:
    9px !important;
}

.asset-links a{
  color:
    #F4C66E !important;

  background:
    rgba(245,158,11,.04);

  border:
    1px solid rgba(245,158,11,.20) !important;

  border-radius:
    8px !important;

  font-size:
    10px !important;

  font-weight:
    750;
}

.asset-links a:hover{
  color:
    #FFD98B !important;

  background:
    rgba(245,158,11,.08);
}


/* PROJECT LIBRARY ======================================= */

.project-list{
  gap:
    10px !important;
}

.project-card{
  padding:
    17px !important;

  background:
    #101722 !important;

  border:
    1px solid var(--es-line) !important;

  border-radius:
    13px !important;

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

.project-card:hover{
  border-color:
    #3A485D !important;
}

.project-card h3{
  color:
    #F8FAFC !important;

  font-size:
    14px !important;
}

.project-card p{
  color:
    var(--es-muted) !important;

  font-size:
    10px !important;
}

.project-actions a,
.project-actions button{
  color:
    #DCE3EB !important;

  background:
    #172231 !important;

  border:
    1px solid #344258 !important;

  border-radius:
    7px !important;

  font-size:
    9px !important;

  font-weight:
    720;
}

.project-actions a:hover,
.project-actions button:hover{
  color:
    #FFFFFF !important;

  border-color:
    #4B5A70 !important;
}


/* BRAND KIT ============================================= */

#view-brand .panel{
  max-width:
    680px !important;
}

#view-brand input[type="color"]{
  min-height:
    48px;

  padding:
    5px;
}


/* SYSTEM ================================================ */

.system-grid{
  gap:
    12px !important;
}

.sys-card{
  position:relative;

  overflow:hidden;

  padding:
    18px !important;

  background:
    #101722 !important;

  border:
    1px solid var(--es-line) !important;

  border-radius:
    13px !important;
}

.sys-card:after{
  content:"";

  position:absolute;

  width:
    90px;

  height:
    90px;

  right:
    -50px;

  top:
    -50px;

  border-radius:
    50%;

  background:
    rgba(245,158,11,.035);
}

.sys-card strong{
  color:
    #F8FAFC !important;

  font-size:
    12px;
}

.sys-card p{
  color:
    var(--es-muted) !important;

  font-size:
    10px !important;
}

.dot{
  width:
    7px !important;

  height:
    7px !important;
}

.dot.good{
  background:
    var(--es-green) !important;

  box-shadow:
    0 0 0 4px rgba(18,183,106,.08);
}


/* PROVIDER RESULT ======================================= */

#providerTestResult{
  margin-top:
    13px;
}

.success{
  color:
    #65D6A0 !important;
}

.error{
  color:
    #FF8277 !important;
}


/* SCROLLBAR ============================================= */

.sidebar,
.app-shell main{
  scrollbar-width:
    thin;

  scrollbar-color:
    #354358 transparent;
}


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

@media(max-width:950px){

  .app-shell{
    grid-template-columns:
      1fr !important;
  }

  .sidebar{
    position:sticky !important;

    top:0;

    z-index:50;

    height:auto !important;

    padding:
      10px 13px !important;

    flex-direction:
      row !important;

    background:
      rgba(15,23,42,.97) !important;

    border-right:
      0 !important;

    border-bottom:
      1px solid rgba(255,255,255,.07) !important;

    backdrop-filter:
      blur(16px);
  }

  .logo-row{
    min-height:
      42px;

    margin:
      0 8px 0 0 !important;

    padding:
      0 12px 0 0 !important;

    border:
      0;

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

  .brand-mark.small{
    width:
      33px !important;

    height:
      33px !important;
  }

  .sidebar nav{
    display:flex !important;

    gap:
      3px !important;
  }

  .sidebar nav:before,
  .nav[data-view="system"]:after{
    display:none;
  }

  .nav[data-view="system"]{
    margin-top:
      0;
  }

  .nav{
    min-width:
      max-content;

    padding:
      8px 10px !important;
  }

  .sidebar-foot{
    margin:
      0 0 0 auto !important;

    padding:
      0 !important;

    border:
      0 !important;
  }

  .app-shell main{
    padding:
      26px 22px 70px !important;
  }
}


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

@media(max-width:620px){

  .sidebar{
    position:
      relative !important;

    flex-wrap:
      wrap;

    padding:
      10px !important;
  }

  .logo-row{
    width:
      auto;
  }

  .sidebar nav{
    order:
      3;

    width:
      100%;

    overflow-x:
      auto;

    padding-top:
      5px;
  }

  .nav:before{
    display:none;
  }

  .sidebar-foot{
    font-size:
      10px !important;
  }

  #logoutBtn{
    margin-left:
      10px;
  }

  .app-shell main{
    padding:
      20px 13px 60px !important;
  }

  .page-head h1{
    font-size:
      25px !important;
  }

  .panel{
    padding:
      17px !important;
  }

  .actions .primary{
    min-width:
      0;
  }

  .project-card{
    grid-template-columns:
      1fr !important;
  }

  .project-actions{
    flex-wrap:
      wrap;
  }
}

/* EDGITEK_STUDIO_V1_END */