:root{
  --bg0:#050c14;
  --bg1:#09131d;
  --bg2:#0d1824;

  --glass:rgba(255,255,255,.05);
  --glass-2:rgba(0,0,0,.24);
  --border:rgba(255,255,255,.10);

  --text:#eef7ff;
  --muted:rgba(238,247,255,.72);
  --shadow:0 14px 36px rgba(0,0,0,.34);

  --blue-1:#6fddff;
  --blue-2:#1491d6;
  --blue-3:#0b3d63;

  --red-1:#16060b;
  --red-2:#2a0914;
  --red-3:#4a1224;
  --red-4:#7a1f3b;
  --red-5:#c94f74;
  --red-6:#f07aa5;

  --purple-1:#a878ff;
  --purple-2:#7c4dff;
  --purple-3:#2b114f;

  --gold-1:#ffd88a;
  --gold-2:#ffb347;
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  scroll-behavior:smooth;
}

body{
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 700px at 15% 8%, rgba(111,221,255,.08), transparent 55%),
    radial-gradient(900px 700px at 85% 10%, rgba(240,122,165,.05), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 55%, var(--bg2));
}

.app{
  min-height:100vh;
  padding:18px;
}

.main{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:22px;
}

.panel{
  display:block;
  padding:18px 18px 40px;
  border-radius:28px;
  min-height:calc(100vh - 36px);
  overflow:visible;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 14px 40px rgba(0,0,0,.24);
}

/* =======================
   SECTIONS
======================= */

.section-sf{
  background:
    radial-gradient(760px 520px at 8% 8%, rgba(111,221,255,.14), transparent 52%),
    radial-gradient(740px 520px at 92% 10%, rgba(20,145,214,.14), transparent 52%),
    linear-gradient(135deg, rgba(8,40,64,.82), rgba(4,18,30,.76));
  border:1px solid rgba(111,221,255,.14);
}

.section-trig{
  background:
    radial-gradient(900px 620px at 12% 12%, rgba(201,79,116,.16), transparent 55%),
    radial-gradient(700px 500px at 88% 18%, rgba(122,31,59,.18), transparent 50%),
    linear-gradient(135deg, rgba(22,6,11,.98), rgba(42,9,20,.96) 45%, rgba(18,4,10,.98));
  border:1px solid rgba(201,79,116,.18);
}

.section-circle{
  background:
    radial-gradient(780px 560px at 10% 10%, rgba(168,120,255,.14), transparent 54%),
    radial-gradient(760px 540px at 90% 14%, rgba(124,77,255,.14), transparent 54%),
    linear-gradient(135deg, rgba(24,10,48,.86), rgba(12,6,28,.82));
  border:1px solid rgba(168,120,255,.18);
}

.section-notes{
  background:
    radial-gradient(700px 520px at 10% 10%, rgba(255,216,138,.08), transparent 52%),
    radial-gradient(700px 520px at 90% 12%, rgba(111,221,255,.08), transparent 52%),
    linear-gradient(135deg, rgba(16,26,36,.72), rgba(7,14,20,.68));
  border:1px solid rgba(255,255,255,.08);
}

/* =======================
   HEADERS
======================= */

.panelHeader{
  margin-bottom:16px;
}

.panelHeader h1{
  margin:0 0 6px;
  font-size:1.8rem;
  line-height:1.15;
  letter-spacing:-.02em;
}

.panelHeader p{
  margin:0;
  color:var(--muted);
}

/* =======================
   LAYOUT
======================= */

.splitCard{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 320px;
  gap:18px;
  align-items:start;
}

.card{
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:24px;
  padding:18px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
  margin-bottom:16px;
}

.section-sf .card{
  background:
    linear-gradient(135deg, rgba(111,221,255,.07), rgba(20,145,214,.05)),
    rgba(255,255,255,.04);
  border-color:rgba(111,221,255,.14);
}

.section-trig .card{
  background:
    linear-gradient(135deg, rgba(255,255,255,.04), rgba(201,79,116,.04)),
    linear-gradient(180deg, rgba(122,31,59,.16), rgba(42,9,20,.30));
  border:1px solid rgba(201,79,116,.16);
  box-shadow:
    0 8px 30px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.section-circle .card{
  background:
    linear-gradient(135deg, rgba(168,120,255,.07), rgba(124,77,255,.05)),
    rgba(255,255,255,.04);
  border-color:rgba(168,120,255,.16);
}

.solvePanel{
  position:sticky;
  top:18px;
  border-radius:24px;
  padding:16px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.10);
  min-height:220px;
}

