/* ==========================================================
   EGEAD AI Studio
   Dark UI v2
========================================================== */

:root{

    --bg:#0b0d12;

    --bg2:#131722;

    --card:#181d28;

    --card2:#202635;

    --border:#2b3448;

    --primary:#4f8cff;

    --primary-hover:#6ea2ff;

    --text:#ffffff;

    --text-soft:#9ca9c9;

    --success:#22c55e;

    --radius:18px;

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

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:
        Inter,
        system-ui,
        sans-serif;

    min-height:100vh;

}

img{

    display:block;

    max-width:100%;

}

button{

    cursor:pointer;

    font-family:inherit;

}

input,
textarea{

    font-family:inherit;

}


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

.studio{

    width:min(1800px,95%);

    margin:auto;

    min-height:100vh;

    display:grid;

    grid-template-columns:

        360px

        1fr;

    gap:30px;

    padding:40px 0;

}


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

.sidebar{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:24px;

    padding:28px;

    display:flex;

    flex-direction:column;

    gap:28px;

    box-shadow:var(--shadow);

}


/* ==========================================================
   LOGO
========================================================== */

.logo{

    display:flex;

    flex-direction:column;

    gap:6px;

}

.logo h1{

    font-size:34px;

    font-weight:800;

    letter-spacing:2px;

}

.logo span{

    color:var(--text-soft);

    font-size:15px;

}


/* ==========================================================
   CONTENT
========================================================== */

.content{

    display:flex;

    flex-direction:column;

    gap:28px;

}


/* ==========================================================
   OPTION PANEL
========================================================== */

.options{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:24px;

    padding:32px;

    box-shadow:var(--shadow);

}

.options h2{

    font-size:32px;

    margin-bottom:10px;

}

.options>p{

    color:var(--text-soft);

    margin-bottom:10px;

}


/* ==========================================================
   OPTION GROUP
========================================================== */

.option-group{

    margin-bottom:35px;

}

.option-group>label{

    display:block;

    margin-bottom:18px;

    font-size:15px;

    font-weight:700;

    color:#fff;

}


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

.result{

    display:grid;

    grid-template-columns:

        repeat(2,1fr);

    gap:25px;

}

.result-box{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:22px;

    padding:25px;

    min-height:520px;

    display:flex;

    flex-direction:column;

    gap:20px;

    box-shadow:var(--shadow);

}

.result-box h3{

    font-size:20px;

}

.result-box img{

    flex:1;

    object-fit:contain;

    border-radius:14px;

    background:#090b10;

}


/* ==========================================================
   UTILITIES
========================================================== */

.hidden{

    display:none;

}


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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#10131a;

}

::-webkit-scrollbar-thumb{

    background:#303a4d;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#44506a;

}


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

@media(max-width:1200px){

    .studio{

        grid-template-columns:1fr;

    }

}

@media(max-width:900px){

    .result{

        grid-template-columns:1fr;

    }

}

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

.upload-card{

    display:flex;

    flex-direction:column;

    gap:20px;

}


/* ==========================================================
   DROPZONE
========================================================== */

.dropzone{

    position:relative;

    width:100%;

    aspect-ratio:1;

    border:2px dashed #3a4661;

    border-radius:22px;

    background:#121722;

    overflow:hidden;

    transition:.25s;

    cursor:pointer;

}

.dropzone:hover{

    border-color:var(--primary);

    background:#161d2b;

}

.dropzone.dragover{

    border-color:#69a3ff;

    background:#1a2436;

}


/* ==========================================================
   PLACEHOLDER
========================================================== */

.placeholder{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    gap:16px;

    color:var(--text-soft);

    padding:30px;

}

.upload-icon{

    width:74px;

    height:74px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    background:#20293b;

}

.placeholder h3{

    color:white;

    font-size:22px;

}

.placeholder p{

    font-size:14px;

}


/* ==========================================================
   THUMBNAIL
========================================================== */

.thumbnail-wrapper{

    display:none;

    position:absolute;

    inset:0;

}

.thumbnail-wrapper.active{

    display:block;

}

.thumbnail-wrapper img{

    width:100%;

    height:100%;

    object-fit:contain;

    background:#090b11;

}


/* ==========================================================
   FILE INFO
========================================================== */

