/* ==========================================================================
   ONEDEV STUDIO V22 — PREMIUM PAGES + CONNECT DRAWER
   ========================================================================== */

:root{
  --v22-yellow:#ffd000;
  --v22-orange:#ff8500;
  --v22-red:#f32d39;
  --v22-red-dark:#260408;
  --v22-blue:#358cff;
  --v22-purple:#a55cff;
}

/* Header connect button */
.v22-connect-open{
  position:relative;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:0 15px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.035)!important;
  color:#fff!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:.03em;
  cursor:pointer;
  overflow:hidden;
  transition:.25s!important;
}
.v22-connect-open:before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:#ffc700;
  box-shadow:0 0 12px #ffc700;
}
.v22-connect-open:hover{
  border-color:#775b0c!important;
  background:rgba(255,199,0,.06)!important;
  transform:translateY(-1px);
}

/* Connect drawer */
.v22-connect{
  position:fixed;inset:0;z-index:120000;
  visibility:hidden;pointer-events:none;
}
.v22-connect.is-open{visibility:visible;pointer-events:auto}
.v22-connect-backdrop{
  position:absolute;inset:0;border:0;width:100%;height:100%;
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(8px);
  opacity:0;transition:opacity .28s ease;
}
.v22-connect.is-open .v22-connect-backdrop{opacity:1}
.v22-connect-panel{
  position:absolute;top:0;right:0;
  width:min(480px,100%);height:100%;
  display:flex;flex-direction:column;
  padding:25px;
  border-left:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 100% 0%,rgba(255,185,0,.10),transparent 30%),
    #070909;
  box-shadow:-35px 0 100px rgba(0,0,0,.65);
  transform:translateX(102%);
  transition:transform .42s cubic-bezier(.16,1,.3,1);
  overflow-y:auto;
}
.v22-connect.is-open .v22-connect-panel{transform:none}
.v22-connect-top{display:flex;align-items:center;justify-content:space-between}
.v22-connect-top img{width:165px;height:auto}
.v22-connect-close{
  width:38px;height:38px;border:1px solid #303434;border-radius:9px;
  background:#0b0e0e;color:#999;font-size:21px;cursor:pointer;
}
.v22-connect-close:hover{color:#ffc700;border-color:#75590d}
.v22-connect-state{
  margin-top:52px;color:#ffc700;font-size:7px;font-weight:1000;letter-spacing:.2em;
}
.v22-connect-panel h2{
  margin:12px 0 10px;font-size:45px;line-height:.94;letter-spacing:-2.6px;
}
.v22-connect-panel h2 em{font-style:normal;color:#ffc700}
.v22-connect-lead{margin:0 0 26px;color:#7d8383;font-size:9px;line-height:1.75}
.v22-discord{
  width:100%;min-height:50px;padding:0 15px;
  display:flex;align-items:center;gap:12px;
  border:1px solid #353949;border-radius:10px;
  background:#11131a;color:#fff;font-size:8px;font-weight:900;cursor:pointer;
}
.v22-discord i{
  display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  background:#5865f2;color:#fff;font-style:normal;
}
.v22-discord b{margin-left:auto;color:#8992ff}
.v22-connect-sep{
  display:flex;align-items:center;gap:10px;margin:20px 0;
  color:#555b5b;font-size:6px;
}
.v22-connect-sep:before,.v22-connect-sep:after{content:"";height:1px;flex:1;background:#282c2c}
.v22-auth-form{display:grid;gap:13px}
.v22-auth-form label>span{display:block;margin-bottom:7px;color:#858b8b;font-size:7px;font-weight:800}
.v22-auth-form input{
  width:100%;height:47px;padding:0 13px;
  border:1px solid #303434;border-radius:9px;outline:0;
  background:#040606;color:#fff;font-size:9px;
}
.v22-auth-form input:focus{border-color:#82620e;box-shadow:0 0 0 3px rgba(255,199,0,.035)}
.v22-password{position:relative}
.v22-password input{padding-right:72px}
.v22-password button{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:0;background:none;color:#777;font-size:6px;font-weight:900;cursor:pointer;
}
.v22-auth-options{display:flex;align-items:center;justify-content:space-between;gap:10px}
.v22-auth-options label{display:flex;align-items:center;gap:7px;color:#777;font-size:7px}
.v22-auth-options label input{width:13px;height:13px;accent-color:#ffc700}
.v22-auth-options button{border:0;background:none;color:#8a9090;font-size:7px;cursor:pointer}
.v22-auth-submit{
  min-height:49px;padding:0 15px;
  display:flex;align-items:center;justify-content:space-between;
  border:0;border-radius:9px;
  background:linear-gradient(110deg,#ffd000,#ff8500);
  color:#080808;font-size:8px;font-weight:1000;cursor:pointer;
}
.v22-connect-bottom{
  margin-top:auto;padding-top:30px;color:#4e5454;font-size:6px;line-height:1.6;
}
body.v22-connect-lock{overflow:hidden}

/* More substantial studio pages */
.v22-page-section{padding:100px 0;border-top:1px solid #232727}
.v22-page-title{display:grid;grid-template-columns:.75fr 1.25fr;gap:50px;align-items:start;margin-bottom:45px}
.v22-page-title>span{font-size:7px;font-weight:1000;letter-spacing:.18em}
.v22-page-title h2{margin:0;font-size:48px;line-height:.98;letter-spacing:-2.4px}
.v22-page-title h2 em{font-style:normal}
.v22-page-title p{grid-column:2;margin:0;max-width:630px;color:#7d8383;font-size:9px;line-height:1.8}

.v22-process{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.v22-process article{
  position:relative;min-height:235px;padding:20px;
  border:1px solid #292d2d;border-radius:12px;background:#080a0a;
}
.v22-process article>b{font-size:7px;color:#555b5b}
.v22-process article h3{margin:65px 0 8px;font-size:17px}
.v22-process article p{margin:0;color:#777d7d;font-size:8px;line-height:1.7}

.v22-capabilities{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.v22-capability{
  min-height:220px;padding:23px;border:1px solid #292d2d;border-radius:13px;
  background:#080a0a;
}
.v22-capability small{font-size:6px;letter-spacing:.16em}
.v22-capability h3{margin:55px 0 8px;font-size:22px}
.v22-capability p{max-width:520px;color:#7d8383;font-size:8px;line-height:1.75}

.v22-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.v22-metrics div{padding:22px;border:1px solid #292d2d;border-radius:12px;background:#080a0a}
.v22-metrics strong{display:block;font-size:29px;letter-spacing:-1px}
.v22-metrics span{display:block;margin-top:6px;color:#686e6e;font-size:6px;letter-spacing:.12em}

/* Studio theme accents */
.v21-theme-dev .v22-page-title>span,.v21-theme-dev .v22-page-title em,
.v21-theme-dev .v22-capability small{color:var(--v22-yellow)}
.v21-theme-dev .v22-capability:hover,.v21-theme-dev .v22-process article:hover{border-color:#7b580e}
.v21-theme-dev .v22-metrics strong{background:linear-gradient(90deg,var(--v22-yellow),var(--v22-orange));-webkit-background-clip:text;color:transparent}

.v21-theme-games .v22-page-title>span,.v21-theme-games .v22-page-title em,
.v21-theme-games .v22-capability small{color:var(--v22-red)}
.v21-theme-games .v22-capability:hover,.v21-theme-games .v22-process article:hover{border-color:#711219}
.v21-theme-games .v22-metrics strong{color:var(--v22-red)}

.v21-theme-design .v22-page-title>span,.v21-theme-design .v22-page-title em,
.v21-theme-design .v22-capability small{color:#7f83ff}
.v21-theme-design .v22-capability:hover,.v21-theme-design .v22-process article:hover{border-color:#47368b}
.v21-theme-design .v22-metrics strong{background:linear-gradient(90deg,var(--v22-blue),var(--v22-purple));-webkit-background-clip:text;color:transparent}

/* Portfolio filters */
.v22-filterbar{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}
.v22-filterbar button{
  padding:10px 13px;border:1px solid #303434;border-radius:8px;
  background:#080a0a;color:#777d7d;font-size:7px;font-weight:900;cursor:pointer;
}
.v22-filterbar button.active{border-color:#775b0c;color:#ffc700;background:#100e07}
.v21-portfolio>a.v22-hidden{display:none}

/* Contact enhancement */
.v22-contact-notes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  margin:0 0 100px;
}
.v22-contact-notes article{padding:20px;border:1px solid #292d2d;border-radius:12px;background:#080a0a}
.v22-contact-notes b{color:#ffc700;font-size:7px}
.v22-contact-notes h3{margin:35px 0 8px;font-size:16px}
.v22-contact-notes p{margin:0;color:#777d7d;font-size:8px;line-height:1.7}

@media(max-width:850px){
  .v22-process,.v22-metrics{grid-template-columns:1fr 1fr}
  .v22-page-title{grid-template-columns:1fr;gap:16px}
  .v22-page-title p{grid-column:auto}
}
@media(max-width:620px){
  .v22-connect-open{min-height:36px;padding:0 10px!important;font-size:6px!important}
  .v22-connect-panel{padding:18px}
  .v22-connect-panel h2{font-size:38px}
  .v22-page-section{padding:70px 0}
  .v22-page-title h2{font-size:37px}
  .v22-process,.v22-capabilities,.v22-metrics,.v22-contact-notes{grid-template-columns:1fr}
  .v22-process article{min-height:190px}
  .v22-process article h3{margin-top:42px}
}
@media(prefers-reduced-motion:reduce){
  .v22-connect-panel,.v22-connect-backdrop{transition:none!important}
}