*{
  box-sizing:border-box
}

:root{
  --bg:#050505;

  --panel:rgba(15,13,20,.92);
  --panel2:rgba(19,16,25,.94);

  --line:rgba(137,95,210,.20);
  --line-strong:rgba(159,101,235,.42);

  --text:#f7f5f8;
  --muted:#928b9b;
  --soft:#c1bbc7;

  --purple:#654faa;
  --violet:#7c4fc7;
  --magenta:#a02eaa;
  --blue:#3055a7;

  --lime:#d8ff00;
}

html{
  background:var(--bg);
  color-scheme:dark
}

body{
  margin:0;

  background:
    radial-gradient(
      circle at 28% -10%,
      rgba(122,63,180,.18) 0,
      transparent 30%
    ),
    radial-gradient(
      circle at 82% 18%,
      rgba(40,65,170,.12) 0,
      transparent 28%
    ),
    radial-gradient(
      circle at 60% 110%,
      rgba(160,46,170,.08) 0,
      transparent 34%
    ),
    #050505;

  color:var(--text);

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

  min-height:100vh
}

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


/* ---------------------------------
   MAIN LAYOUT
---------------------------------- */

.shell{
  width:min(1040px,calc(100% - 40px));
  margin:0 auto;
  padding:64px 0 36px
}


/* ---------------------------------
   HERO
---------------------------------- */

.hero{
  margin-bottom:34px
}

.hero h1{
  font-size:clamp(48px,8vw,92px);
  line-height:.9;
  letter-spacing:-.065em;
  margin:0;
  font-weight:900;

  color:#f7f5f8;

  text-shadow:
    0 0 45px rgba(125,74,185,.10)
}

.hero p{
  color:var(--muted);
  font-size:17px;
  margin:18px 0 0
}


/* ---------------------------------
   MAIN PANEL
---------------------------------- */

.panel{
  position:relative;

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

  background:
    linear-gradient(
      145deg,
      rgba(27,19,35,.80),
      rgba(13,13,16,.95) 42%,
      rgba(12,15,25,.91)
    );

  border-radius:26px;
  padding:24px;

  box-shadow:
    0 30px 90px rgba(0,0,0,.48),
    0 0 80px rgba(94,47,155,.04),
    inset 0 1px 0 rgba(255,255,255,.035);

  backdrop-filter:blur(14px)
}

.panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;

  background:
    radial-gradient(
      circle at 0 0,
      rgba(160,46,170,.07),
      transparent 30%
    )
}

.panel-head,
.result-head{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px
}


/* ---------------------------------
   TYPOGRAPHY
---------------------------------- */

.eyebrow{
  font-size:10px;
  letter-spacing:.18em;
  color:var(--lime);
  font-weight:650
}

h2{
  font-size:25px;
  margin:5px 0 0;
  letter-spacing:-.03em
}


/* ---------------------------------
   GRID
---------------------------------- */

.grid{
  display:grid;
  gap:14px;
  margin-top:18px
}

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

.grid.four{
  grid-template-columns:repeat(4,minmax(0,1fr))
}


/* ---------------------------------
   FORM
---------------------------------- */

label{
  display:block;
  margin-top:18px
}

.grid label{
  margin-top:0
}

label>span{
  display:block;
  font-size:12px;
  color:#b5aebe;
  margin:0 0 8px
}

input,
select,
textarea{
  width:100%;

  border:1px solid rgba(140,118,160,.22);

  border-radius:12px;

  background:rgba(7,7,10,.74);

  color:#f2eff5;

  padding:12px 13px;

  outline:none;

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

input::placeholder,
textarea::placeholder{
  color:#746e7c
}

textarea{
  resize:vertical
}

input:hover,
select:hover,
textarea:hover{
  border-color:rgba(155,111,215,.34)
}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(169,93,225,.82);

  background:rgba(13,9,17,.88);

  box-shadow:
    0 0 0 3px rgba(145,72,198,.10),
    0 0 26px rgba(134,65,192,.08)
}


/* ---------------------------------
   ACTIONS
---------------------------------- */

.actions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:22px;
  flex-wrap:wrap
}

.actions.compact{
  margin-top:0;
  justify-content:flex-end
}


/* ---------------------------------
   BUTTONS
   ORIGINAL WHITE / BLACK STYLE
---------------------------------- */