.file-info{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.file-info div{

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:14px;

    color:var(--text-soft);

}

.file-info span{

    color:white;

    font-weight:600;

    margin-left:20px;

    text-align:right;

}


/* ==========================================================
   MODE GRID
========================================================== */

.mode-grid{

    display:grid;

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

    gap:16px;

}

.mode-card{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:88px;

    border:1px solid var(--border);

    border-radius:18px;

    background:#171d29;

    transition:.25s;

    cursor:pointer;

    overflow:hidden;

}

.mode-card:hover{

    transform:translateY(-3px);

    border-color:var(--primary);

    background:#202a3d;

}

.mode-card input{

    display:none;

}

.mode-card span{

    text-align:center;

    font-weight:600;

    line-height:1.5;

    padding:10px;

}

.mode-card input:checked + span{

    color:white;

}

.mode-card:has(input:checked){

    border-color:var(--primary);

    background:linear-gradient(
        180deg,
        #2a4678,
        #1b2435
    );

}


/* ==========================================================
   SCALE GRID
========================================================== */

.scale-grid{

    display:grid;

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

    gap:16px;

}

.scale-card{

    display:flex;

    justify-content:center;

    align-items:center;

    height:70px;

    border-radius:16px;

    border:1px solid var(--border);

    background:#171d29;

    cursor:pointer;

    transition:.25s;

    font-weight:700;

}

.scale-card:hover{

    transform:translateY(-3px);

    border-color:var(--primary);

}

.scale-card input{

    display:none;

}

.scale-card:has(input:checked){

    background:#2d4d82;

    border-color:#79aaff;

}


/* ==========================================================
   PROMPT
========================================================== */

textarea{

    width:100%;

    background:#111620;

    border:1px solid var(--border);

    border-radius:16px;

    color:white;

    padding:16px;

    resize:vertical;

    min-height:130px;

    outline:none;

    transition:.2s;

}

textarea:focus{

    border-color:var(--primary);

}


/* ==========================================================
   GENERATE BUTTON
========================================================== */

.generate-btn{

    width:100%;

    height:62px;

    border:none;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #377dff,
        #6ea2ff
    );

    color:white;

    font-size:18px;

    font-weight:700;

    transition:.25s;

}

.generate-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 30px rgba(55,125,255,.35);

}

.generate-btn:active{

    transform:scale(.98);

}

/* ==========================================================
   RESULT IMAGE
========================================================== */

.result-box{

    position:relative;

    overflow:hidden;

}

.result-box img{

    width:100%;

    height:100%;

    min-height:420px;

    object-fit:contain;

    border-radius:16px;

    background:
        linear-gradient(
            45deg,
            #10141d 25%,
            #151b27 25%,
            #151b27 50%,
            #10141d 50%,
            #10141d 75%,
            #151b27 75%
        );

    background-size:28px 28px;

}


/* ==========================================================
   EMPTY STATE
========================================================== */

.empty-state{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:20px;

    color:#6d7895;

}

.empty-state svg{

    width:90px;

    opacity:.35;

}

.empty-state h4{

    font-size:22px;

    color:#aab4cf;

}

.empty-state p{

    max-width:280px;

    text-align:center;

    line-height:1.7;

}


/* ==========================================================
   DOWNLOAD
========================================================== */

.download-area{

    display:flex;

    justify-content:flex-end;

    margin-top:25px;

}

.download-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 26px;

    border:none;

    border-radius:16px;

    background:#23b35c;

    color:white;

    font-size:15px;

    font-weight:700;

    transition:.25s;

}

.download-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 28px rgba(35,179,92,.28);

}


/* ==========================================================
   LOADING OVERLAY
========================================================== */

.loading{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    background:rgba(7,9,15,.85);

    backdrop-filter:blur(10px);

    z-index:99999;

}

.loading.active{

    display:flex;

}

.loading-box{

    width:480px;

    max-width:92%;

    background:#171d29;

    border:1px solid #2f3950;

    border-radius:24px;

    padding:40px;

    text-align:center;

}

.loading-box h2{

    font-size:28px;

    margin-bottom:12px;

}

.loading-box p{

    color:#9aa8c8;

    margin-bottom:35px;

}


/* ==========================================================
   PROGRESS BAR
========================================================== */

