:root{--border:#243048;--fg:#e7ecf5;--muted:#9fb0cc;--bg:#0b1020;--primary:#3b82f6}

*{box-sizing:border-box}

html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,Segoe UI,Apple SD Gothic Neo,Malgun Gothic,sans-serif}

a{color:inherit;text-decoration:none}

img{max-width:100%;display:block}

.container{max-width:1100px;margin:0 auto;padding:0 16px}

.site-header{border-bottom:1px solid var(--border);position:sticky;top:0;background:#0b1020e6;backdrop-filter:saturate(1.2) blur(8px);z-index:50}

.brand{font-weight:800;padding:12px 0;display:inline-block}

.nav{display:flex;gap:10px;align-items:center}

.section{padding:32px 0}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}

.card{border:1px solid var(--border);border-radius:12px;padding:14px}

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

.footer-grid{display:flex;gap:20px;justify-content:space-between;align-items:flex-start;padding:20px 0}

.links a{display:inline-block;margin-right:12px;color:#9fb0cc}

.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 14px;border-radius:12px;font-weight:700;letter-spacing:.2px;border:1px solid transparent;cursor:pointer;transition:transform .06s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease;user-select:none;-webkit-tap-highlight-color:transparent}

.btn:active{transform:translateY(1px)}

.btn-row{display:flex;gap:8px;flex-wrap:wrap}

