/* Shared Deels reference design. Applied after the page and PWA styles. */
:root{--deels-bg:#fcfbfe;--deels-ink:#292630;--deels-muted:#8d8396;--deels-line:#eae4ef;--deels-purple:#8d2fc2;--deels-soft:#eedff6}
body.reference-theme{background:var(--deels-bg);color:var(--deels-ink);font-family:Manrope,Arial,sans-serif}
.reference-theme :is(input,textarea,select,button){font-family:inherit}
.reference-theme :is(button,a,input,textarea,select):focus-visible{outline:2px solid #ad66d0;outline-offset:3px}
.reference-theme :is(.primary,.button){background:var(--deels-purple);color:#fff;border:1px solid transparent;border-radius:13px;box-shadow:0 4px 12px #8d2fc20c;font-weight:700}
.reference-theme :is(.primary,.button):hover{background:#7c25ae}
.reference-theme :is(.primary,.button):disabled{opacity:.5;cursor:default}
.reference-theme :is(.live-button,.live-actions button){border-color:var(--deels-line);color:#846493;border-radius:12px}
.reference-theme :is(.live-panel,.live-card,.social-panel,.auth-card,.live-dialog){border-color:var(--deels-line);background:#fff;border-radius:20px;box-shadow:0 3px 14px #36204304}
.reference-theme :is(.live-form,.live-toolbar,.auth-card) :is(input:not([type=checkbox]):not([type=radio]),textarea,select){border:1px solid var(--deels-line);background:#fff;border-radius:12px;color:var(--deels-ink);box-sizing:border-box}
.reference-theme .live-form label{font-size:14px;color:#74677d;line-height:1.5}
.reference-theme :is(.browse-head h1,.social-main>h1){font-size:30px;line-height:1.3;letter-spacing:-1px;margin:0}
.reference-theme .browse-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 26px;padding:0}
.reference-theme .social-main>h1{margin-bottom:26px}
.reference-theme .sidebar-bottom>p{display:none}
.reference-theme :is(.sidebar,.live-account-sidebar){background:linear-gradient(155deg,#fff 65%,#f9f5fd);border-right:1px solid var(--deels-line)}
.reference-theme :is(.sidebar,.live-account-sidebar) nav{display:grid;gap:8px;margin-top:0}
.reference-theme :is(.sidebar,.live-account-sidebar) nav a{display:flex;align-items:center;gap:14px;min-height:48px;padding:12px 16px;border-radius:12px;font-size:15px;font-weight:600;color:#79747f;text-decoration:none;box-sizing:border-box}
.reference-theme :is(.sidebar,.live-account-sidebar) nav a svg{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.reference-theme :is(.sidebar,.live-account-sidebar) nav a[aria-current=page]{background:var(--deels-soft);color:var(--deels-purple);box-shadow:inset 3px 0 var(--deels-purple)}
.reference-theme :is(.sidebar,.live-account-sidebar) nav a:hover{background:#f5eafc;color:var(--deels-purple)}
.reference-theme .live-header{gap:12px}
.reference-theme .site-search{display:flex;align-items:center;flex:1;min-width:80px;height:42px;background:#f0eaf5;border-radius:28px;overflow:hidden;margin-right:4px}
.reference-theme .site-search input{width:100%;min-width:0;border:0;background:transparent;padding:10px 17px;font:400 14px/22px Manrope,Arial,sans-serif;outline:none;color:var(--deels-ink)}
.reference-theme .site-search button{display:grid;place-items:center;flex:none;width:42px;height:42px;border:0;background:none;color:#97869f;cursor:pointer}
.reference-theme .site-search:focus-within{outline:2px solid #ad66d0;outline-offset:2px}
.reference-theme .live-header svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.reference-theme .live-header .header-icon{position:relative;width:40px;min-width:40px;padding:8px;border:0;background:transparent;color:#8f729f}
.reference-theme .notification-count{position:absolute;right:0;top:0;min-width:16px;padding:0 3px;border-radius:8px;background:var(--deels-purple);color:white;font:600 10px/16px Manrope,Arial,sans-serif}
.reference-theme .live-header>.live-user{order:2;margin:0;max-width:180px;flex:0 1 auto;overflow:hidden}
.reference-theme .live-header>[data-logout]{order:3}
.reference-theme .live-header .header-home{font-size:25px;font-weight:800;letter-spacing:-1px;margin-right:8px}
.reference-theme .header-home span{color:var(--deels-purple)}
.reference-theme .live-status-tabs,.reference-theme .reference-tabs{display:flex;gap:8px;width:auto;padding:0;border:0;background:none;margin:0 0 24px;flex-wrap:wrap}
.reference-theme :is(.live-status-tabs,.reference-tabs)>button{min-height:44px;border:0;background:transparent;border-radius:12px;padding:10px 16px;color:#8b7d96;font-size:14px;font-weight:600;cursor:pointer}
.reference-theme :is(.live-status-tabs,.reference-tabs)>button[aria-pressed=true]{background:var(--deels-soft);color:var(--deels-purple);box-shadow:inset 0 -2px var(--deels-purple)}
.reference-theme .reference-tabs>[data-create]{margin-left:auto;background:var(--deels-purple);color:white}
.reference-theme .reference-tabs>[data-refresh]{border:1px solid var(--deels-line);background:#fff}
.reference-theme .live-contest{border-radius:21px;box-shadow:0 4px 14px #36204305}
.reference-theme .live-contest .challenge-body{padding:18px;gap:12px}
.reference-theme .live-contest .challenge-body h3{min-height:0;font-size:20px;line-height:1.35;letter-spacing:-.5px}
.reference-theme .live-contest .challenge-body p{color:#897e92;min-height:3.2em;-webkit-line-clamp:2}
.reference-theme .live-contest .live-contest-link{background:var(--deels-purple);color:white;border-radius:12px}
.reference-theme .live-contest>.live-user{padding:12px 18px;font-size:13px}
.reference-theme .live-contest-status{background:#f1e7f8;color:#8d2fc2}
.reference-theme:not(.reference-profile) .live-story{box-shadow:none;border-color:var(--deels-line);border-radius:19px}
.reference-theme:not(.reference-profile) .live-story>.live-user{order:2;padding:12px;min-height:48px}
.reference-theme:not(.reference-profile) .live-story>.live-media{order:1;border-radius:18px;background:#19141e}
.reference-theme:not(.reference-profile) .live-story>.challenge-body{order:3;padding:0 12px 12px}
.reference-theme:not(.reference-profile) .live-story>.live-media-feedback{order:4}
.reference-theme:not(.reference-profile) .live-story>.live-user :is(img,.social-avatar){width:28px;height:28px;min-width:28px;max-width:28px;flex-basis:28px}
.reference-theme .live-story .live-actions [aria-pressed=true]{color:#b23acb;background:#f9edfc}
.reference-theme .reference-people .live-grid{grid-template-columns:repeat(auto-fill,minmax(145px,180px));gap:20px}
.reference-theme .reference-person{border:0;box-shadow:none;background:transparent;margin:0;padding:14px 8px;text-align:center}
.reference-theme .reference-person .live-user{flex-direction:column;gap:12px}
.reference-theme .reference-person .live-user :is(img,.social-avatar){width:92px;height:92px;max-width:92px;min-width:92px;border-radius:50%;object-fit:cover;display:grid;place-items:center}
.reference-theme .reference-person .live-user strong{font-size:17px;overflow-wrap:anywhere;max-width:100%}
.reference-theme .reference-person .live-actions{justify-content:center}
.reference-theme .reference-person .live-actions a{font-size:12px;min-height:36px;padding:6px 12px;background:#f7effb}
.reference-theme .chat-layout{grid-template-columns:minmax(220px,300px) minmax(0,1fr);min-height:530px;border:0;box-shadow:none;border-radius:0;background:transparent}
.reference-theme .chat-list{background:transparent;padding:0 18px 0 0;border-right:1px solid var(--deels-line)}
.reference-theme .chat-list>.live-form{margin:0 0 12px;grid-template-columns:minmax(0,1fr) auto;gap:6px}
.reference-theme .chat-list>.live-form button{padding:8px}
.reference-theme .chat-row{background:transparent;min-height:76px;border-radius:14px}
.reference-theme .chat-row[aria-pressed=true]{background:#eee0f7}
.reference-theme .chat-detail>.live-empty{margin:auto;text-align:center;color:#9b8aa7}
.reference-theme .chat-bubble.mine{background:#eee0f8;color:#493551}
.reference-theme .chat-messages{background:#fcf9ff}
.reference-theme .chat-detail .chat-compose{padding:16px}
.reference-theme .chat-list>[data-list-refresh],.reference-theme .chat-detail>[data-refresh]{align-self:start;font-size:12px;padding:7px 10px;margin:8px 12px}
.reference-theme .task-grid{display:block}
.reference-theme .task-grid .live-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.reference-theme .task-grid .live-panel{margin:0;padding:22px;display:flex;flex-direction:column;gap:12px;overflow-wrap:anywhere}
.reference-theme .task-grid .live-panel h3{font-size:19px;line-height:1.45;margin:0}
.reference-theme .task-grid .live-panel p{color:#8b7797;font-size:14px}
.reference-theme .task-grid .live-panel a{color:var(--deels-purple);font-size:13px}
.reference-theme.community-challenge .hero{border:1px solid var(--deels-line);border-radius:26px;box-shadow:none;background:white;overflow:hidden}
.reference-theme.community-challenge .hero-copy h1{font-size:30px;letter-spacing:-.8px}
.reference-theme.community-challenge .hero-photo{margin:20px;border-radius:18px;overflow:hidden}
.reference-theme .create-layout{display:block;max-width:820px;margin:auto}
.reference-theme #create-form{max-width:none;padding:28px}
.reference-theme #create-form>h1{font-size:24px;margin:0}
.reference-theme .auth-main{padding:36px 20px 70px}
.reference-theme .auth-card{width:460px;padding:32px;border-radius:24px;box-sizing:border-box}
.reference-theme .auth-card h1{font-size:28px;letter-spacing:-.7px}
.reference-theme .auth-tabs{background:#f2eaf8}
.reference-theme .auth-tabs .selected{color:var(--deels-purple);background:white}
.reference-theme .live-auth-required{max-width:560px;margin:32px auto;padding:44px 24px;border:1px solid var(--deels-line);border-radius:24px;background:#fff}
.reference-theme .live-auth-required p{color:var(--deels-muted);margin:14px 0 24px}
@media(min-width:801px){
 body.reference-theme.ui-scale:has(>.sidebar)>main{padding-top:88px!important;padding-left:32px;padding-right:32px;min-height:100vh}
 body.reference-theme:has(>.sidebar) main>.live-header{height:64px;padding:10px 32px;background:#fcfbfef5;border-bottom:0;box-shadow:0 4px 20px #45245c04}
 .reference-theme :is(.sidebar,.live-account-sidebar){width:244px;padding:24px 13px}
 .reference-theme .sidebar .logo{margin:0 16px 32px;font-size:34px}
 .reference-theme .live-grid:has(>.live-contest){grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
 .reference-theme .site-header .header-actions{flex:1;min-width:0}.reference-theme .site-header .live-header{width:100%}
 .reference-theme.live-signed-in .site-header .header-inner>.logo{display:none}
}
@media(min-width:801px) and (max-width:1100px){
 .reference-theme .live-grid:has(>.live-contest),.reference-theme .task-grid .live-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .reference-theme .live-header>.live-user{max-width:120px}.reference-theme .chat-layout{grid-template-columns:220px minmax(0,1fr)}
}
@media(max-width:800px){
 body.reference-theme.deels-mobile-app{background:var(--deels-bg)}
 .reference-theme :is(.browse-head h1,.social-main>h1){font-size:26px}
 .reference-theme .site-search{flex-basis:100%;order:4;margin:8px 0 0}
 .reference-theme .live-header>.live-user{order:0;max-width:160px;flex:1;margin-right:auto}
 .reference-theme .live-header>.header-home{display:none}
 .reference-theme .live-header>.header-icon{width:36px;min-width:36px;height:36px;padding:7px}
 .reference-theme .reference-tabs{gap:4px;margin-bottom:18px}.reference-theme .reference-tabs>button{font-size:12px;padding:10px 8px}
 .reference-theme .live-grid:has(>.live-contest),.reference-theme .task-grid .live-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
 .reference-theme .chat-layout{display:block;min-height:0}.reference-theme .chat-list{border-right:0;border-bottom:1px solid var(--deels-line);padding:0 0 14px}
 .reference-theme .chat-list [data-threads]{max-height:260px;overflow:auto}.reference-theme .chat-detail{min-height:260px}.reference-theme .chat-detail .chat-compose{padding:14px 0}
 .reference-theme .reference-people .live-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .reference-theme .reference-person .live-user :is(img,.social-avatar){width:72px;height:72px;min-width:72px;max-width:72px}
 .reference-theme .reference-person .live-user strong{font-size:14px}.reference-theme .reference-person .live-actions a{font-size:11px;padding:5px 8px}
 .reference-theme #create-form{padding:20px}.reference-theme .auth-top{padding-top:90px;padding-bottom:0}
 .reference-theme .auth-main{padding-top:20px}.reference-theme .auth-card{padding:24px}
 .reference-theme.community-challenge .hero-copy h1{font-size:26px}
}
@media(max-width:540px){
 .reference-theme .live-grid:has(>.live-contest),.reference-theme .task-grid .live-grid{grid-template-columns:minmax(0,1fr)}
 .reference-theme .reference-people .live-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .reference-theme .browse-head{gap:12px}.reference-theme .browse-head .primary{max-width:170px;text-align:center}.reference-theme .auth-card{padding:22px 18px}
 .reference-theme .live-status-tabs{flex-wrap:nowrap;width:100%}.reference-theme .live-status-tabs>button{flex:1;padding:10px 5px;font-size:12px}
}