.progress{

    width:100%;

    height:14px;

    border-radius:999px;

    overflow:hidden;

    background:#252d3d;

}

.progress span{

    display:block;

    width:0;

    height:100%;

    background:linear-gradient(
        90deg,
        #377dff,
        #71a7ff
    );

    transition:width .35s;

}

.progress-text{

    margin-top:18px;

    font-size:15px;

    color:#c2cde5;

}


/* ==========================================================
   IMAGE ANIMATION
========================================================== */

.fade-in{

    animation:fadeIn .45s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/* ==========================================================
   SKELETON
========================================================== */

.skeleton{

    width:100%;

    height:420px;

    border-radius:16px;

    background:linear-gradient(

        90deg,

        #181d28 0%,

        #20283a 50%,

        #181d28 100%

    );

    background-size:400%;

    animation:skeleton 1.5s infinite;

}

@keyframes skeleton{

    from{

        background-position:100%;

    }

    to{

        background-position:-100%;

    }

}


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

@media(max-width:900px){

    .mode-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .scale-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:640px){

    .options{
        padding:22px;
    }

    .sidebar{
        padding:22px;
    }

    .mode-grid{
        grid-template-columns:1fr;
    }

    .loading-box{
        padding:28px;
    }

}


.csv-upload-card {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.025)
    );
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.18);
}

.csv-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.csv-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.csv-header p {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.62;
}

.csv-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: #86efac;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.csv-dropzone {
  position: relative;
  min-height: 135px;
  padding: 16px;
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.csv-dropzone:hover,
.csv-dropzone.dragover {
  border-color: rgba(124, 92, 255, 0.9);
  background: rgba(124, 92, 255, 0.08);
}

.csv-dropzone.dragover {
  transform: translateY(-2px);
}

.csv-placeholder {
  min-height: 101px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
}

.csv-placeholder strong {
  font-size: 14px;
}

.csv-placeholder span {
  font-size: 12px;
  opacity: 0.58;
}

.csv-upload-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 2px;
  border-radius: 13px;
  background: rgba(124, 92, 255, 0.16);
  color: #b8a8ff;
  font-size: 24px;
  font-weight: 700;
}

.csv-selected {
  min-height: 101px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.csv-file-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 54px;
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.26);
  color: #86efac;
  font-size: 11px;
  font-weight: 800;
}

.csv-selected-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.csv-selected-info strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.csv-selected-info span {
  font-size: 12px;
  opacity: 0.58;
}

.remove-csv-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.remove-csv-btn:hover {
  background: rgba(239, 68, 68, 0.22);
}

.process-csv-btn,
.download-csv-btn {
  width: 100%;
  min-height: 44px;
  margin-top: 13px;
  border: 0;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease,
    box-shadow 0.2s ease;
}

.process-csv-btn {
  background:
    linear-gradient(
      135deg,
      #7c5cff,
      #5a38f0
    );
  color: #ffffff;
  cursor: pointer;
  box-shadow:
    0 12px 24px rgba(91, 56, 240, 0.25);
}

.process-csv-btn:not(:disabled):hover,
.download-csv-btn:hover {
  transform: translateY(-1px);
}

.process-csv-btn:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  box-shadow: none;
}

.csv-progress {
  margin-top: 15px;
}

.csv-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 11px;
  opacity: 0.72;
}

.csv-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.csv-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #7c5cff,
      #34d399
    );
  transition: width 0.35s ease;
}

.csv-result {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.csv-result-title {
  margin-bottom: 10px;
  color: #86efac;
  font-size: 13px;
  font-weight: 700;
}

.csv-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.csv-stat {
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
}

.csv-stat span {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  opacity: 0.58;
}

.csv-stat strong {
  font-size: 16px;
}

.csv-stat.success strong {
  color: #86efac;
}

.csv-stat.failed strong {
  color: #fca5a5;
}

.download-csv-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: #86efac;
}

.csv-error-message {
  margin-top: 11px;
  color: #fca5a5;
  font-size: 11px;
  line-height: 1.5;
}

.hidden {
  display: none !important;
}

.quota-notice {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.35);
    color: #b7791f;
    font-size: 12px;
    line-height: 1.5;
}

.quota-notice-main{
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.35);
    color: #b7791f;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom:35px;
}