:root{--btn-fg:#eaf1ff;--btn-bg:#1a2640;--btn-border:#2a3b63;--btn-primary:#3b82f6;--btn-primary-ink:#ffffff;--btn-hover:#223158;--ring:#4f8cff55}

.btn-primary{color:var(--btn-primary-ink);background:linear-gradient(180deg,#4a8df9 0%,#3b82f6 100%);border-color:#2b5fcc;box-shadow:0 6px 18px rgba(59,130,246,.28),inset 0 1px 0 rgba(255,255,255,.12)}

.btn-primary:hover{background:linear-gradient(180deg,#5a9bff 0%,#4b8cff 100%)}

.btn-primary:focus{outline:0;box-shadow:0 0 0 4px var(--ring)}

.btn-outline{color:var(--btn-fg);background:var(--btn-bg);border-color:var(--btn-border)}

.btn-outline:hover{background:var(--btn-hover);border-color:#3a4f80}

.btn-outline:focus{outline:0;box-shadow:0 0 0 4px var(--ring)}

.btn-ghost{color:#c7d7ff;background:transparent;border-color:transparent}

.btn-ghost:hover{background:rgba(255,255,255,.06)}

.btn-ghost:focus{outline:0;box-shadow:0 0 0 4px var(--ring)}

.btn-tab{color:#cfe3ff;background:transparent;border:1px solid #2a3b63;border-radius:999px;padding:0 16px;height:40px}

.btn-tab:hover{background:#17213b}

.btn-tab.is-active{color:#0a1224;background:#9ec1ff;border-color:#9ec1ff}

.hamburger{position:relative;width:40px;height:40px;border:1px solid var(--border);border-radius:10px;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .5s ease;z-index:100}

.hamburger:active{transform:scale(.98)}

.hamburger .bar{position:absolute;display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .7s ease,opacity .5s ease,top .7s ease}

.hamburger .bar:nth-child(1){top:13px}

.hamburger .bar:nth-child(2){top:19px}

.hamburger .bar:nth-child(3){top:25px}

.hamburger.is-open .bar:nth-child(1){top:19px;transform:rotate(45deg)}

.hamburger.is-open .bar:nth-child(2){opacity:0}

.hamburger.is-open .bar:nth-child(3){top:19px;transform:rotate(-45deg)}

#menu-btn{display:inline-flex !important;visibility:visible !important;z-index:100;float:right}

#site-nav{transition:max-height .7s ease,opacity .5s ease,transform .6s ease;}

@media (max-width:860px){

  .nav{flex-direction:column;align-items:flex-start}

  #site-nav{overflow:hidden;max-height:0;opacity:0;transform:translateY(-6px)}

  #site-nav.open{max-height:420px;opacity:1;transform:translateY(0)}

  #site-nav a,#site-nav form{display:block;margin:8px 0}

}

.tab-panel{display:none;}

.tab-panel.is-active{display:block}

html{scroll-behavior:smooth}

html,body{height:auto;overflow:auto}

body.nav-lock{overflow:hidden}

.form{max-width:420px;margin:0 auto}

.form-row{margin-bottom:14px}

.form-label{display:block;margin-bottom:6px;color:#cfe3ff;font-weight:700;font-size:14px}

.input{width:100%;height:44px;padding:0 12px;border-radius:12px;background:#0d152c;color:#e7ecf5;border:1px solid #243048;outline:none;transition:border-color .2s ease, box-shadow .2s ease, background .2s ease}

.input::placeholder{color:#9fb0cc}

.input:focus{border-color:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.25)}

.input[aria-invalid="true"]{border-color:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.25)}

.textarea{width:100%;min-height:120px;padding:12px;border-radius:12px;background:#0d152c;color:#e7ecf5;border:1px solid #243048;resize:vertical;outline:none;transition:border-color .2s ease, box-shadow .2s ease}

.textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.25)}

.input-group{display:flex;gap:8px;align-items:center}

.input-addon{padding:0 10px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:#0b1020;border:1px solid #243048;border-radius:12px;color:#9fb0cc;white-space:nowrap}

.help{margin-top:6px;color:#9fb0cc;font-size:12px}

.error{margin-top:6px;color:#ff9aa2;font-size:12px}

.form-actions{display:flex;gap:8px;margin-top:12px}

.btn-submit{min-width:120px}

.auth-card{border:1px solid #243048;border-radius:14px;padding:18px;background:#0b1020cc;backdrop-filter:saturate(1.1) blur(6px)}

.separator{display:flex;align-items:center;gap:10px;margin:14px 0;color:#9fb0cc;font-size:12px}

.separator::before,.separator::after{content:"";flex:1;height:1px;background:#243048;border-radius:1px}

.checkbox{display:flex;align-items:center;gap:8px}

.checkbox input[type="checkbox"]{width:16px;height:16px;accent-color:#3b82f6}

.hero{padding:32px 0}

.hero-grid{display:grid;grid-template-columns:1fr;gap:16px}
/* profile layout */

.profile-card {

  background:#fff; border:1px solid #eee; border-radius:16px;

  padding:16px; box-shadow:0 2px 10px rgba(0,0,0,.04);

}

.profile-row { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }

.profile-avatar-wrap { width:30px; height:30px; }

.profile-avatar {

  width:30px; height:30px; border-radius:12px; object-fit:cover; background:#f3f4f6;

}

.profile-avatar.placeholder { display:inline-block;width:30px; height:30px; border-radius:12px; background:#f3f4f6; }

.profile-info { min-width:220px; }

.profile-name { font-size:20px; font-weight:700; margin:0 0 4px; }

.small { font-size:12px; }

/* form */

.form-grid { display:grid; gap:12px; }

.form-field { display:grid; gap:6px; }

.label { font-size:13px; color:#6b7280; }

.input {

  width:100%; padding:12px; border:1px solid #e5e7eb; border-radius:10px; font-size:15px;

}

.input:focus { outline:none; border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.25); }

.preview-row { display:flex; align-items:center; gap:12px; margin-top:6px; }

.alert.error {

  background:#fee2e2; color:#991b1b; border:1px solid #fecaca;

  padding:10px 12px; border-radius:10px; margin-bottom:8px;

}

/* responsive */

@media (min-width: 768px) {

  .profile-row { gap:10px; }

}
.hero-text h1{margin:0 0 6px 0}
.avatar-mini{width:35px;height:35px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-left:8px}