/* =========================================================
   NINZY CORE — extras9.css  (batch 14: 30 fitur Premium Profil)
   ========================================================= */
.cx9-modal{max-height:88vh;overflow-y:auto;}

/* ---------- pratinjau & pilihan ---------- */
.x9-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;}
.x9-opt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:12px;border:1px solid var(--line-soft);background:rgba(255,255,255,.04);color:var(--paper);cursor:pointer;font:inherit;}
.x9-opt small{font-size:11px;color:var(--paper-dim);text-align:center;line-height:1.25;}
.x9-opt.on{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass);}
.x9-prev{min-height:48px;display:flex;align-items:center;justify-content:center;font-size:20px;}
.x9-sw{display:inline-block;width:46px;height:46px;border-radius:50%;background:#3a332a;border:1px solid rgba(255,255,255,.08);}
.x9-sw[class*="x9c-"]{border-radius:10px;}
.x9-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px;}
.x9-actions .btn{width:auto;}
.x9-f{display:block;margin:10px 0;}
.x9-f>span{display:block;font-size:12.5px;color:var(--paper-dim);margin-bottom:5px;}
.x9-f input[type="text"],.x9-f input[type="url"],.x9-f input[type="number"],.x9-f textarea{width:100%;box-sizing:border-box;background:var(--ink-3,#26221b);border:1px solid var(--line-soft);border-radius:10px;color:var(--paper);padding:10px 12px;font:inherit;}
.x9-f textarea{resize:vertical;}
.x9-f input[type="color"]{width:100%;height:44px;border:1px solid var(--line-soft);border-radius:10px;background:transparent;padding:2px;}
.x9-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.x9-toggle{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--paper-dim);}
.x9-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:6px;}
.x9-swatch{aspect-ratio:1;border-radius:50%;border:2px solid transparent;cursor:pointer;}
.x9-swatch.on{border-color:#fff;box-shadow:0 0 0 2px var(--brass);}
.x9-emojis{display:flex;flex-wrap:wrap;gap:6px;}
.x9-emojis button{font-size:22px;padding:6px 9px;border-radius:10px;border:1px solid var(--line-soft);background:rgba(255,255,255,.04);cursor:pointer;}
.x9-emojis button.on{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass);}
.x9-bnprev{height:96px;border-radius:12px;background:var(--ink-3,#26221b) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--paper-dim);font-size:13px;margin-bottom:6px;}
.x9-cardprev{text-align:center;} .x9-cardprev img{max-width:100%;max-height:52vh;border-radius:12px;border:1px solid var(--line-soft);}
.x9-listbox{margin:4px 0 8px;}
.x9-li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft);margin-bottom:6px;font-size:13px;}
.x9-li small{color:var(--paper-dim);word-break:break-all;}
.x9-li button{background:none;border:0;color:var(--paper-dim);cursor:pointer;font-size:15px;}
.x9-li--pick{justify-content:flex-start;cursor:pointer;}
.x9-li--pick span{min-width:0;}

/* ---------- Studio ---------- */
.x9-list{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.x9-row{display:flex;align-items:center;gap:10px;text-align:left;width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line-soft);background:rgba(255,255,255,.04);color:var(--paper);cursor:pointer;font:inherit;}
.x9-row__ico{font-size:22px;flex:0 0 auto;}
.x9-row__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.x9-row__t b{font-size:13.5px;} .x9-row__t small{font-size:11.5px;color:var(--paper-dim);line-height:1.35;}
.x9-row__go{color:var(--paper-dim);font-size:20px;}
.x9-studio-btn{border-color:var(--brass)!important;color:var(--brass)!important;}

