/* POST PLAYGROUND brand refresh — navy, playground yellow, action red, creative teal, warm cream */
:root{
  --pp-navy:#071923;--pp-navy-2:#0b2430;--pp-panel:#102b37;--pp-panel-2:#143440;
  --pp-line:#294550;--pp-cream:#fff5e8;--pp-muted:#a9bbc0;--pp-yellow:#ffc900;
  --pp-red:#f83d43;--pp-teal:#00c9b5;
  --bg:var(--pp-navy);--panel:var(--pp-panel);--panel2:var(--pp-panel-2);
  --line:var(--pp-line);--text:var(--pp-cream);--muted:var(--pp-muted);
  --amber:var(--pp-yellow);--amber2:#ffdc50;--red:var(--pp-red);--green:var(--pp-teal);--blue:var(--pp-teal);
  --gold:var(--pp-yellow);--gold2:#ffdc50;
}
html{background:var(--pp-navy)}
body{background:radial-gradient(ellipse at 78% 0%,#123745 0%,transparent 34%),var(--pp-navy)!important;color:var(--pp-cream)!important}
/* Shared brand treatment */
.brand-logo{display:block;width:54px;height:54px;flex:0 0 54px;object-fit:contain;border-radius:50%;background:#fff5e8;box-shadow:0 4px 18px #0005}
.brand-name{color:var(--pp-cream)!important;letter-spacing:.09em!important}
.brand-sub{color:#9fb6bd!important}
/* Main creator workspace */
.app .sidebar{background:linear-gradient(180deg,#061721,#091f2a)!important;border-color:#25434d!important}
.app .brand{gap:12px;padding:0 7px}
.app .brand-mark{display:none!important}
.app .workspace{background:#102c37!important;border-color:#2a4a54!important}
.app .workspace-dot{background:var(--pp-teal)!important;box-shadow:0 0 12px #00c9b566}
.app .nav button{color:#b7c8cc!important;border-radius:10px}
.app .nav button:hover{background:#143440!important;color:#fff!important}
.app .nav button.active{background:linear-gradient(90deg,#ffc90022,#ffc9000b)!important;color:var(--pp-yellow)!important;box-shadow:inset 3px 0 var(--pp-red)!important}
.app .topbar{background:#071923ed!important;border-color:#294550!important}
.app .content{color:var(--pp-cream)}
.app .page-head{padding:22px 24px;margin:8px 0 25px;border:1px solid #294550;border-radius:18px;background:linear-gradient(110deg,#102d38 0%,#0b2430 65%,#142f39 100%);position:relative;overflow:hidden}
.app .page-head:after{content:"";position:absolute;width:210px;height:210px;right:-75px;top:-110px;border:26px solid #ffc90022;border-radius:50%;pointer-events:none}
.app .eyebrow{color:var(--pp-teal)!important}
.app .page-head h1{color:var(--pp-cream)!important;position:relative;z-index:1}
.app .sub{color:#b1c2c6!important;position:relative;z-index:1}
.app .panel,.app .stat,.app .card{background:linear-gradient(145deg,#112d38,#0d2631)!important;border-color:#294550!important;box-shadow:0 8px 24px #020d1250}
.app .panel-head h2,.app .idea-card h3,.app .task-body strong{color:var(--pp-cream)!important}
.app .stat-icon{color:var(--pp-yellow)!important}
.app .stat:nth-child(2) .stat-icon{color:var(--pp-teal)!important}
.app .stat:nth-child(3) .stat-icon{color:var(--pp-red)!important}
.app .stat:nth-child(4) .stat-icon{color:var(--pp-yellow)!important}
.app .pipe,.app .task,.app .board-card,.app .suggestion{background:#173744!important;border-color:#2b4a55!important}
.app .board-col{background:#0b2430!important;border-color:#294550!important}
.app .media-thumb{background:linear-gradient(135deg,#174451,#0b2430)!important;color:var(--pp-teal)!important}
.app .cal-head{background:#143440!important}
.app .cal-event{background:#55470b!important;color:#ffe36c!important}
.app .cal-event.tiktok{background:#07554f!important;color:#8dfff0!important}
.app .cal-event.youtube{background:#60252b!important;color:#ffc0bd!important}
.app .tag{background:#54460b!important;color:#ffe16a!important}
.app .tag.blue{background:#07554f!important;color:#8dfff0!important}
.app .tag.green{background:#07554f!important;color:#8dfff0!important}
.app .tag.red{background:#60252b!important;color:#ffc0bd!important}
.app .btn.primary{background:var(--pp-yellow)!important;border-color:var(--pp-yellow)!important;color:#071923!important;box-shadow:0 5px 18px #ffc90025}
.app .btn.primary:hover{background:#ffdc50!important}
.app .btn:not(.primary){background:#143440!important;border-color:#355762!important;color:var(--pp-cream)!important}
.app .btn:not(.primary):hover{border-color:var(--pp-teal)!important}
.app .filter.active{background:#ffc9001c!important;border-color:var(--pp-yellow)!important;color:var(--pp-yellow)!important}
.app input,.app textarea,.app select{background:#071c26!important;border-color:#31515b!important;color:var(--pp-cream)!important}
.app input:focus,.app textarea:focus,.app select:focus{border-color:var(--pp-teal)!important;box-shadow:0 0 0 3px #00c9b51c!important}
.app .modal{background:#102b37!important;border-color:#36535d!important}
.app .bubble.user{background:#4c410d!important;border-color:#806d18!important}
.app .bubble{background:#173744!important;border-color:#31515b!important}
.app .toast{background:#0d3938!important;border-color:#00a99a!important;color:#a4fff3!important}
.app .avatar{background:var(--pp-red)!important;color:#fff!important}
/* Remix Studio */
.app-shell{background:transparent!important}
.app-shell .sidebar{background:linear-gradient(180deg,#061721,#091f2a)!important;border-color:#25434d!important}
.app-shell .brand{gap:10px;text-decoration:none;color:var(--pp-cream)!important;font-size:12px;letter-spacing:.08em;line-height:1.25}
.app-shell .brand-mark{display:none!important}
.app-shell .brand-logo{width:52px;height:52px;flex-basis:52px}
.app-shell .nav-item{color:#b7c8cc!important;border-radius:10px}
.app-shell .nav-item:hover{background:#143440!important;color:#fff!important}
.app-shell .nav-item.active{background:linear-gradient(90deg,#ffc90022,#ffc9000b)!important;color:var(--pp-yellow)!important;border-left:3px solid var(--pp-red)!important}
.app-shell .main{color:var(--pp-cream)}
.app-shell .topbar{border-color:#294550!important}
.app-shell .intro{padding:38px 26px 34px;margin:24px 0 22px;border:1px solid #294550;border-radius:18px;background:linear-gradient(110deg,#102d38 0%,#0b2430 68%,#153440 100%);position:relative}
.app-shell .intro h1{color:var(--pp-cream)!important}
.app-shell .intro h1 span{color:var(--pp-yellow)!important}
.app-shell .intro p{color:#b1c2c6!important}
.app-shell .eyebrow{color:var(--pp-teal)!important}
.app-shell .art-card{border-color:#55717a!important;background:linear-gradient(145deg,#16404b,#0b2430)!important;color:var(--pp-yellow)!important}
.app-shell .card-b{background:linear-gradient(145deg,#742d32,#291d26)!important;color:#ffd4d0!important}
.app-shell .card-c{background:linear-gradient(145deg,#07564f,#102c37)!important;color:#8dfff0!important}
.app-shell .art-spark{color:var(--pp-yellow)!important}
.app-shell .panel{background:linear-gradient(145deg,#112d38,#0d2631)!important;border-color:#294550!important;box-shadow:0 8px 24px #020d1250}
.app-shell .step{color:var(--pp-navy)!important;background:var(--pp-yellow)!important;border-color:var(--pp-yellow)!important}
.app-shell .upload-zone{background:#0b2430!important;border-color:#47717b!important}
.app-shell .upload-zone:hover{border-color:var(--pp-teal)!important;background:#103440!important}
.app-shell .upload-icon{background:#07554f!important;color:#8dfff0!important}
.app-shell .variation-card{background:#173744!important;border-color:#31515b!important}
.app-shell .variation-number{background:#54460b!important;color:#ffe16a!important}
.app-shell .hook-input,.app-shell .field-grid select{background:#071c26!important;border-color:#31515b!important;color:var(--pp-cream)!important}
.app-shell .hook-input:focus,.app-shell .field-grid select:focus{border-color:var(--pp-teal)!important}
.app-shell .outline-btn{background:#143440!important;border-color:#47717b!important;color:var(--pp-cream)!important}
.app-shell .outline-btn:hover{border-color:var(--pp-teal)!important}
.app-shell .primary-btn{background:var(--pp-yellow)!important;color:#071923!important;box-shadow:0 5px 20px #ffc90025!important}
.app-shell .primary-btn:hover{background:#ffdc50!important}
.app-shell .job{background:#173744!important;border-color:#55717a!important}
.app-shell .progress-track{background:#294550!important}
.app-shell .progress-track div{background:linear-gradient(90deg,var(--pp-red),var(--pp-yellow),var(--pp-teal))!important}
.app-shell .job-item a,.app-shell .text-button{color:var(--pp-teal)!important}
.app-shell .notice{border-color:#294550!important;color:#a9bbc0!important}
.app-shell .status-dot{background:var(--pp-teal)!important;box-shadow:0 0 10px #00c9b566!important}
.app-shell .avatar{background:var(--pp-red)!important;color:#fff!important}
.app-shell footer{color:#8fa7ae!important}
/* Mobile polish */
@media(max-width:700px){.app .page-head{padding:20px 17px}.app-shell .intro{padding:26px 18px;margin:15px 0}.brand-logo{width:46px;height:46px;flex-basis:46px}}