button{
  border:1px solid #323232;
  border-radius:10px;
  background:#151515;
  color:#e9e9e9;
  padding:10px 14px;
  cursor:pointer;

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

button:hover{
  border-color:#666;
  background:#181818
}

button:active{
  transform:translateY(1px)
}

button.primary{
  background:#f2f2f2;
  color:#101010;
  border-color:#f2f2f2;
  font-weight:750;
  box-shadow:none
}

button.primary:hover{
  background:#fff;
  border-color:#fff;
  box-shadow:none
}

button.ghost{
  background:#0d0d0d
}


/* ---------------------------------
   RESULTS
---------------------------------- */

#result{
  margin-top:46px
}

.result-head p{
  color:var(--muted);
  margin:8px 0 0
}


/* ---------------------------------
   SUMMARY
---------------------------------- */

.summary-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:20px 0 16px
}

.summary-strip div{
  border:1px solid var(--line);

  background:
    linear-gradient(
      145deg,
      rgba(21,17,27,.92),
      rgba(12,12,15,.93)
    );

  border-radius:15px;
  padding:14px;

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

.summary-strip span{
  display:block;
  font-size:9px;
  letter-spacing:.12em;
  color:#867c91;
  margin-bottom:6px
}

.summary-strip strong{
  font-size:22px;
  letter-spacing:-.04em
}


/* ---------------------------------
   SHOTS
---------------------------------- */

.shots{
  display:grid;
  gap:12px
}

.shot{
  border:1px solid var(--line);

  background:
    linear-gradient(
      160deg,
      rgba(19,16,24,.96),
      rgba(10,10,12,.96)
    );

  border-radius:20px;
  padding:18px;

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

  transition:
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease
}

.shot:hover{
  border-color:rgba(150,87,213,.35);

  box-shadow:
    0 16px 50px rgba(0,0,0,.22),
    0 0 40px rgba(107,54,165,.035);

  transform:translateY(-1px)
}

.shot-top{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;

  border-bottom:
    1px solid rgba(124,91,150,.16);

  padding-bottom:13px;
  margin-bottom:14px
}

.shot-number{
  display:flex;
  gap:12px;
  align-items:center
}


/* ---------------------------------
   SHOT NUMBER
   ORIGINAL WHITE STYLE
---------------------------------- */

.badge{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#f2f2f2;
  color:#111;
  font-weight:850;
  box-shadow:none
}

.shot h3{
  font-size:18px;
  margin:0
}

.time{
  font-size:12px;
  color:#918799;
  white-space:nowrap
}

.shot-grid{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr;
  gap:16px
}

.field span{
  font-size:9px;
  letter-spacing:.12em;
  color:#81768b
}

.field p{
  margin:5px 0 0;
  color:#dad5de;
  font-size:13px;
  line-height:1.5
}


/* ---------------------------------
   AI PROMPT
---------------------------------- */

.prompt{
  margin-top:14px;
  padding:13px;

  border:1px solid rgba(128,83,168,.22);

  background:
    linear-gradient(
      145deg,
      rgba(10,8,13,.96),
      rgba(10,11,17,.96)
    );

  border-radius:12px
}

.prompt span{
  font-size:9px;
  letter-spacing:.12em;
  color:#8b7897
}

.prompt p{
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  color:#c8c0cd;

  font-size:12px;
  line-height:1.55;
  margin:7px 0 0
}


/* ---------------------------------
   NOTES
---------------------------------- */

.notes{
  margin-top:16px
}

.notes ul{
  margin:14px 0 0;
  padding-left:20px;
  color:#bbb3c1;
  line-height:1.7
}


/* ---------------------------------
   FOOTER
---------------------------------- */

footer{
  display:flex;
  justify-content:space-between;
  gap:20px;

  color:#625b69;

  font-size:11px;

  padding:26px 2px 0
}


/* ---------------------------------
   RESPONSIVE
---------------------------------- */

@media(max-width:800px){

  .grid.two,
  .grid.four,
  .shot-grid,
  .summary-strip{
    grid-template-columns:1fr 1fr
  }

  .panel-head,
  .result-head{
    flex-direction:column
  }

  .actions.compact{
    justify-content:flex-start
  }
}

@media(max-width:560px){

  .shell{
    width:min(100% - 24px,1040px);
    padding-top:38px
  }

  .grid.two,
  .grid.four,
  .shot-grid,
  .summary-strip{
    grid-template-columns:1fr
  }

  .hero h1{
    font-size:50px
  }

  .panel{
    padding:18px;
    border-radius:22px
  }

  .shot-top{
    flex-direction:column
  }

  footer{
    flex-direction:column
  }
}