/* ShortsHub Admin UI | AI-era glass surfaces, large type and responsive 3D controls */
:root{
  --bg:#080b18;--bg-2:#0c1124;--surface:#111831;--surface-2:#17203d;--surface-3:#1d2849;
  --text:#f5f7ff;--muted:#a6b1d0;--muted-2:#7784a8;--line:rgba(181,196,255,.15);
  --violet:#8b5cf6;--pink:#fa4f9a;--cyan:#34d7ee;--green:#45e0b1;--red:#ff607e;
  --shadow:0 18px 45px rgba(0,0,0,.24);--shadow-lg:0 28px 80px rgba(0,0,0,.42)
}
*{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;color:var(--text);font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.admin-body{overflow-x:hidden;background:radial-gradient(ellipse at 84% 0,rgba(106,72,255,.19),transparent 30%),radial-gradient(ellipse at 8% 88%,rgba(250,79,154,.11),transparent 34%),radial-gradient(ellipse at 63% 65%,rgba(52,215,238,.06),transparent 32%),var(--bg)}
::selection{background:rgba(139,92,246,.45);color:#fff}
.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)}

a{color:inherit;text-decoration:none;transition:color .2s ease,background .2s ease,transform .25s ease,box-shadow .25s ease}
button,input,textarea,select{font:inherit}button,a,input[type=submit],input[type=button]{-webkit-tap-highlight-color:transparent}
.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}
.admin-layout{display:flex;min-height:100vh;isolation:isolate}
.admin-sidebar{width:278px;flex:0 0 278px;min-height:100vh;height:100vh;position:sticky;top:0;display:flex;flex-direction:column;padding:26px 17px 21px;color:#e9edff;background:linear-gradient(158deg,rgba(18,22,47,.98),rgba(12,15,32,.99) 60%,rgba(19,15,43,.99));border-right:1px solid rgba(170,183,255,.12);box-shadow:14px 0 55px rgba(0,0,0,.22);overflow-y:auto;overflow-x:hidden;z-index:30}
.admin-sidebar:before,.admin-sidebar:after{content:"";position:absolute;pointer-events:none;border-radius:50%;filter:blur(2px);z-index:-1}
.admin-sidebar:before{width:250px;height:250px;top:-90px;right:-145px;background:radial-gradient(circle,rgba(139,92,246,.35),transparent 68%)}
.admin-sidebar:after{width:240px;height:240px;bottom:45px;left:-145px;background:radial-gradient(circle,rgba(250,79,154,.18),transparent 70%)}
.admin-brand{position:relative;display:flex;align-items:center;gap:13px;min-height:66px;padding:4px 10px;color:#fff;font-weight:950;font-size:21px;letter-spacing:-.7px}
.admin-brand small{display:block;margin-top:5px;color:#98a5cc;font-size:10px;letter-spacing:2.6px;font-weight:900}
.admin-brand-icon{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:17px;background:linear-gradient(145deg,#ff5597,#a34dff 60%,#526dff);color:#fff;box-shadow:0 8px 0 #482780,0 17px 34px rgba(139,92,246,.34),inset 0 1px 0 rgba(255,255,255,.48);transform:translateZ(0);animation:brandFloat 4.5s ease-in-out infinite}
.admin-nav-wrap,.admin-guest-nav{position:relative;margin-top:36px}
.admin-nav-label{padding:0 15px;margin:0 0 12px;color:#7380aa;font-size:11px;letter-spacing:2.4px;font-weight:950}
.admin-nav-link{position:relative;display:flex;align-items:center;gap:13px;margin:5px 0;padding:14px 15px;min-height:52px;border:1px solid transparent;border-radius:15px;color:#bfc9e9;font-size:16px;font-weight:750;line-height:1.35;transition:all .24s cubic-bezier(.2,.8,.2,1)}
.admin-nav-link .ui-icon{color:#9aa8d2;transition:color .2s ease,transform .2s ease}
.admin-nav-link:hover{color:#fff;background:linear-gradient(110deg,rgba(139,92,246,.25),rgba(52,215,238,.07));border-color:rgba(191,174,255,.18);transform:translateX(4px);box-shadow:0 10px 28px rgba(3,5,16,.25)}
.admin-nav-link:hover .ui-icon{color:#fff;transform:scale(1.08)}
.admin-nav-link:focus-visible,.admin-btn:focus-visible,.table-link:focus-visible{outline:3px solid rgba(52,215,238,.7);outline-offset:3px}
.admin-nav-bottom-label{margin-top:32px}.admin-guest-nav{margin-top:28px}
.sidebar-note{position:relative;margin-top:auto;padding:18px 14px 2px;border-top:1px solid rgba(255,255,255,.12);color:#e9edff;font-size:14px;line-height:1.8;font-weight:750}
.sidebar-note span{color:#8998c2;font-size:13px;font-weight:550}
.admin-main-area{display:flex;flex:1;flex-direction:column;min-width:0}
.admin-topbar{position:sticky;top:0;z-index:20;min-height:78px;padding:0 clamp(20px,3vw,45px);display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(10,14,30,.82);border-bottom:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.15);backdrop-filter:blur(22px)}
.topbar-title{font-size:18px;font-weight:900;letter-spacing:-.2px}.topbar-user{display:flex;align-items:center;gap:12px;font-size:14px;color:#b8c3e4;font-weight:800}
.status-dot{width:10px;height:10px;display:inline-block;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(69,224,177,.12),0 0 18px rgba(69,224,177,.6);animation:statusPulse 2.8s ease-in-out infinite}
.admin-content{position:relative;width:100%;max-width:1720px;margin:0 auto;padding:clamp(24px,3.2vw,48px);flex:1;min-width:0}
.admin-content:before{content:"";position:absolute;z-index:-1;pointer-events:none;width:420px;height:420px;right:-210px;top:20px;background:radial-gradient(circle,rgba(139,92,246,.08),transparent 68%)}
.admin-footer{padding:18px clamp(20px,3vw,45px);border-top:1px solid var(--line);color:#7481a6;font-size:13px;background:rgba(8,11,24,.5)}
.page-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:30px}
.page-heading h1{font-size:clamp(35px,3.6vw,51px);line-height:1.06;letter-spacing:-1.8px;margin:0 0 13px;font-weight:1000;color:#fff;text-wrap:balance}
.page-heading p{max-width:800px;margin:0;color:var(--muted);font-size:17px;line-height:1.75}
.small-kicker{display:flex;align-items:center;gap:10px;font-size:12px;text-transform:uppercase;letter-spacing:2.8px;color:#c4afff;font-weight:950;margin-bottom:13px}
.small-kicker:before{content:"";display:block;width:25px;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--pink),var(--violet),var(--cyan));box-shadow:0 0 14px rgba(139,92,246,.45)}
.admin-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;border:1px solid rgba(255,255,255,.22);border-radius:15px;padding:13px 20px;background:linear-gradient(130deg,#8b5cf6,#a447e8 52%,#ec4f9d);color:#fff;cursor:pointer;font-size:15px;line-height:1.35;font-weight:900;letter-spacing:.05px;box-shadow:0 6px 0 #4c2b9f,0 15px 30px rgba(139,92,246,.27),inset 0 1px 0 rgba(255,255,255,.42);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.admin-btn:before{content:"";position:absolute;inset:1px 1px auto;height:47%;border-radius:13px 13px 55% 55%;background:linear-gradient(rgba(255,255,255,.2),transparent);z-index:-1;pointer-events:none}
.admin-btn:hover{color:#fff;filter:brightness(1.1);transform:translateY(-3px);box-shadow:0 9px 0 #4c2b9f,0 23px 38px rgba(139,92,246,.33),inset 0 1px 0 rgba(255,255,255,.45)}
.admin-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #4c2b9f,0 7px 13px rgba(139,92,246,.2)}
.admin-btn-muted{background:linear-gradient(145deg,#202b4a,#151d37);border-color:rgba(177,192,255,.2);color:#dce4ff;box-shadow:0 5px 0 #080d1c,0 12px 22px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08)}
.admin-btn-muted:before{background:linear-gradient(rgba(255,255,255,.07),transparent)}
.admin-btn-muted:hover{color:#fff;box-shadow:0 8px 0 #080d1c,0 18px 26px rgba(0,0,0,.22)}
.admin-btn-danger{background:linear-gradient(135deg,#ff607e,#e42d71);box-shadow:0 6px 0 #8f1e49,0 14px 24px rgba(231,53,104,.2)}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:21px;margin-bottom:31px;perspective:1300px}
.stat-card{position:relative;isolation:isolate;min-width:0;padding:28px 25px 25px;background:linear-gradient(145deg,rgba(25,34,64,.97),rgba(17,23,45,.98) 72%,rgba(28,24,57,.97));border:1px solid var(--line);border-radius:23px;box-shadow:0 6px 0 #070a15,0 20px 42px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;transform-style:preserve-3d;transition:transform .3s ease,box-shadow .3s ease}
.stat-card:before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--pink),var(--violet),var(--cyan));z-index:-1}
.stat-card:after{content:"";position:absolute;width:170px;height:170px;right:-65px;top:-75px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.26),rgba(139,92,246,0) 70%);z-index:-1;transition:transform .4s ease}
.stat-card:nth-child(2):before{background:linear-gradient(90deg,#34d7ee,#6682ff)}.stat-card:nth-child(3):before{background:linear-gradient(90deg,#46e2b5,#34d7ee)}.stat-card:nth-child(4):before{background:linear-gradient(90deg,#ffb65e,#fa4f9a)}
.stat-card:hover{transform:translateY(-7px) rotateX(2deg) rotateY(-1deg);box-shadow:0 9px 0 #070a15,0 30px 52px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07)}.stat-card:hover:after{transform:scale(1.32)}
.stat-label{font-size:12px;letter-spacing:1.35px;color:#a9b5d8;font-weight:950}.stat-value{font-size:clamp(35px,3vw,48px);line-height:1.05;letter-spacing:-1.6px;color:#fff;font-weight:1000;margin:17px 0 12px;font-variant-numeric:tabular-nums;text-shadow:0 5px 24px rgba(139,92,246,.15)}.stat-foot{font-size:14px;color:#8d9abf;line-height:1.65}
.panel{position:relative;background:linear-gradient(145deg,rgba(20,28,54,.98),rgba(13,19,38,.98));border:1px solid var(--line);border-radius:23px;box-shadow:0 6px 0 #060915,0 22px 48px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.045);overflow:hidden;transition:box-shadow .25s ease,transform .25s ease;margin-bottom:26px}
.panel:hover{box-shadow:0 6px 0 #060915,0 27px 55px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.055)}
.panel-head{min-height:72px;padding:22px 27px;border-bottom:1px solid var(--line);background:linear-gradient(100deg,rgba(139,92,246,.09),rgba(52,215,238,.025));display:flex;justify-content:space-between;align-items:center;gap:15px}
.panel-head h2{font-size:21px;margin:0;font-weight:950;letter-spacing:-.45px;color:#f5f7ff}.panel-body{padding:clamp(22px,2.4vw,34px)}
.admin-form{max-width:1050px}.admin-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.admin-form-row{margin-bottom:23px;min-width:0}.admin-form-row label{display:block;color:#dbe3ff;font-size:16px;font-weight:850;margin-bottom:10px;line-height:1.45}
.admin-input,.admin-textarea,.admin-select{display:block;width:100%;min-height:52px;border:1px solid rgba(180,195,255,.18);background:linear-gradient(145deg,rgba(8,13,29,.92),rgba(20,27,52,.92));border-radius:14px;padding:14px 16px;color:#f7f8ff;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}
.admin-input::placeholder,.admin-textarea::placeholder{color:#6f7da3}.admin-input:focus,.admin-textarea:focus,.admin-select:focus{border-color:rgba(52,215,238,.72);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)}.admin-textarea{min-height:125px;resize:vertical}.admin-select option{background:#111831;color:#fff}
.admin-hint{display:block;margin-top:9px;color:#8290b5;font-size:13px;line-height:1.7}.admin-check{display:flex;align-items:center;gap:9px;min-height:48px;color:#dfe6ff;font-size:15px;font-weight:750}.admin-check input{width:19px;height:19px;accent-color:#a56dff}
.action-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}.admin-message{display:block;margin:0 0 19px;padding:13px 16px;border-radius:13px;font-size:15px;font-weight:750;line-height:1.65}.admin-message:empty{display:none}.admin-success{color:#b8ffe9;background:rgba(34,197,142,.1);border:1px solid rgba(69,224,177,.24)}.admin-error{color:#ffd5e0;background:rgba(255,70,119,.1);border:1px solid rgba(255,96,126,.28)}
.welcome-panel{position:relative;isolation:isolate;overflow:hidden;margin:0 0 27px;padding:clamp(27px,3vw,37px);border-radius:25px;background:linear-gradient(115deg,rgba(99,58,193,.98),rgba(115,54,196,.95) 46%,rgba(30,130,180,.95));border:1px solid rgba(255,255,255,.22);box-shadow:0 7px 0 #2d1c69,0 23px 45px rgba(78,40,161,.23),inset 0 1px 0 rgba(255,255,255,.28);animation:welcomeGlow 8s ease-in-out infinite;background-size:180% 180%}
.welcome-panel:after{content:"✦";position:absolute;right:4%;top:-35px;font-size:190px;line-height:1;color:rgba(255,255,255,.12);transform:rotate(18deg);animation:starFloat 7s ease-in-out infinite;z-index:-1}.welcome-panel h2{margin:0 0 10px;font-size:clamp(24px,2.5vw,30px);font-weight:1000;letter-spacing:-.7px;color:#fff}.welcome-panel p{margin:0;max-width:760px;color:#f0eaff;font-size:15px;line-height:1.8}
.table-wrap{width:100%;overflow-x:auto}.admin-table{width:100%;border-collapse:separate;border-spacing:0;color:#e3e9ff;font-size:15px;line-height:1.55}.admin-table th{padding:17px 18px;text-align:left;color:#8f9ec6;background:rgba(7,11,25,.65);font-size:12px;text-transform:uppercase;letter-spacing:1.15px;font-weight:950;white-space:nowrap;border-bottom:1px solid var(--line)}.admin-table td{padding:17px 18px;border-bottom:1px solid rgba(181,196,255,.1);vertical-align:middle}.admin-table tr:last-child td{border-bottom:0}.admin-table tbody tr{transition:background .2s ease}.admin-table tbody tr:hover{background:rgba(139,92,246,.07)}.admin-table td:first-child,.admin-table th:first-child{padding-left:24px}.admin-table .table-title{font-size:15px;font-weight:900;color:#f5f7ff;overflow-wrap:anywhere}.table-sub{display:block;max-width:430px;margin-top:5px;color:#8694b9;font-size:12px;line-height:1.5;overflow-wrap:anywhere}.table-actions{display:flex;gap:13px;flex-wrap:wrap}.table-link{display:inline-flex;align-items:center;gap:5px;color:#c4aaff;font-weight:850;font-size:14px;white-space:nowrap}.table-link:hover{color:#72e8f4;text-decoration:underline;text-underline-offset:3px}.status-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;font-size:11px;font-weight:950;letter-spacing:.8px;white-space:nowrap;border:1px solid transparent}.status-active{color:#8af5d1;background:rgba(69,224,177,.11);border-color:rgba(69,224,177,.19)}.status-active:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}.status-inactive{color:#ffb8c8;background:rgba(255,96,126,.1);border-color:rgba(255,96,126,.18)}.table-empty{padding:35px!important;color:#929fbe;text-align:center}
.auth-admin-wrap{max-width:760px;margin:0 auto;padding:clamp(5px,2vw,22px) 0 30px}.auth-admin-title{padding:28px 30px 0}.auth-admin-title h1{margin:0 0 12px;font-size:clamp(31px,4vw,43px);line-height:1.1;letter-spacing:-1.3px}.auth-admin-title p{margin:0;color:var(--muted);font-size:16px;line-height:1.75}.auth-admin-footer{margin-top:22px;padding:15px 17px;background:rgba(52,215,238,.045);border:1px solid rgba(52,215,238,.13);border-radius:13px;color:#91a0c5;font-size:13px;line-height:1.7}.help-callout{margin-top:22px;padding:17px 18px;border-radius:14px;background:rgba(52,215,238,.055);border:1px solid rgba(52,215,238,.16);font-size:14px;line-height:1.7;color:#a8b7dd}.help-callout strong{color:#e0d2ff}
.mobile-only{display:none}
@keyframes brandFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(2deg)}}@keyframes statusPulse{0%,100%{box-shadow:0 0 0 4px rgba(69,224,177,.12),0 0 14px rgba(69,224,177,.4)}50%{box-shadow:0 0 0 7px rgba(69,224,177,.04),0 0 22px rgba(69,224,177,.7)}}@keyframes welcomeGlow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@keyframes starFloat{0%,100%{transform:translateY(0) rotate(18deg)}50%{transform:translateY(13px) rotate(29deg)}}
@media(max-width:1200px){.admin-sidebar{width:245px;flex-basis:245px}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-content{padding:28px}.page-heading h1{font-size:40px}}
@media(max-width:780px){.admin-layout{display:block}.admin-sidebar{position:relative;width:100%;height:auto;min-height:0;max-height:none;padding:13px 14px 12px;overflow:visible;border-right:0;border-bottom:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.18)}.admin-brand{min-height:52px;padding:0 5px;font-size:19px}.admin-brand-icon{width:41px;height:41px;flex-basis:41px;border-radius:14px}.admin-nav-wrap,.admin-guest-nav{display:flex;align-items:center;gap:7px;margin-top:12px;padding-bottom:3px;overflow-x:auto;scrollbar-width:thin}.admin-nav-label,.sidebar-note{display:none}.admin-nav-link{flex:0 0 auto;margin:0;min-height:43px;padding:10px 12px;font-size:14px;gap:8px;border-radius:12px}.admin-nav-link:hover{transform:translateY(-2px)}.admin-nav-link .ui-icon{width:18px;height:18px;flex-basis:18px}.admin-topbar{position:relative;min-height:58px;padding:0 20px}.admin-content{padding:26px 20px 34px}.admin-footer{padding:15px 20px}.page-heading{display:flex;flex-direction:column;align-items:stretch;gap:17px}.page-heading .admin-btn{align-self:flex-start}.page-heading h1{font-size:clamp(33px,7vw,44px)}.page-heading p{font-size:16px}.panel-body{padding:22px}.panel-head{padding:19px 22px}.admin-table{min-width:720px}.table-wrap{border-radius:0 0 20px 20px}}
@media(max-width:560px){body,html{font-size:16px}.admin-content{padding:22px 13px 28px}.admin-topbar{padding:0 15px;min-height:55px}.topbar-title{font-size:16px}.topbar-user{font-size:12px;gap:8px}.admin-brand{font-size:18px}.admin-brand small{font-size:8px;letter-spacing:2px}.admin-nav-link{font-size:13px;min-height:40px;padding:9px 11px}.admin-nav-link .ui-icon{width:16px;height:16px;flex-basis:16px}.page-heading{margin-bottom:23px}.page-heading h1{font-size:34px;letter-spacing:-1px}.page-heading p{font-size:15px}.admin-btn{width:100%;min-height:48px;padding:12px 14px;font-size:14px}.page-heading .admin-btn{width:auto;max-width:100%}.stat-grid{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:21px}.stat-card{padding:20px 16px 18px;border-radius:18px}.stat-label{font-size:10px;letter-spacing:.8px}.stat-value{font-size:34px;margin:13px 0 8px}.stat-foot{font-size:12px}.welcome-panel{padding:25px 21px;border-radius:20px}.welcome-panel:after{font-size:115px;right:2%;top:-10px}.welcome-panel h2{font-size:24px}.welcome-panel p{font-size:14px;max-width:80%}.panel{border-radius:19px}.panel-head{padding:17px 18px;align-items:flex-start;flex-direction:column;gap:8px}.panel-head h2{font-size:18px}.panel-body{padding:18px}.admin-form-grid{grid-template-columns:1fr;gap:0}.admin-form-row label{font-size:15px}.admin-input,.admin-textarea,.admin-select{font-size:16px;min-height:50px}.action-row{flex-direction:column;align-items:stretch}.action-row .admin-btn{width:100%}.auth-admin-title{padding:22px 20px 0}.auth-admin-title h1{font-size:32px}.auth-admin-title p{font-size:14px}.auth-admin-wrap .panel-body{padding:21px}.admin-footer{font-size:11px;padding:14px}.table-wrap{margin:0 -1px}.status-badge{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}