:root{
  --bg:#0b0f1e; --bg2:#111733; --panel:rgba(20,26,52,.78); --panel2:rgba(30,38,72,.6);
  --text:#e7ecff; --muted:#9aa6d0; --line:rgba(140,160,220,.18);
  --accent:#7c5cff; --accent2:#22d3ee; --accent3:#ff5cc8;
  --ok:#34d399; --warn:#fbbf24; --err:#ff6b81;
  --radius:14px; --shadow:0 18px 50px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,"Hiragino Sans","Noto Sans JP","Segoe UI",sans-serif;
  color:var(--text); line-height:1.75; min-height:100vh;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(124,92,255,.35), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(34,211,238,.25), transparent 60%),
    radial-gradient(800px 600px at 50% 120%, rgba(255,92,200,.18), transparent 60%),
    linear-gradient(180deg,#070a18 0%, #0b1130 60%, #070a18 100%);
  background-attachment: fixed;
}
h1,h2,h3,h4{color:#fff; letter-spacing:.02em; margin:0 0 .6em}
h1{font-size:1.9rem} h2{font-size:1.4rem} h3{font-size:1.15rem}
a{color:#9bb5ff; text-decoration:none}
a:hover{color:#fff; text-shadow:0 0 12px rgba(155,181,255,.6)}
p{margin:.4em 0}
.container{max-width:1080px; margin:0 auto; padding:0 22px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background:linear-gradient(180deg, rgba(10,14,32,.85), rgba(10,14,32,.55));
  border-bottom:1px solid var(--line);
}
.site-header .container{padding-top:18px; padding-bottom:14px}
.site-header__top, .header-inner{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.site-branding__lead{margin:0; font-size:.78rem; color:var(--muted); letter-spacing:.18em; text-transform:uppercase}
.site-branding__title, .logo{margin:.1em 0 .2em; font-size:1.6rem; font-weight:800}
.site-branding__title a, .logo a{
  background:linear-gradient(90deg,#a78bfa,#22d3ee,#f472b6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-decoration:none;
}
.site-branding__description{margin:0; color:var(--muted); font-size:.9rem}
.site-header__user, .main-nav{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.site-header__welcome, .nav-greeting{margin:0; color:var(--muted); font-size:.9rem}
.site-header__status{
  margin:.3em 0 0; display:inline-block; padding:3px 10px; border-radius:999px;
  background:linear-gradient(90deg, rgba(124,92,255,.25), rgba(34,211,238,.25));
  border:1px solid rgba(124,92,255,.5); color:#dfe5ff; font-size:.78rem;
}
.global-nav{margin-top:14px}
.global-nav__list, .main-nav ul{list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:0}
.global-nav__item a, .main-nav a{
  display:inline-block; padding:8px 14px; border-radius:10px;
  color:#cdd6ff; font-size:.92rem; transition:all .2s;
  border:1px solid transparent;
}
.global-nav__item a:hover, .main-nav a:hover{
  background:rgba(124,92,255,.15); border-color:rgba(124,92,255,.4); color:#fff;
}
.global-nav__item a.active{
  background:linear-gradient(90deg, rgba(124,92,255,.35), rgba(34,211,238,.25));
  border-color:rgba(124,92,255,.6); color:#fff;
}

/* Main / Card */
.site-main, main{padding:40px 0 80px}
.card, section{
  background:var(--panel);
  backdrop-filter: blur(12px);
  border:1px solid var(--line);
  border-radius:var(--radius); padding:26px;
  box-shadow:var(--shadow); margin-bottom:22px;
}
section h2{border-left:3px solid var(--accent); padding-left:12px}

/* Hero */
.hero{
  text-align:center; padding:80px 24px;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(124,92,255,.4), transparent 70%),
    linear-gradient(135deg, rgba(34,211,238,.12), rgba(255,92,200,.12));
  border:1px solid var(--line); border-radius:24px; margin-bottom:30px;
  box-shadow:var(--shadow);
}
.hero-title{
  font-size:clamp(1.8rem,4vw,3rem); margin-bottom:.5em;
  background:linear-gradient(90deg,#fff,#a78bfa,#22d3ee);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-lead{color:#cfd6f5; font-size:1.05rem}
.hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:24px}

/* Buttons */
button, .btn, .btn-primary, .btn-secondary, .btn-nav-primary{
  display:inline-block; padding:11px 22px; border-radius:12px;
  font:inherit; font-weight:600; cursor:pointer; text-decoration:none;
  border:1px solid transparent; transition:all .2s; letter-spacing:.02em;
}
button, .btn, .btn-primary, .btn-nav-primary{
  background:linear-gradient(90deg,#7c5cff,#22d3ee); color:#fff;
  box-shadow:0 8px 24px rgba(124,92,255,.35);
}
button:hover, .btn:hover, .btn-primary:hover, .btn-nav-primary:hover{
  transform:translateY(-1px); box-shadow:0 12px 30px rgba(124,92,255,.55);
  color:#fff;
}
.btn-secondary{
  background:rgba(255,255,255,.06); color:#e7ecff; border:1px solid var(--line);
}
.btn-secondary:hover{background:rgba(255,255,255,.12); color:#fff}
.btn-danger{background:linear-gradient(90deg,#ff5c8a,#ff8a5c); box-shadow:0 8px 24px rgba(255,92,138,.35)}

/* Forms */
form input, form textarea, form select, input[type=text], input[type=email], input[type=password], input[type=tel], textarea, select{
  width:100%; padding:11px 14px; margin:6px 0 14px;
  background:rgba(10,14,32,.6); color:#fff;
  border:1px solid var(--line); border-radius:10px; font:inherit;
  transition:all .2s;
}
form input:focus, form textarea:focus, form select:focus, input:focus, textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,92,255,.25);
}
label{color:#cdd6ff; font-weight:600; font-size:.92rem}
.required{color:var(--err); margin-left:4px}
.form-group{margin-bottom:8px}

/* Tables */
table{width:100%; border-collapse:collapse; background:transparent}
th, td{padding:11px 12px; text-align:left; border-bottom:1px solid var(--line)}
th{background:rgba(124,92,255,.15); color:#fff; font-weight:700; font-size:.88rem; letter-spacing:.05em}
tr:hover td{background:rgba(255,255,255,.03)}

/* Alerts */
.alert, .flash-message, .message, .error, .success{
  padding:14px 18px; border-radius:12px; margin:14px 0;
  border:1px solid var(--line); backdrop-filter:blur(8px);
}
.alert.error, .flash-message--error, .error{background:rgba(255,107,129,.12); border-color:rgba(255,107,129,.4); color:#ffd0d8}
.alert.success, .flash-message--success, .success, .message{background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.4); color:#c4f5e0}
.flash-message--info{background:rgba(34,211,238,.12); border-color:rgba(34,211,238,.4); color:#cff6fb}
.flash-message--warning{background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.4); color:#fde9b3}

/* Steps / Grid / Cards */
.section{margin:30px 0}
.section-title{text-align:center; font-size:1.5rem; margin-bottom:30px}
.steps{list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.steps li{background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:18px}
.steps li strong{color:#a78bfa; display:block; margin-bottom:6px}

.price-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.price-card{
  background:linear-gradient(160deg, rgba(124,92,255,.18), rgba(34,211,238,.1));
  border:1px solid rgba(124,92,255,.35); border-radius:18px; padding:26px; text-align:center;
}
.price-card .price{font-size:2.2rem; font-weight:800; color:#fff; margin:10px 0}
.price-card .price span{font-size:.9rem; color:var(--muted)}
.price-card ul{list-style:none; padding:0; text-align:left}
.price-card ul li::before{content:"✓ "; color:var(--ok); font-weight:700}

.category-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px}
.category-item{
  background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:16px;
  transition:all .25s;
}
.category-item:hover{transform:translateY(-2px); border-color:rgba(124,92,255,.5); box-shadow:0 10px 30px rgba(124,92,255,.25)}
.category-item h4{margin:0 0 6px; color:#fff}
.category-item .freq{color:#22d3ee; font-size:.85rem; margin:2px 0}
.category-item .desc{color:var(--muted); font-size:.88rem}

.feature-links{list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px}
.feature-links li{background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:12px 14px}

/* DL list */
dl{display:grid; grid-template-columns:200px 1fr; gap:8px 18px; margin:14px 0}
dt{color:var(--muted); font-size:.88rem; padding-top:4px}
dd{margin:0; padding:4px 0; border-bottom:1px solid var(--line)}

/* Footer */
.site-footer{
  margin-top:50px; padding:30px 0; text-align:center;
  background:rgba(7,10,24,.6); border-top:1px solid var(--line); color:var(--muted);
}
.footer-inner{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; max-width:1080px; margin:0 auto; padding:0 22px; text-align:left}
.footer-logo{font-size:1.2rem; font-weight:800; background:linear-gradient(90deg,#a78bfa,#22d3ee); -webkit-background-clip:text; background-clip:text; color:transparent}
.footer-nav ul{list-style:none; padding:0; margin:.5em 0}
.footer-nav li{margin:.3em 0}
.footer-copy{margin-top:10px; font-size:.82rem}

/* Badge */
.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:700}
.badge-active{background:rgba(52,211,153,.2); color:#86efac; border:1px solid rgba(52,211,153,.5)}
.badge-inactive{background:rgba(148,163,184,.18); color:#cbd5e1; border:1px solid rgba(148,163,184,.4)}
.badge-trial{background:rgba(251,191,36,.18); color:#fde68a; border:1px solid rgba(251,191,36,.5)}
.badge-pending{background:rgba(251,191,36,.18); color:#fde68a; border:1px solid rgba(251,191,36,.5)}
.badge-completed{background:rgba(52,211,153,.2); color:#86efac; border:1px solid rgba(52,211,153,.5)}
.badge-failed{background:rgba(255,107,129,.2); color:#ffb7c0; border:1px solid rgba(255,107,129,.5)}

@media (max-width:640px){
  dl{grid-template-columns:1fr}
  dt{padding-top:10px}
  .hero{padding:50px 18px}
  section, .card{padding:18px}
}