/* ShortsHub User UI | large type, cinematic gradients, tactile controls */
:root{--user-bg:#070a16;--user-surface:#11172b;--user-panel:#151d35;--user-text:#f7f8ff;--user-muted:#a4b0ce;--user-line:rgba(185,199,255,.15);--user-violet:#8b5cf6;--user-pink:#fa4f9a;--user-cyan:#34d7ee;--user-green:#45e0b1}
*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}body,html{margin:0;padding:0;min-height:100%;font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;font-size:17px;color:var(--user-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body{background:radial-gradient(ellipse at 75% 0,rgba(139,92,246,.12),transparent 32%),radial-gradient(ellipse at 5% 72%,rgba(250,79,154,.08),transparent 35%),var(--user-bg);overflow-x:hidden}a{color:inherit;text-decoration:none;transition:transform .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease}
.skip-link{position:fixed;z-index:1000;left:14px;top:10px;transform:translateY(-160%);padding:12px 16px;background:#fff;color:#111;border-radius:10px;font-weight:900;box-shadow:0 8px 28px rgba(0,0,0,.3)}.skip-link:focus{transform:translateY(0)}
button,input,textarea,select{font:inherit}.ui-icon{width:20px;height:20px;flex:0 0 20px;display:inline-block;vertical-align:middle;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px;padding:0 clamp(16px,3vw,44px);background:rgba(7,10,22,.84);border-bottom:1px solid var(--user-line);backdrop-filter:blur(22px);box-shadow:0 8px 26px rgba(0,0,0,.2)}
.brand{display:inline-flex;align-items:center;gap:12px;font-size:24px;font-weight:1000;letter-spacing:-1px;color:#fff}.brand-mark{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;border-radius:16px;background:linear-gradient(145deg,#ff5597,#a34dff 60%,#526dff);box-shadow:0 6px 0 #49267d,0 13px 29px rgba(139,92,246,.33),inset 0 1px 0 rgba(255,255,255,.46);animation:userBrandFloat 4.5s ease-in-out infinite}.brand-accent{background:linear-gradient(90deg,#ff80b4,#bc9aff,#67e9fa);-webkit-background-clip:text;background-clip:text;color:transparent}
.site-nav{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800}.site-nav a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:43px;padding:10px 14px;border-radius:13px;color:#c8d1ec}.site-nav a:hover{color:#fff;background:rgba(139,92,246,.14);transform:translateY(-2px)}.site-nav .nav-cta{color:white;background:linear-gradient(130deg,#8b5cf6,#a447e8 52%,#ec4f9d);box-shadow:0 4px 0 #4c2b9f,0 9px 18px rgba(139,92,246,.2),inset 0 1px 0 rgba(255,255,255,.3)}.site-nav .nav-cta:hover{box-shadow:0 6px 0 #4c2b9f,0 14px 26px rgba(139,92,246,.26)}.site-main{min-height:calc(100vh - 125px)}.site-footer{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:12px clamp(16px,2vw,28px);background:rgba(8,11,23,.97);border-top:1px solid var(--user-line);color:#8290b5;font-size:12px}.site-footer a{color:#c7b3ff;font-weight:850}.site-footer a:hover{color:#6feafa}
.auth-wrap{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 128px);padding:48px 20px;position:relative;isolation:isolate}.auth-wrap:before,.auth-wrap:after{content:"";position:absolute;z-index:-1;width:340px;height:340px;border-radius:50%;filter:blur(5px);pointer-events:none;animation:orbDrift 11s ease-in-out infinite}.auth-wrap:before{top:8%;left:4%;background:radial-gradient(circle,rgba(139,92,246,.15),transparent 70%)}.auth-wrap:after{right:4%;bottom:4%;background:radial-gradient(circle,rgba(250,79,154,.11),transparent 70%);animation-delay:-5s}
.auth-card{position:relative;width:100%;max-width:620px;padding:clamp(28px,4.2vw,48px);background:linear-gradient(145deg,rgba(22,30,57,.98),rgba(12,17,35,.99));border:1px solid var(--user-line);border-radius:28px;box-shadow:0 7px 0 #050711,0 30px 75px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;transform:translateZ(0)}.auth-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--user-pink),var(--user-violet),var(--user-cyan));background-size:200% 100%;animation:gradientFlow 7s linear infinite}.eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:13px;color:#c4adff;font-size:12px;font-weight:950;letter-spacing:2.5px;text-transform:uppercase}.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(145deg,var(--user-pink),var(--user-cyan));box-shadow:0 0 15px rgba(250,79,154,.8)}.auth-card h1,.profile-panel h1{margin:0 0 14px;font-size:clamp(32px,4.5vw,46px);line-height:1.08;letter-spacing:-1.55px;font-weight:1000;color:#fff;text-wrap:balance}.muted-text{margin:0;color:var(--user-muted);font-size:16px;line-height:1.8}.form-row{margin:22px 0}.form-row label{display:block;margin-bottom:10px;color:#dbe4ff;font-size:16px;font-weight:850;line-height:1.5}.text-input,.text-area,.select-input{display:block;width:100%;min-height:54px;padding:14px 16px;border:1px solid rgba(181,196,255,.18);border-radius:14px;background:linear-gradient(145deg,rgba(7,11,25,.94),rgba(20,28,52,.95));color:#f8f9ff;font-family:inherit;font-size:16px;line-height:1.5;outline:none;box-shadow:inset 0 3px 8px rgba(0,0,0,.14),0 4px 0 rgba(4,7,18,.55);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.text-input::placeholder,.text-area::placeholder{color:#7683a7}.text-input:focus,.text-area:focus,.select-input:focus{border-color:rgba(52,215,238,.74);box-shadow:0 0 0 4px rgba(52,215,238,.1),0 0 25px rgba(139,92,246,.11),0 4px 0 rgba(4,7,18,.5);transform:translateY(-1px)}.text-area{min-height:120px;resize:vertical}
.primary-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:53px;padding:14px 20px;border:1px solid rgba(255,255,255,.22);border-radius:15px;background:linear-gradient(130deg,#8b5cf6,#a447e8 52%,#ec4f9d);color:white;font-size:16px;line-height:1.3;font-weight:950;cursor:pointer;box-shadow:0 6px 0 #4c2b9f,0 15px 28px rgba(139,92,246,.24),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}.primary-btn:hover{color:white;filter:brightness(1.08);transform:translateY(-3px);box-shadow:0 9px 0 #4c2b9f,0 21px 35px rgba(139,92,246,.3),inset 0 1px 0 rgba(255,255,255,.4)}.primary-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #4c2b9f,0 7px 12px rgba(139,92,246,.19)}.full-width{display:flex;width:100%}.form-foot{margin-top:24px;padding-top:20px;border-top:1px solid var(--user-line);color:#a3b0d2;font-size:15px;text-align:center;line-height:1.7}.form-foot a{color:#d6c3ff;font-weight:900}.form-foot a:hover{color:#67e9fa}.message{display:block;margin:17px 0;padding:13px 15px;border-radius:13px;font-size:15px;font-weight:750;line-height:1.6}.message:empty{display:none}.message-error,.field-validator{color:#ffcbd8}.message-error{background:rgba(255,71,119,.09);border:1px solid rgba(255,96,126,.25)}.message-success{color:#b8ffe9;background:rgba(69,224,177,.09);border:1px solid rgba(69,224,177,.23)}.field-validator{display:block;margin-top:7px;font-size:13px;font-weight:700}
.profile-panel{position:relative;max-width:1100px;margin:clamp(25px,4vw,58px) auto;padding:clamp(26px,4vw,46px);border:1px solid var(--user-line);border-radius:28px;background:linear-gradient(145deg,rgba(22,30,57,.98),rgba(12,17,35,.99));box-shadow:0 7px 0 #050711,0 28px 75px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden}.profile-panel:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--user-pink),var(--user-violet),var(--user-cyan))}.profile-panel .muted-text{margin-bottom:25px}.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.profile-field{padding:21px;border:1px solid var(--user-line);border-radius:17px;background:linear-gradient(145deg,rgba(36,47,81,.58),rgba(14,21,42,.7));box-shadow:0 4px 0 rgba(3,7,18,.45);min-width:0}.profile-field small{display:block;color:#92a0c4;font-size:12px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:8px}.profile-field strong{display:block;color:#f8f9ff;font-size:17px;line-height:1.55;overflow-wrap:anywhere}
@keyframes userBrandFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes orbDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18px,-16px) scale(1.08)}}@keyframes gradientFlow{0%{background-position:0 0}100%{background-position:200% 0}}
@media(max-width:760px){body,html{font-size:16px}.site-header{min-height:66px;padding:0 15px;gap:10px}.brand{font-size:21px;gap:9px}.brand-mark{width:40px;height:40px;flex-basis:40px;border-radius:14px}.site-nav{gap:4px;font-size:13px}.site-nav a{padding:9px 10px;min-height:39px}.site-nav .nav-cta{font-size:12px}.site-main{min-height:calc(100vh - 112px)}.auth-wrap{min-height:calc(100vh - 112px);padding:30px 15px}.auth-card{border-radius:23px}.profile-panel{margin:24px 15px;padding:25px 21px;border-radius:23px}}
@media(max-width:540px){.site-header{min-height:60px;padding:0 11px}.brand{font-size:19px;letter-spacing:-.7px}.brand-mark{width:36px;height:36px;flex-basis:36px;border-radius:12px}.site-nav{gap:2px;font-size:12px}.site-nav a{padding:8px 8px;min-height:36px;border-radius:10px}.site-nav a .nav-text-hide{display:none}.site-nav .nav-cta{padding:9px 10px}.site-footer{font-size:10px;padding:10px 12px}.auth-wrap{padding:25px 12px}.auth-card{padding:27px 20px;border-radius:21px}.auth-card h1,.profile-panel h1{font-size:32px}.muted-text{font-size:14px}.form-row{margin:19px 0}.form-row label{font-size:15px}.text-input,.text-area,.select-input{font-size:16px;min-height:51px;padding:13px}.primary-btn{font-size:15px;min-height:51px}.profile-panel{margin:18px 12px;padding:23px 17px;border-radius:20px}.profile-grid{grid-template-columns:1fr;gap:12px}.profile-field{padding:17px}.profile-field strong{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}