.solvePanel-blue{
  background:
    linear-gradient(180deg, rgba(111,221,255,.10), rgba(0,0,0,.18)),
    rgba(255,255,255,.04);
  border-color:rgba(111,221,255,.18);
}

.solvePanel-rose,
.solvePanel-trig{
  background:
    linear-gradient(180deg, rgba(201,79,116,.14), rgba(42,9,20,.42)),
    rgba(255,255,255,.03);
  border:1px solid rgba(201,79,116,.18);
  box-shadow:
    0 8px 24px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.solvePanel-circle{
  background:
    linear-gradient(180deg, rgba(168,120,255,.12), rgba(18,8,38,.38)),
    rgba(255,255,255,.03);
  border-color:rgba(168,120,255,.18);
}

.solveHeader{
  font-weight:800;
  font-size:1.05rem;
  margin-bottom:12px;
}

.solveBody{
  white-space:pre-wrap;
  line-height:1.65;
  color:rgba(238,247,255,.92);
  font-size:.95rem;
}

/* =======================
   TYPOGRAPHY
======================= */

.cardTitle{
  margin:0 0 6px;
}

.muted{
  color:var(--muted);
}

.tiny{
  font-size:.9rem;
}

.divider{
  height:1px;
  background:rgba(255,255,255,.10);
  margin:14px 0;
}

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

.gridButtons{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.softBtn{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  color:rgba(238,247,255,.88);
  cursor:pointer;
  font-size:.92rem;
  line-height:1.2;
  transition:
    transform .08s ease,
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.softBtn:hover{
  transform:translateY(-1px);
}

.section-sf .softBtn.active{
  border-color:rgba(111,221,255,.60);
  box-shadow:0 0 0 2px rgba(111,221,255,.16) inset;
  background:rgba(111,221,255,.10);
}

.section-trig .softBtn.active{
  background:rgba(201,79,116,.16);
  border-color:rgba(240,122,165,.42);
  box-shadow:0 0 0 1px rgba(240,122,165,.12) inset;
  color:#fff;
}

.section-circle .softBtn.active{
  border-color:rgba(168,120,255,.56);
  box-shadow:0 0 0 2px rgba(168,120,255,.16) inset;
  background:rgba(168,120,255,.10);
}

.row{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

.btnPrimary,
.btnGhost{
  padding:11px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  cursor:pointer;
  font-weight:700;
  transition:
    transform .08s ease,
    filter .15s ease,
    box-shadow .15s ease;
}

.btnPrimary:hover,
.btnGhost:hover{
  transform:translateY(-1px);
}

.btnGhost{
  background:rgba(0,0,0,.22);
  color:var(--text);
}

.section-sf .btnPrimary{
  background:linear-gradient(135deg, var(--blue-1), #86ebff);
  border-color:rgba(111,221,255,.55);
  color:#032132;
  box-shadow:
    0 6px 18px rgba(111,221,255,.20),
    inset 0 1px 0 rgba(255,255,255,.20);
}

.section-trig .btnPrimary{
  background:linear-gradient(135deg, #d85c82, #f07aa5);
  color:#2a0914;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 6px 18px rgba(201,79,116,.24),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.section-circle .btnPrimary{
  background:linear-gradient(135deg, #b891ff, #d2b1ff);
  border-color:rgba(168,120,255,.55);
  color:#261044;
  box-shadow:
    0 6px 18px rgba(168,120,255,.22),
    inset 0 1px 0 rgba(255,255,255,.20);
}

.section-trig .btnPrimary:hover,
.section-sf .btnPrimary:hover,
.section-circle .btnPrimary:hover{
  filter:brightness(1.05);
}

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

.resultBox{
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  background:var(--glass-2);
  border:1px solid rgba(255,255,255,.10);
}

.section-sf .resultBox{
  background:
    linear-gradient(135deg, rgba(111,221,255,.05), rgba(20,145,214,.03)),
    rgba(0,0,0,.18);
  border-color:rgba(111,221,255,.14);
}

.section-trig .resultBox,
.section-trig .formulaBox{
  background:
    linear-gradient(135deg, rgba(201,79,116,.06), rgba(255,255,255,.02)),
    rgba(0,0,0,.18);
  border-color:rgba(201,79,116,.14);
}

.section-circle .resultBox{
  background:
    linear-gradient(135deg, rgba(168,120,255,.06), rgba(124,77,255,.03)),
    rgba(0,0,0,.18);
  border-color:rgba(168,120,255,.14);
}

.resultLabel{
  font-weight:800;
  margin-bottom:6px;
}

.resultValue{
  font-size:1.05rem;
  color:rgba(238,247,255,.94);
  word-break:break-word;
}

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

label{
  display:block;
  margin:10px 0 6px;
  color:rgba(238,247,255,.88);
  font-weight:600;
}

input,
select{
  width:100%;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  color:var(--text);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.section-sf input,
.section-sf select{
  border-color:rgba(111,221,255,.12);
}

.section-trig input,
.section-trig select{
  background:rgba(20,6,11,.55);
  border:1px solid rgba(201,79,116,.14);
  color:#fff;
}

.section-circle input,
.section-circle select{
  border-color:rgba(168,120,255,.14);
}

.section-sf input:focus,
.section-sf select:focus{
  border-color:rgba(111,221,255,.34);
  box-shadow:0 0 0 3px rgba(111,221,255,.10);
}

.section-trig input:focus,
.section-trig select:focus{
  border-color:rgba(240,122,165,.42);
  box-shadow:0 0 0 3px rgba(201,79,116,.12);
  outline:none;
}

.section-circle input:focus,
.section-circle select:focus{
  border-color:rgba(168,120,255,.40);
  box-shadow:0 0 0 3px rgba(168,120,255,.12);
}

input::placeholder{
  color:rgba(238,247,255,.45);
}

.formGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:8px;
}

.span2{
  grid-column:span 2;
}

/* =======================
   TRIANGLE LAYOUT
======================= */

.trigLayout{
  display:grid;
  grid-template-columns:460px 1fr;
  gap:16px;
  margin-top:8px;
  align-items:start;
}

.trigLeft{
  display:flex;
  flex-direction:column;
  width:460px;
}

.trigRight{
  display:flex;
  flex-direction:column;
}

.inputCompact{
  width:100%;
  max-width:460px;
}

.btnGroup{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.btnGroup.small .chipBtn{
  padding:9px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:rgba(238,247,255,.88);
  cursor:pointer;
  font-size:.92rem;
  line-height:1;
  white-space:nowrap;
  transition:
    transform .08s ease,
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.btnGroup.small .chipBtn:hover{
  transform:translateY(-1px);
}

.section-sf .btnGroup.small .chipBtn.active{
  border-color:rgba(111,221,255,.58);
  box-shadow:0 0 0 2px rgba(111,221,255,.16) inset;
  background:rgba(111,221,255,.10);
}

.section-trig .btnGroup.small .chipBtn.active{
  background:rgba(201,79,116,.16);
  border-color:rgba(240,122,165,.42);
  box-shadow:0 0 0 1px rgba(240,122,165,.12) inset;
}

.section-circle .btnGroup.small .chipBtn.active{
  border-color:rgba(168,120,255,.56);
  box-shadow:0 0 0 2px rgba(168,120,255,.16) inset;
  background:rgba(168,120,255,.10);
}
/* =======================
   CONVERTER SECTION
======================= */
.section-converter{
  background:
    radial-gradient(800px 600px at 10% 10%, rgba(255,216,138,.16), transparent 55%),
    radial-gradient(700px 500px at 90% 15%, rgba(255,179,71,.14), transparent 50%),
    linear-gradient(135deg, rgba(30,20,5,.95), rgba(15,10,3,.98));
  border:1px solid rgba(255,216,138,.18);
}

.section-converter .card{
  background:
    linear-gradient(135deg, rgba(255,216,138,.07), rgba(255,179,71,.05)),
    rgba(255,255,255,.04);
  border-color:rgba(255,216,138,.16);
}

.solvePanel-converter{
  background:
    linear-gradient(180deg, rgba(255,216,138,.12), rgba(40,24,6,.40)),
    rgba(255,255,255,.03);
  border-color:rgba(255,216,138,.18);
}

.section-converter .softBtn.active{
  background:rgba(255,216,138,.16);
  border-color:rgba(255,216,138,.45);
  box-shadow:0 0 0 2px rgba(255,216,138,.12) inset;
  color:#fff8ea;
}

.section-converter .btnPrimary{
  background:linear-gradient(135deg, #ffd88a, #ffb347);
  color:#3a2408;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 6px 18px rgba(255,179,71,.25),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.section-converter .btnPrimary:hover{
  filter:brightness(1.05);
}

.section-converter .resultBox{
  background:
    linear-gradient(135deg, rgba(255,216,138,.06), rgba(255,255,255,.02)),
    rgba(0,0,0,.18);
  border-color:rgba(255,216,138,.14);
}

.section-converter input,
.section-converter select{
  background:rgba(24,16,6,.56);
  border:1px solid rgba(255,216,138,.14);
  color:#fff;
}

.section-converter input:focus,
.section-converter select:focus{
  border-color:rgba(255,216,138,.42);
  box-shadow:0 0 0 3px rgba(255,216,138,.12);
  outline:none;
}

/* =======================
   TOOLS GRID
======================= */
.toolsGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:stretch;
}
.toolsGrid > .card{
  height:100%;
  display:flex;
  flex-direction:column;
  min-height:100%;
}

.toolsGrid .row{
  justify-content:flex-end;
  align-items:center;
}

.toolsGrid > .card .resultBox{
  width:100%;
  min-height:80px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.toolsGrid > .card .resultBox:last-child{
  margin-bottom:0;
}

.chipRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.section-converter .chipBtn{
  padding:9px 12px;
  border-radius:14px;
  border:1px solid rgba(255,216,138,.18);
  background:rgba(0,0,0,.18);
  color:#fff7e8;
  cursor:pointer;
  font-size:.92rem;
  line-height:1;
  transition:
    transform .08s ease,
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.section-converter .chipBtn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,216,138,.34);
  background:rgba(255,216,138,.08);
}

.section-converter code{
  background:rgba(255,216,138,.08);
  border:1px solid rgba(255,216,138,.14);
  padding:2px 6px;
  border-radius:8px;
  color:#ffe7b8;
}

@media (max-width:1000px){
  .toolsGrid{
    grid-template-columns:1fr;
  }
}

/* =======================
   NOTES
======================= */

.notesTop{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.search{
  font-size:1rem;
}

.notesWrap{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding-bottom:40px;
}

.noteTopic{
  border-radius:22px;
  padding:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  box-shadow:var(--shadow);
}

.noteTopic h2{
  margin:0 0 10px;
  font-size:1.25rem;
}

.noteTopic ul{
  margin:0;
  padding-left:18px;
  color:rgba(238,247,255,.88);
}

.noteBox{
  margin-top:10px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}

.noteGrid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.tone-angles{
  border-color:rgba(111,221,255,.22);
  background:linear-gradient(180deg, rgba(111,221,255,.10), rgba(0,0,0,.18));
}

.tone-tri{
  border-color:rgba(255,196,76,.22);
  background:linear-gradient(180deg, rgba(255,196,76,.10), rgba(0,0,0,.18));
}

.tone-trig{
  border-color:rgba(130,255,170,.18);
  background:linear-gradient(180deg, rgba(130,255,170,.08), rgba(0,0,0,.18));
}

.tone-lines{
  border-color:rgba(255,120,200,.18);
  background:linear-gradient(180deg, rgba(255,120,200,.08), rgba(0,0,0,.18));
}

.tone-circles{
  border-color:rgba(168,120,255,.22);
  background:linear-gradient(180deg, rgba(168,120,255,.10), rgba(0,0,0,.18));
}

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

@media (max-width:1200px){
  .splitCard{
    grid-template-columns:1fr;
  }

  .solvePanel{
    position:relative;
    top:auto;
  }
}

@media (max-width:980px){
  .gridButtons{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:920px){
  .trigLayout{
    grid-template-columns:1fr;
  }

  .trigLeft{
    width:100%;
  }

  .inputCompact{
    max-width:100%;
  }
}

@media (max-width:640px){
  .gridButtons{
    grid-template-columns:1fr;
  }

  .noteGrid2,
  .formGrid{
    grid-template-columns:1fr;
  }

  .span2{
    grid-column:span 1;
  }

  .panel{
    padding:14px 14px 28px;
    min-height:auto;
  }

  .panelHeader h1{
    font-size:1.5rem;
  }
}