:root{
  --profile-bg:#03060b;
  --profile-panel:#08101a;
  --profile-panel-strong:#0b1522;
  --profile-line:#1d2b3d;
  --profile-line-strong:#31445e;
  --profile-text:#f7f9ff;
  --profile-muted:#8492a7;
  --profile-cyan:#31d7d6;
  --profile-pink:#ff3685;
  --profile-gold:#ffbd45;
  --profile-green:#21db8b;
}

html{background:var(--profile-bg)}
body{
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 8% -8%,rgba(26,90,135,.2),transparent 34rem),
    radial-gradient(circle at 96% 12%,rgba(255,54,133,.09),transparent 30rem),
    linear-gradient(145deg,#07101d 0%,#03060b 44%,#08060e 100%);
  color:var(--profile-text);
  font-family:Kanit,sans-serif;
  font-weight:300;
}

#global-back-btn{display:none!important}
.profile-navbar{
  width:min(1380px,calc(100% - 32px));
  margin:14px auto 0;
  border:1px solid var(--profile-line);
  border-radius:16px;
  background:rgba(4,8,15,.88);
  backdrop-filter:blur(18px);
}

.profile-boot,.profile-login-required{
  width:min(560px,calc(100% - 32px));
  min-height:300px;
  margin:72px auto;
  padding:42px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:10px;
  text-align:center;
  border:1px solid var(--profile-line);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(14,23,37,.96),rgba(6,10,17,.96));
  box-shadow:0 32px 80px rgba(0,0,0,.28);
}
.profile-boot[hidden],.profile-login-required[hidden]{display:none}
.profile-boot__mark,.profile-login-required__icon{
  width:58px;height:58px;display:grid;place-items:center;border-radius:17px;
  background:linear-gradient(145deg,var(--profile-pink),#6f1d4c);
  font-size:18px;font-weight:700;box-shadow:0 12px 34px rgba(255,54,133,.2);
}
.profile-login-required__icon{background:#131d2c;font-size:25px;box-shadow:none}
.profile-boot strong,.profile-login-required h1{margin:5px 0 0;font-size:25px;font-weight:700}
.profile-boot p,.profile-login-required p{margin:0;color:var(--profile-muted);font-size:15px}

.profile-hub{width:min(1250px,calc(100% - 32px));margin:22px auto 64px}
.profile-hub[hidden]{display:none}
.profile-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:16px;margin-top:16px;align-items:start}

.profile-identity{
  position:relative;
  min-height:200px;
  display:grid;
  grid-template-columns:126px minmax(0,1fr) auto;
  align-items:end;
  gap:20px;
  padding:30px;
  overflow:hidden;
  isolation:isolate;
  border:1px solid var(--profile-line);
  border-radius:22px;
  background:
    linear-gradient(100deg,rgba(3,7,13,.97) 0%,rgba(10,14,25,.82) 44%,rgba(3,7,13,.54)),
    var(--profile-banner-image,none) right 28%/cover;
  box-shadow:0 24px 80px rgba(0,0,0,.24);
}
.profile-identity:after{
  content:"";position:absolute;inset:auto 0 0;z-index:-1;height:60%;
  background:linear-gradient(transparent,#050910);pointer-events:none;
}
.profile-avatar{
  position:relative;z-index:1;width:126px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;
  border:3px solid rgba(49,215,214,.48);border-radius:31px;
  background:linear-gradient(145deg,var(--profile-pink),#2e244b 62%,var(--profile-cyan));
  box-shadow:0 20px 60px rgba(0,0,0,.48);font-size:38px;font-weight:700;
}
.profile-avatar img{width:100%;height:100%;display:block;object-fit:cover}
.profile-identity__copy,.profile-identity__actions{position:relative;z-index:1}
.profile-identity__actions [hidden]{display:none}
.profile-eyebrow{margin:0;color:#8df1ed;font-size:11px;font-weight:700;letter-spacing:.13em}
.profile-identity h1{margin:3px 0 2px;overflow-wrap:anywhere;font-size:34px;font-weight:700;line-height:1.2}
.profile-handle{display:block;color:#a4afbf;font-size:14px}
.profile-identity__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.profile-role{
  width:max-content;margin:0;padding:5px 9px;border:1px solid rgba(49,215,214,.24);border-radius:999px;
  background:rgba(49,215,214,.08);color:#aaf5f2;font-size:11px;font-weight:700;
}
.profile-role--premium{border-color:rgba(255,189,69,.3);background:rgba(255,189,69,.1);color:#ffda87}
.profile-identity__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px}

.profile-hub__sidebar,.profile-hub__main,.profile-hub__tools>*{
  border:1px solid var(--profile-line);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(11,20,33,.98),rgba(5,9,15,.98));
}
.profile-hub__sidebar{position:sticky;top:18px;overflow:hidden;padding:10px}
.profile-hub__main{min-width:0;overflow:hidden}
.profile-mobile-nav{display:none}

.profile-nav{display:grid;gap:4px}
.profile-nav [hidden]{display:none}
.profile-nav small{padding:9px 10px 4px;color:#64738a;font-size:10px;font-weight:700;letter-spacing:.11em}
.profile-nav button{
  min-height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;border:0;border-radius:11px;
  background:transparent;color:#98a7bb;font:300 14px/1.4 Kanit,sans-serif;cursor:pointer;text-align:left;
}
.profile-nav button>span{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;background:#111d2c;color:#8190a4}
.profile-nav button:is(:hover,:focus-visible){color:#fff;background:#0e1926;outline:2px solid rgba(49,215,214,.45);outline-offset:-2px}
.profile-nav button[aria-current="page"]{color:#fff;background:#111d2b;font-weight:700}
.profile-nav button[aria-current="page"]>span{background:linear-gradient(145deg,var(--profile-pink),#8d377e);color:#fff}
.profile-wallet{
  display:grid;gap:2px;margin:10px 0 4px;padding:13px;border:1px solid rgba(255,189,69,.25);border-radius:12px;
  background:rgba(255,189,69,.06);color:inherit;text-decoration:none;
}
.profile-wallet span{color:#9ba7b7;font-size:11px}.profile-wallet strong{color:var(--profile-gold);font-size:19px}
.profile-wallet i{font-style:normal}.profile-wallet em{color:#ffda87;font-size:11px;font-style:normal}
.profile-logout{
  width:100%;min-height:42px;margin-top:5px;border:1px solid rgba(255,54,133,.2);border-radius:10px;
  background:rgba(255,54,133,.05);color:#ff91bd;font:300 14px Kanit,sans-serif;cursor:pointer;
}
.profile-logout:hover{background:rgba(255,54,133,.12)}

.profile-view{min-height:380px;padding:16px}
.profile-view__head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:14px}
.profile-view__head h2{margin:0;color:#fff;font-size:23px;font-weight:700}.profile-view__head p{margin:3px 0 0;color:var(--profile-muted);font-size:13px}

.profile-list{display:grid;gap:10px}
.profile-row{
  min-height:76px;display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px;
  border:1px solid rgba(145,167,197,.18);border-radius:13px;background:rgba(9,14,23,.78);color:inherit;text-decoration:none;
}
.profile-row:hover{border-color:rgba(49,215,214,.42);background:rgba(13,23,35,.9)}
.profile-row__cover{width:58px;height:58px;overflow:hidden;border-radius:9px;background:linear-gradient(145deg,#c52557,#16253c)}
.profile-row__cover img{width:100%;height:100%;display:block;object-fit:cover}
.profile-row__body{min-width:0}.profile-row__body strong,.profile-row__body span,.profile-row__body small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-row__body strong{font-size:16px;font-weight:700}.profile-row__body span{margin-top:2px;color:#b7c1d0;font-size:13px}.profile-row__body small{margin-top:2px;color:#7f8ca0;font-size:12px}
.profile-row__action{padding:7px 10px;border-radius:8px;background:rgba(49,215,214,.1);color:#75e9e5;font-size:12px;font-weight:700}

.profile-continue{
  display:grid;grid-template-columns:156px minmax(0,1fr) auto;gap:18px;align-items:center;margin-bottom:12px;padding:16px;
  overflow:hidden;border:1px solid rgba(49,215,214,.28);border-radius:16px;
  background:linear-gradient(100deg,rgba(255,54,133,.12),rgba(11,19,31,.97) 44%,rgba(49,215,214,.08));
}
.profile-continue__cover{width:156px;aspect-ratio:3/4;overflow:hidden;border-radius:13px;background:#101a28}
.profile-continue__cover img{width:100%;height:100%;display:block;object-fit:cover}
.profile-continue__copy{min-width:0}.profile-continue__copy>small{color:#8df1ed;font-size:10px;font-weight:700;letter-spacing:.11em}
.profile-continue h3{margin:4px 0 2px;color:#fff;font-size:25px;font-weight:700}.profile-continue p{margin:0;color:#9aa8ba;font-size:13px}
.profile-continue__progress{height:6px;margin:14px 0 7px;overflow:hidden;border-radius:999px;background:#1b283a}
.profile-continue__progress i{display:block;width:68%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--profile-pink),var(--profile-cyan))}
.profile-continue__meta{display:flex;justify-content:space-between;gap:10px;color:#8492a7;font-size:11px}
.profile-continue__actions{display:grid;gap:8px;min-width:128px}

.profile-overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.profile-stat{padding:14px;border:1px solid var(--profile-line);border-radius:13px;background:#09121e}
.profile-stat strong{display:block;color:#fff;font-size:24px;font-weight:700}.profile-stat span{display:block;margin-top:2px;color:var(--profile-muted);font-size:11px}
.profile-stat:nth-child(1) strong{color:#91f0ed}.profile-stat:nth-child(2) strong{color:#ff8bb9}.profile-stat:nth-child(3) strong{color:#ffda87}

.profile-overview-lower{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,.7fr);gap:12px}
.profile-activity-panel{padding:16px;border:1px solid var(--profile-line);border-radius:16px;background:#07101a}
.profile-reading-trail{position:relative;display:grid;gap:9px;margin-left:7px;padding-left:22px}
.profile-reading-trail:before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--profile-pink),var(--profile-cyan))}
.profile-reading-trail .profile-row{position:relative}
.profile-reading-trail .profile-row:before{
  content:"";position:absolute;left:-24px;width:10px;height:10px;border:2px solid #09121e;border-radius:50%;background:var(--profile-cyan);
}
.profile-reading-trail .profile-row:first-child:before{background:var(--profile-pink)}

.profile-hub__tools{display:grid;align-self:start;gap:9px}
.profile-hub__tools[hidden]{display:none}
.profile-tool-card{padding:14px}.profile-tool-card__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.profile-tool-card__head span,.profile-tool-card>strong{color:#fff;font-size:14px;font-weight:700}.profile-tool-card__head strong{color:#90f3ef;font-size:15px}
.profile-tool-card p{margin:8px 0 12px;color:var(--profile-muted);font-size:12px;line-height:1.6}
.profile-progress{height:7px;margin:10px 0 0;overflow:hidden;border-radius:999px;background:#1b2635}
.profile-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--profile-pink),var(--profile-cyan));transition:width .24s ease}

.profile-premium-pass,.profile-role-actions{display:grid;gap:9px;padding:14px}
.profile-premium-pass{margin:-14px -14px 0;border-bottom:1px solid var(--profile-line);border-radius:18px 18px 0 0;background:linear-gradient(135deg,rgba(255,189,69,.08),rgba(255,54,133,.08) 52%,rgba(49,215,214,.08))}
.profile-premium-pass.is-active{background:linear-gradient(135deg,rgba(255,189,69,.14),rgba(255,54,133,.09) 48%,rgba(49,215,214,.13))}
.profile-premium-pass__badge{width:max-content;padding:4px 8px;border:1px solid rgba(255,189,69,.3);border-radius:999px;color:var(--profile-gold);font-size:10px;font-weight:700;letter-spacing:.08em}
.profile-premium-pass>strong,.profile-role-actions>strong{color:#fff;font-size:15px;font-weight:700}
.profile-premium-pass>p,.profile-role-actions>p{margin:0;color:var(--profile-muted);font-size:12px;line-height:1.65}
.profile-button--premium{border-color:rgba(255,189,69,.34);background:linear-gradient(100deg,rgba(255,189,69,.2),rgba(255,54,133,.16));color:#ffe0a3}
.profile-button--premium:hover{border-color:var(--profile-gold);color:#fff}

.profile-button{
  min-height:42px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1px solid var(--profile-line-strong);
  border-radius:10px;background:#101927;color:#fff;font:700 14px Kanit,sans-serif;text-decoration:none;cursor:pointer;
}
.profile-button:hover,.profile-button:focus-visible{border-color:var(--profile-cyan);outline:2px solid rgba(49,215,214,.22);outline-offset:2px}
.profile-button--primary{border-color:transparent;background:linear-gradient(100deg,var(--profile-cyan),#42d5ab);color:#061014}
.profile-button--pink{border-color:transparent;background:linear-gradient(100deg,var(--profile-pink),#bd55e6);color:#fff}

.profile-skeleton{min-height:76px;margin-bottom:10px;border-radius:13px;background:linear-gradient(90deg,#111927 25%,#1c2738 50%,#111927 75%);background-size:200% 100%;animation:profile-shimmer 1.2s linear infinite}
@keyframes profile-shimmer{to{background-position:-200% 0}}
.profile-empty,.profile-error{padding:32px 18px;text-align:center;border:1px dashed rgba(145,167,197,.25);border-radius:14px;color:#98a5b8}
.profile-empty strong,.profile-error strong{display:block;margin-bottom:5px;color:#fff;font-size:18px;font-weight:700}.profile-error{border-color:rgba(255,54,133,.45);color:#ffb0d0}
.profile-load-more{width:100%;min-height:46px;margin-top:12px;border:1px solid var(--profile-line-strong);border-radius:11px;background:#0c1420;color:#cbd5e2;font:700 14px Kanit,sans-serif;cursor:pointer}
.profile-load-more:hover{border-color:var(--profile-cyan);color:#fff}

.profile-form{display:grid;gap:14px}.profile-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.profile-field{display:grid;gap:6px}.profile-field--wide{grid-column:1/-1}.profile-field label{color:#d7dde7;font-size:13px;font-weight:700}.profile-field small{color:#77869b;font-size:11px}
.profile-form input,.profile-form textarea,.profile-form select{width:100%;min-height:46px;border:1px solid rgba(145,167,197,.24);border-radius:11px;background:#090e17;color:#fff;font:300 15px/1.5 Kanit,sans-serif;padding:10px 12px}
.profile-form textarea{min-height:110px;resize:vertical}.profile-form input:focus,.profile-form textarea:focus,.profile-form select:focus{border-color:var(--profile-cyan);outline:2px solid rgba(49,215,214,.12)}
.profile-form-actions{display:flex;flex-wrap:wrap;gap:9px}
.profile-settings-section{margin-bottom:16px;padding:16px;border:1px solid var(--profile-line);border-radius:14px;background:#09101a}
.profile-settings-section h3{margin:0 0 3px;color:#fff;font-size:18px;font-weight:700}.profile-settings-section>p{margin:0 0 14px;color:var(--profile-muted);font-size:12px}
.profile-upload-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.profile-bank-status{margin-bottom:14px;padding:13px;border:1px solid rgba(255,189,69,.28);border-radius:12px;background:rgba(255,189,69,.06)}
.profile-bank-status strong,.profile-bank-status span{display:block}.profile-bank-status strong{color:#fff;font-weight:700}.profile-bank-status span{margin-top:3px;color:#b6c1d1;font-size:12px}
.profile-public-link{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}.profile-public-link input{min-width:0;min-height:44px;padding:9px 12px;border:1px solid rgba(145,167,197,.24);border-radius:10px;background:#090e17;color:#aeb9ca;font:300 13px/1.4 Kanit,sans-serif}
.profile-bank-slot>.profile-skeleton{min-height:70px}.profile-bank-status[data-status="approved"]{border-color:rgba(49,215,214,.36);background:rgba(49,215,214,.08)}.profile-bank-status[data-status="rejected"]{border-color:rgba(255,54,133,.4);background:rgba(255,54,133,.07)}
.profile-settings-section form[hidden]{display:none}.profile-form button:disabled,.profile-public-link button:disabled{cursor:wait;opacity:.6}

.profile-toast{position:fixed;right:20px;bottom:20px;z-index:30;max-width:min(360px,calc(100% - 40px));padding:12px 16px;border-radius:12px;background:#111a28;color:#fff;box-shadow:0 16px 50px rgba(0,0,0,.4);opacity:0;pointer-events:none;transform:translateY(10px);transition:.18s ease}
.profile-toast[data-visible="true"]{opacity:1;transform:none}.profile-toast[data-type="error"]{border:1px solid var(--profile-pink)}.profile-toast[data-type="success"]{border:1px solid var(--profile-cyan)}

@media(max-width:900px){
  .profile-identity{grid-template-columns:104px minmax(0,1fr);min-height:184px;padding:24px}
  .profile-avatar{width:104px;border-radius:26px}
  .profile-identity__actions{grid-column:1/-1;justify-content:flex-start}
  .profile-overview-lower{grid-template-columns:1fr}
  .profile-hub__tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-tool-card:first-child{grid-column:1/-1}
}

@media(max-width:720px){
  .profile-navbar{width:calc(100% - 20px);margin-top:8px}.profile-navbar .navbar-links{display:none}
  .profile-hub{width:min(100% - 16px,680px);margin-top:8px}
  .profile-identity{min-height:160px;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:16px;border-radius:17px}
  .profile-avatar{width:72px;border-width:2px;border-radius:19px;font-size:24px}
  .profile-identity h1{font-size:21px}.profile-handle{font-size:11px}.profile-eyebrow{font-size:9px}
  .profile-identity__chips{margin-top:6px}.profile-role{padding:3px 7px;font-size:9px}
  .profile-identity__actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.profile-identity__actions .profile-button{min-width:0;padding:0 8px;font-size:12px}
  .profile-layout{display:block;margin-top:9px}.profile-hub__sidebar{display:none}
  .profile-mobile-nav{display:grid;gap:6px;padding:10px;border-bottom:1px solid var(--profile-line);color:#8cf0ed;font-size:11px;font-weight:700}
  .profile-mobile-nav select{width:100%;min-height:46px;padding:0 12px;border:1px solid var(--profile-line);border-radius:12px;background:#09121e;color:#fff;font:700 14px Kanit,sans-serif}
  .profile-view{padding:10px}
  .profile-continue{grid-template-columns:92px minmax(0,1fr);gap:11px;padding:10px;border-radius:15px}
  .profile-continue__cover{width:92px}.profile-continue h3{font-size:18px}.profile-continue p{font-size:11px}
  .profile-continue__progress{margin:9px 0 5px}.profile-continue__meta{display:block}
  .profile-continue__actions{grid-column:2;grid-template-columns:1fr 1fr;min-width:0}.profile-continue__actions .profile-button{min-height:36px;padding:0 8px;font-size:11px}
  .profile-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.profile-stat{padding:11px}.profile-stat strong{font-size:19px}
  .profile-overview-lower{grid-template-columns:1fr;gap:8px}.profile-activity-panel{padding:11px}
  .profile-reading-trail{margin-left:2px;padding-left:17px}.profile-reading-trail .profile-row:before{left:-19px}
  .profile-row{grid-template-columns:48px minmax(0,1fr);min-height:68px}.profile-row__cover{width:48px;height:48px}.profile-row__action{grid-column:2;width:max-content}
  .profile-hub__tools{grid-template-columns:1fr;gap:7px}.profile-tool-card:first-child{grid-column:auto}
  .profile-view__head h2{font-size:19px}
  .profile-form-grid{grid-template-columns:1fr}.profile-field--wide{grid-column:auto}.profile-upload-row,.profile-public-link{grid-template-columns:1fr}.profile-public-link .profile-button{width:100%}
  .profile-toast{right:10px;bottom:calc(72px + env(safe-area-inset-bottom));max-width:calc(100% - 20px)}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}