:root {

  /* Colors */

  --bg-color: #0f1115;
  --surface-color: #181a20;
  --surface-elevated: #20232b;

  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;

  --accent-color: #3b82f6;
  --accent-hover: #2563eb;

  --border-color: #2b2f38;

  --success-color: #10b981;

  --card-glow: 0 0 18px rgba(59,130,246,0.25);
}


/* Base Layout */

*{
  box-sizing:border-box;
}

body {

  margin:0;

  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  background:
    radial-gradient(circle at 20% 10%, #1b2231 0%, transparent 40%),
    radial-gradient(circle at 80% 90%, #1a1f2b 0%, transparent 40%),
    var(--bg-color);

  color:var(--text-primary);

  line-height:1.6;

  padding:40px;
  padding-block-end: 50vh;
}


/* Container */

.app{

  max-width:1200px;

  margin:auto;
}


/* Typography */

h1,h2,h3,h4,h5,h6{
  margin-top:0;
  font-weight:600;
}

h1{
  font-size:2rem;
}

h2{
  font-size:1.2rem;
  color:var(--text-secondary);
}

h3{
  font-size:1.1rem;
  color:#e5e7eb;
  letter-spacing:.3px;
}

p{
  color:var(--text-secondary);
}

a{
  color:var(--accent-color);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}


/* Hero Header */

.hero{

  margin-bottom:40px;

  padding:28px 30px;

  border-radius:14px;

  background:linear-gradient(
    180deg,
    #20242d,
    #181a20
  );

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

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

.hero p{
  margin-top:10px;
}

.hero .hint{
  font-size:.9rem;
}


/* Sections */

.section{

  display:flex;

  flex-wrap:wrap;

  gap:22px;

  margin-bottom:48px;
}

.section h3{

  flex:0 0 100%;

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

  padding-bottom:10px;

  margin-bottom:6px;
}


/* Cards */

.section details{

  flex:1 1 320px;

  min-width:260px;

  background:linear-gradient(
      180deg,
      var(--surface-elevated),
      var(--surface-color)
  );

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

  border-radius:12px;

  padding:16px;

  position:relative;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border .25s ease;
}


/* Accent line */

.section details::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:3px;

  background:linear-gradient(
      90deg,
      transparent,
      var(--accent-color),
      transparent
  );

  opacity:.4;
}


/* Hover */

.section details:hover{

  transform:translateY(-4px);

  border-color:var(--accent-color);

  box-shadow:
    0 10px 30px rgba(0,0,0,.55),
    var(--card-glow);
}


/* Summary */

.section details summary{

  cursor:pointer;

  font-weight:600;

  color:var(--accent-color);

  margin-bottom:6px;

  outline:none;

  padding:6px 0;
}


/* Remove default arrow marker */

.section details summary::-webkit-details-marker{
  display:none;
}


/* Open state */

.section details[open] summary{

  margin-bottom:12px;

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

  padding-bottom:6px;
}


/* Card Text */

.section details p{

  font-size:.9rem;

  margin:6px 0 14px 0;
}


/* Buttons */

button{

  background:linear-gradient(
      135deg,
      var(--accent-color),
      #60a5fa
  );

  color:white;

  border:none;

  padding:12px 20px;

  border-radius:8px;

  font-size:.95rem;

  font-weight:500;

  cursor:pointer;

  min-height:44px;

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

button:hover{

  background:linear-gradient(
      135deg,
      var(--accent-hover),
      #3b82f6
  );

  box-shadow:0 0 14px rgba(59,130,246,.45);
}

button:active{
  transform:scale(.96);
}


/* Checkbox */

input[type="checkbox"]{

  accent-color:var(--accent-color);

  width:18px;
  height:18px;

  cursor:pointer;

  vertical-align:middle;
}

label{

  cursor:pointer;

  margin-left:8px;

  font-size:.9rem;

  color:var(--text-secondary);
}


/* Install Panel */

.install-panel{

  margin-top:40px;

  padding:20px;

  border-radius:12px;

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

  background:linear-gradient(
    180deg,
    #1d2027,
    #181a20
  );

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;
}


/* Status */

.status{

  font-size:.95rem;

  color:var(--text-secondary);
}

#status{

  margin-left:6px;

  font-weight:600;

  color:var(--success-color);

  background:rgba(16,185,129,.12);

  padding:6px 10px;

  border-radius:6px;
}


/* Scrollbar */

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:#0f1115;
}

::-webkit-scrollbar-thumb{
  background:#2a2f3a;
  border-radius:8px;
}

::-webkit-scrollbar-thumb:hover{
  background:#3b82f6;
}


/* ---------------- */
/* Tablet Support */
/* ---------------- */

@media (max-width:1000px){

  body{
    padding:28px;
  }

  .section details{
    flex:1 1 calc(50% - 22px);
  }

}


/* ---------------- */
/* Mobile Support */
/* ---------------- */

@media (max-width:700px){

  body{
    padding:16px;
  }

  h1{
    font-size:1.6rem;
  }

  h2{
    font-size:1rem;
  }

  .hero{
    padding:20px;
  }

  .section{
    gap:16px;
  }

  .section details{
    flex:1 1 100%;
  }

  .install-panel{

    flex-direction:column;

    align-items:stretch;

    gap:14px;

    position:sticky;

    bottom:10px;

    backdrop-filter:blur(10px);
  }

  .install-panel button{
    width:100%;
  }

  .status{
    text-align:center;
  }

}