/* ---------- bingkai avatar ---------- */
.x9f-emas{border-color:#2a2200!important;box-shadow:0 0 0 3px #e6b800,0 0 0 6px #7a5c00,0 0 16px rgba(230,184,0,.55)!important;}
.x9f-perak{border-color:#222!important;box-shadow:0 0 0 3px #cfd8dc,0 0 0 6px #78909c,0 0 14px rgba(207,216,220,.5)!important;}
.x9f-neon-biru{box-shadow:0 0 0 3px #29d8ff,0 0 14px 4px rgba(41,216,255,.8),inset 0 0 10px rgba(41,216,255,.5)!important;}
.x9f-neon-pink{box-shadow:0 0 0 3px #ff4fd8,0 0 14px 4px rgba(255,79,216,.8),inset 0 0 10px rgba(255,79,216,.5)!important;}
.x9f-sakura{box-shadow:0 0 0 3px #f8bbd0,0 0 0 6px #f06292,0 0 16px rgba(244,143,177,.6)!important;}
.x9f-api{box-shadow:0 0 0 3px #ff7a1a,0 0 0 6px #b71c1c,0 0 18px rgba(255,122,26,.75)!important;}
.x9f-es{box-shadow:0 0 0 3px #b3ecff,0 0 0 6px #4fc3f7,0 0 16px rgba(143,227,255,.7)!important;}
.x9f-merah{box-shadow:0 0 0 3px #e53935,0 0 0 6px #7f1010,0 0 16px rgba(229,57,53,.65)!important;}
.x9f-zamrud{box-shadow:0 0 0 3px #2ecc71,0 0 0 6px #0b6b3a,0 0 14px rgba(46,204,113,.6)!important;}
.x9f-ungu{box-shadow:0 0 0 3px #a66bff,0 0 0 6px #4a1d96,0 0 16px rgba(166,107,255,.65)!important;}
.x9f-ganda{box-shadow:0 0 0 3px #ffd54f,0 0 0 6px #14100d,0 0 0 9px #ffd54f!important;}
.x9f-hitam{box-shadow:0 0 0 3px #fff,0 0 0 6px #000,0 0 0 9px #fff!important;}

/* ---------- aura avatar ---------- */
.x9a-pulse{animation:x9pulse 2.6s ease-in-out infinite;}
@keyframes x9pulse{0%,100%{filter:drop-shadow(0 0 4px rgba(var(--accent-rgb,178,58,46),.55));}50%{filter:drop-shadow(0 0 16px rgba(var(--accent-rgb,178,58,46),.95));}}
.x9a-ungu{animation:x9vio 2.8s ease-in-out infinite alternate;}
@keyframes x9vio{from{filter:drop-shadow(0 0 6px #7e57c2);}to{filter:drop-shadow(0 0 18px #c7a8ff);}}
.x9a-api{animation:x9fire 1.3s ease-in-out infinite alternate;}
@keyframes x9fire{from{filter:drop-shadow(0 -2px 8px #ff5a1a);}to{filter:drop-shadow(0 -6px 18px #ffb300);}}
.x9a-es{animation:x9ice 3s ease-in-out infinite alternate;}
@keyframes x9ice{from{filter:drop-shadow(0 0 6px #7fd1ff);}to{filter:drop-shadow(0 0 18px #d8f4ff);}}
.x9a-emas{animation:x9gold 2.4s ease-in-out infinite alternate;}
@keyframes x9gold{from{filter:drop-shadow(0 0 6px #e6b800);}to{filter:drop-shadow(0 0 18px #fff1b8);}}

/* ---------- banner, kartu ---------- */
.profile-card__banner.x9-bn{background:var(--x9-bn) center/cover no-repeat!important;}
.x9c-kaca{background:rgba(255,255,255,.06)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-color:rgba(255,255,255,.2)!important;}
.x9c-neon{border-color:var(--x9-accent,#29d8ff)!important;box-shadow:0 0 0 1px var(--x9-accent,#29d8ff),0 0 22px rgba(41,216,255,.35)!important;}
.x9c-sepia{background:linear-gradient(160deg,#2b2218,#1a140d)!important;border-color:#6b5535!important;}
.x9c-ungu{background:linear-gradient(160deg,#1f1536,#120b22)!important;border-color:#5a3d99!important;}
.x9c-tengah{background:linear-gradient(180deg,#0d1230,#070a1c)!important;border-color:#26306b!important;}
.x9c-emas{border-color:#c9a227!important;box-shadow:0 0 0 1px #c9a227,0 6px 28px rgba(201,162,39,.25)!important;}

/* ---------- nama ---------- */
.x9n-serif{font-family:Georgia,"Times New Roman",serif!important;font-weight:800!important;}
.x9n-mono{font-family:ui-monospace,Menlo,Consolas,monospace!important;letter-spacing:-.02em;}
.x9n-caps{font-variant:small-caps;letter-spacing:.06em;font-weight:700!important;}
.x9n-outline{-webkit-text-stroke:1px var(--paper,#f2ebe0);color:transparent!important;-webkit-text-fill-color:transparent;}
.x9n-bulat{font-family:"Trebuchet MS","Segoe UI",sans-serif!important;font-weight:800!important;letter-spacing:.02em;}
.x9n-lebar{letter-spacing:.16em;font-weight:700!important;text-transform:uppercase;font-size:.85em!important;}
.x9fx-gradien{background:linear-gradient(90deg,#ffd27a,#ff8f5a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;}
.x9fx-kilau{background:linear-gradient(110deg,var(--paper,#f2ebe0) 30%,#fff 44%,#ffd27a 50%,#fff 56%,var(--paper,#f2ebe0) 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;animation:x9shine 3.2s linear infinite;}
@keyframes x9shine{from{background-position:120% 0;}to{background-position:-120% 0;}}
.x9fx-neon{color:#fff!important;text-shadow:0 0 6px var(--x9-accent,#4dc4ff),0 0 18px var(--x9-accent,#4dc4ff),0 0 30px var(--x9-accent,#4dc4ff);}
.x9fx-emas{background:linear-gradient(90deg,#b8860b,#ffe27a 50%,#b8860b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;}
.x9fx-api{background:linear-gradient(0deg,#ff3d00,#ffb300 70%,#fff1b8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;}
.x9n-outline.x9fx-gradien,.x9n-outline.x9fx-kilau,.x9n-outline.x9fx-emas,.x9n-outline.x9fx-api{-webkit-text-stroke:0;}

/* ---------- partikel ---------- */
.x9-has-part{position:relative;isolation:isolate;}
.x9-part{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1;}
.x9-part span{position:absolute;top:-10%;opacity:.45;line-height:1;animation:x9fall linear infinite;will-change:top,transform;}
@keyframes x9fall{0%{top:-10%;transform:translateX(0) rotate(0deg);}100%{top:105%;transform:translateX(26px) rotate(340deg);}}
.x9-part--bintang span{opacity:.6;color:#ffe08a;animation-name:x9twinkle;top:auto;}
@keyframes x9twinkle{0%,100%{opacity:.15;transform:scale(.7);}50%{opacity:.95;transform:scale(1.15);}}
.x9-part--bintang span:nth-child(3n){top:15%;} .x9-part--bintang span:nth-child(3n+1){top:45%;} .x9-part--bintang span:nth-child(3n+2){top:75%;}
.x9-part--gelembung span{color:rgba(143,227,255,.55);animation-name:x9rise;top:auto;bottom:-10%;}
@keyframes x9rise{0%{bottom:-10%;transform:translateX(0);}100%{bottom:105%;transform:translateX(-20px);}}
.x9-part--salju span{color:#e6f6ff;} .x9-part--hati span{color:#ff6b9a;}
@media (prefers-reduced-motion:reduce){.x9-part span,.x9a-pulse,.x9a-ungu,.x9a-api,.x9a-es,.x9a-emas,.x9fx-kilau{animation:none!important;}}

/* ---------- info di kartu ---------- */
.x9-title{margin:0 0 4px;color:var(--brass);font-size:13px;font-weight:700;}
.x9-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0;}
.x9-meta{width:100%;box-sizing:border-box;}
.x9-chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;padding:3px 10px;border-radius:999px;background:rgba(30,24,20,.92);border:1px solid var(--line-soft);color:var(--paper);text-decoration:none;line-height:1.4;}
.x9-chip button{background:none;border:0;color:var(--paper-dim);cursor:pointer;padding:0 0 0 2px;}
.x9-chip--lvl{border-color:var(--brass);color:var(--brass);}
.x9-chip--badge{border-color:rgba(var(--accent-rgb,201,162,39),.6);}
.x9-chip--link{color:var(--brass);}
.x9-chip--mood{background:rgba(var(--accent-rgb,201,162,39),.15);}
.x9-quote blockquote{margin:8px 0 0;padding:6px 12px;border-left:3px solid var(--brass);font-style:italic;font-size:13px;color:var(--paper-dim);text-align:left;}
.x9-quote p{margin:6px 0 0;font-size:12.5px;color:var(--paper-dim);}
@media(max-width:480px){.x9-meta,.x9-quote{text-align:center;} .x9-chips{justify-content:center;} .x9-quote blockquote{text-align:center;border-left:0;border-top:2px solid var(--brass);padding:8px 6px 0;}}

/* ---------- blok statistik & pamer ---------- */
.x9-block{overflow:hidden;}
.x9-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;}
.x9-bar i{display:block;height:100%;background:var(--grad,var(--brass));border-radius:99px;}
.x9-lvl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;}
.x9-lvl b{font-size:20px;color:var(--brass);} .x9-lvl span{font-size:13px;color:var(--paper-dim);}
.x9-lvl .x9-bar,.x9-lvl small{grid-column:1/-1;} .x9-lvl small{font-size:11.5px;color:var(--paper-dim);}
.x9-biglvl{text-align:center;margin-bottom:10px;} .x9-biglvl div{font-size:52px;font-weight:800;color:var(--brass);line-height:1;}
.x9-chips3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.x9-chips3>div{text-align:center;padding:10px 4px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line-soft);}
.x9-chips3 b{display:block;font-size:18px;color:var(--brass);} .x9-chips3 span{font-size:11px;color:var(--paper-dim);}
.x9-kv{margin-top:10px;} .x9-kv>div{display:flex;justify-content:space-between;padding:6px 2px;border-bottom:1px solid var(--line-soft);font-size:13px;}
.x9-goal{display:grid;gap:6px;} .x9-goal b{font-size:15px;} .x9-goal span{font-size:12px;color:var(--paper-dim);}
.x9-heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,auto);grid-auto-columns:1fr;gap:3px;}
.x9-h{display:block;width:100%;aspect-ratio:1;border-radius:3px;background:rgba(255,255,255,.07);}
.x9-h[data-l="1"]{background:rgba(var(--accent-rgb,201,162,39),.28);} .x9-h[data-l="2"]{background:rgba(var(--accent-rgb,201,162,39),.5);}
.x9-h[data-l="3"]{background:rgba(var(--accent-rgb,201,162,39),.75);} .x9-h[data-l="4"]{background:rgb(var(--accent-rgb,201,162,39));}
.x9-h--na{opacity:0;}
.x9-legend{display:flex;align-items:center;gap:4px;justify-content:flex-end;font-size:10.5px;color:var(--paper-dim);margin-top:6px;} .x9-legend .x9-h{width:12px;}
.x9-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;height:130px;}
.x9-week>div{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:2px;font-size:10.5px;color:var(--paper-dim);}
.x9-week i{display:block;width:70%;max-width:26px;background:var(--grad,var(--brass));border-radius:5px 5px 2px 2px;min-height:2px;}
.x9-week b{font-size:11px;color:var(--paper);}
.x9-hours{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;height:96px;align-items:end;}
.x9-hours>div{display:flex;flex-direction:column;justify-content:flex-end;height:100%;align-items:center;font-size:9px;color:var(--paper-dim);}
.x9-hours i{display:block;width:100%;background:var(--grad,var(--brass));border-radius:3px 3px 1px 1px;min-height:2px;}
.x9-ach{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px;}
.x9-ach>div,.x9-ach>button{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:10px 6px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft);color:var(--paper);font:inherit;opacity:.5;}
.x9-ach .on{opacity:1;border-color:rgba(var(--accent-rgb,201,162,39),.55);}
.x9-ach .pin{box-shadow:0 0 0 2px var(--brass);}
.x9-ach--pick>button.on{cursor:pointer;}
.x9-ach span{font-size:24px;} .x9-ach b{font-size:12.5px;} .x9-ach small{font-size:10.5px;color:var(--paper-dim);line-height:1.3;}
.x9-comp{display:grid;grid-template-columns:90px 1fr 28px;gap:8px;align-items:center;margin-bottom:6px;font-size:12.5px;} .x9-comp b{text-align:right;}
.x9-podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;}
.x9-pod{flex:1;max-width:130px;text-align:center;padding:10px 6px;border-radius:12px 12px 4px 4px;background:rgba(255,255,255,.06);border:1px solid var(--line-soft);display:flex;flex-direction:column;gap:4px;align-items:center;}
.x9-pod span{font-size:26px;} .x9-pod b{font-size:12.5px;line-height:1.3;word-break:break-word;}
.x9-pod--1{min-height:130px;background:linear-gradient(180deg,rgba(201,162,39,.28),rgba(255,255,255,.04));border-color:rgba(201,162,39,.6);}
.x9-pod--2{min-height:100px;} .x9-pod--3{min-height:82px;}
.x9-show{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.x9-show a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit;min-width:0;}
.x9-show img,.x9-show__ph{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px;background:var(--ink-3,#26221b);display:flex;align-items:center;justify-content:center;font-size:22px;}
.x9-show small{font-size:10.5px;line-height:1.25;color:var(--paper-dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.x9-read{display:flex;flex-direction:column;gap:6px;}
.x9-read a{display:flex;flex-direction:column;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line-soft);text-decoration:none;color:inherit;}
.x9-read b{font-size:13.5px;} .x9-read small{font-size:11.5px;color:var(--paper-dim);}
.x9-recap h3{margin:0 0 10px;font-size:17px;}

/* ---------- banner lebih tinggi ---------- */
.profile-card__banner.x9-bh{height:var(--x9-bh,200px)!important;}
.x9-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.x9-segbtn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:10px;border:1px solid var(--line-soft);background:rgba(255,255,255,.04);color:var(--paper);cursor:pointer;font:inherit;font-size:12.5px;}
.x9-segbtn small{font-size:10px;color:var(--paper-dim);} .x9-segbtn.on{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass);}

/* =========================================================
   FIX LAYOUT KARTU PROFIL (semua lebar layar)
   Sebelumnya kartu dipusatkan tanpa batas lebar (theme-violet),
   tapi rata-tengah chip/gelar/kutipan hanya aktif di <=480px.
   Di layar 481-860px (banyak HP "besar"/zoom) isinya jadi
   menyempit & rata kiri. Di sini semuanya dibuat konsisten.
   ========================================================= */
#app .profile-card__body{width:100%;box-sizing:border-box;align-items:center;text-align:center;}
#app .profile-card__text{
  width:100%; max-width:100%; min-width:0; box-sizing:border-box; padding:6px 4px 0;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
#app .profile-card__text > *{max-width:100%;}
#app .profile-card__name{overflow-wrap:anywhere;}
#app .profile-card__email{overflow-wrap:anywhere; word-break:break-word;}
#app .profile-card__bio{width:100%; overflow-wrap:anywhere;}
#app .profile-card__edit{align-self:center;}
#app .profile-card__text .user-badges,
#app .profile-card__text [class*="badges"]{justify-content:center;}
#app .x9-meta{width:100%; text-align:center;}
#app .x9-title{text-align:center;}
#app .x9-chips{justify-content:center; width:100%; margin:6px 0;}
#app .x9-quote{width:100%; text-align:center;}
#app .x9-quote blockquote{text-align:center; border-left:0; border-top:2px solid var(--brass); padding:8px 6px 0;}
#app .profile-card__stats{box-sizing:border-box; width:100%;}