:root{
    --bg:#171715;
    --shell:#252422;
    --sidebar:#1f201f;
    --panel:#2b2a28;
    --panel-2:#302f2d;
    --panel-3:#343331;
    --line:#45423d;
    --line-soft:#373532;
    --text:#f2f0eb;
    --muted:#a09d97;
    --muted-2:#77746f;
    --accent:#ff7417;
    --accent-2:#ff8f3d;
    --green:#18b783;
    --amber:#f2ac2f;
    --radius:12px;
    --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
    --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;font-family:var(--sans);color:var(--text);background:#2a2927;font-size:14px;min-width:320px}
button,input,a{font:inherit}
button,a{color:inherit}
button{cursor:pointer}
a{text-decoration:none}
input{outline:none}
.page-backdrop{min-height:100vh;padding:0;background:var(--shell);position:relative;overflow-x:hidden}
.page-backdrop:before{display:none}
.app-shell{width:100%;max-width:none;min-height:100vh;margin:0;display:grid;grid-template-columns:218px minmax(0,1fr);background:var(--shell);border:0;border-radius:0;overflow:hidden;box-shadow:none;position:relative;z-index:1}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.icon.sm{width:14px;height:14px}.icon.xs{width:11px;height:11px}
.sidebar{background:#1f201f;border-right:1px solid #3b3936;padding:14px 12px;display:flex;flex-direction:column;min-height:100vh;position:relative;z-index:4}
.agency-switcher{height:52px;border:1px solid #44413d;border-radius:8px;background:#2a2927;display:grid;grid-template-columns:31px 1fr 16px;align-items:center;gap:9px;padding:8px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
.brand-mark{width:31px;height:31px;border-radius:7px;background:#f1f1ef;color:#161616;font-weight:900;display:grid;place-items:center;font-size:18px;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.agency-copy{min-width:0;display:flex;flex-direction:column}.agency-copy .eyebrow,.eyebrow{font-size:10px;color:var(--muted-2);line-height:1.1}.agency-copy strong{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.sidebar-nav{margin-top:14px;display:flex;flex-direction:column;gap:4px;flex:1;min-height:0}
.nav-group{padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid #2d2e2c}.nav-group:last-child{border-bottom:0}
.nav-group h2{font-size:10px;font-weight:500;color:#e3e1dc;margin:0 0 7px}
.nav-item{height:31px;padding:0 10px;border-radius:6px;color:#9e9e99;display:flex;align-items:center;gap:10px;font-size:12px;transition:.15s ease}.nav-item:hover{background:#292a28;color:#d5d3ce}.nav-item.active{background:#2b2b29;color:#ff8a34}.nav-item.active .icon{color:var(--accent)}
.profile-card{height:51px;border:1px solid #44413e;border-radius:8px;background:#292927;display:grid;grid-template-columns:31px minmax(0,1fr) 14px;gap:8px;align-items:center;padding:7px 8px;text-align:left}
.avatar{border:1px solid #4b4945;background:#3c3a37;color:white;display:grid;place-items:center;font-size:10px;font-weight:700}.avatar-user,.avatar-photo{width:31px;height:31px;border-radius:7px}.avatar-user{background:#68574f;color:#1f1e1c}.profile-copy{min-width:0;display:flex;flex-direction:column}.profile-copy strong{font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-copy small{font-size:9px;color:#7d7d79;margin-top:3px}.presence-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);vertical-align:middle;margin-right:4px}
.main{min-width:0;background:#2a2927}.topbar{height:55px;border-bottom:1px solid #3a3835;display:flex;align-items:center;padding:0 18px;justify-content:space-between}.breadcrumb{display:flex;align-items:center;gap:7px;font-size:12px;color:#8d8a84}.breadcrumb strong{color:#ee7c2c;font-weight:500}.top-actions{display:flex;align-items:center;gap:8px}.search-box{width:322px;height:35px;border:1px solid #484641;border-radius:7px;background:#302f2d;display:flex;align-items:center;gap:8px;padding:0 10px;color:#a9a7a2}.search-box input{border:0;background:transparent;color:#ddd;width:100%;min-width:0;font-size:11px}.search-box input::placeholder{color:#b9b6b0}.kbd{width:17px;height:17px;border-radius:4px;background:#3e3d3a;border:1px solid #4a4844;color:#8f8c86;display:grid;place-items:center;font-size:9px}.icon-button{width:35px;height:35px;border:1px solid #46443f;border-radius:7px;background:#302f2d;color:#8c8984;display:grid;place-items:center}.icon-button:hover{color:#ddd;background:#373633}.avatar-photo{width:33px;height:33px;background:#665248;color:white}.mobile-menu{display:none;background:none;border:0;padding:5px;margin-right:8px;color:#aaa}
.content{padding:14px 18px 20px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.page-heading h1{font-size:23px;font-weight:450;letter-spacing:-.4px;margin:0}.heading-actions{display:flex;gap:7px}.control-button,.primary-button,.date-pill{height:36px;border-radius:7px;border:1px solid #494641;background:#333230;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;font-size:11px}.control-button:hover,.date-pill:hover{background:#3a3936}.primary-button{background:#f27622;border-color:#ff8a38;color:white;font-weight:500;box-shadow:0 1px 0 rgba(255,255,255,.17) inset}.primary-button:hover{filter:brightness(1.07)}.primary-button.compact{height:30px;padding:0 12px}.plus{font-size:16px;line-height:1}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:15px}.stat-card{min-height:115px;border:1px solid #46433f;border-radius:10px;background:#2c2b29;display:grid;grid-template-columns:1fr 58px;grid-template-rows:1fr 31px;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.025) inset}.stat-main{padding:13px 13px 9px}.stat-label{font-family:var(--mono);font-size:10px;color:#99958e}.stat-value-row{display:flex;align-items:baseline;gap:8px;margin-top:8px}.stat-value-row strong{font-family:var(--mono);font-size:22px;letter-spacing:-1px}.stat-value-row span{font-size:10px;color:#7f7b75}.mini-bars{padding:22px 12px 8px 0;display:flex;align-items:center;justify-content:flex-end;gap:5px}.mini-bars i{display:block;width:1px;height:27px;background:#48443f}.mini-bars i:nth-child(1){height:19px}.mini-bars i:nth-child(3){height:35px}.mini-bars i:nth-child(5){height:26px}.mini-bars .hot{height:42px;background:var(--accent)}.stat-foot{grid-column:1/-1;border-top:1px solid #3a3834;background:#292826;display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-size:9px;color:#77746f}.stat-foot b{font-weight:500;color:var(--green)}.circle-arrow{display:grid;place-items:center;width:16px;height:16px;min-width:16px;min-height:16px;border-radius:50%;background:transparent;color:inherit;font-size:0}
.analytics-grid{display:grid;grid-template-columns:minmax(0,2.25fr) minmax(260px,1fr);gap:15px;margin-bottom:15px}.panel{border:1px solid #3f3d39;border-radius:10px;background:#2b2a28;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.02) inset}.panel-titlebar{height:39px;background:#252422;border-bottom:1px solid #34322f;display:flex;align-items:center;justify-content:space-between;padding:0 12px}.title-with-info{font-family:var(--mono);font-size:10px;letter-spacing:.2px;color:#aba7a0;display:flex;align-items:center;gap:6px}.info-dot{width:14px;height:14px;min-width:14px;min-height:14px;border-radius:50%;background:transparent;color:inherit;display:grid;place-items:center;font-size:0}.more-button,.row-action{border:1px solid #45423e;background:#302f2d;color:#77746e;border-radius:50%;font-size:10px;letter-spacing:1px;display:grid;place-items:center;padding:0}.more-button{width:22px;height:22px}.row-action{width:27px;height:27px;border-radius:7px}.sales-body{padding:12px 14px 14px}.sales-toolbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-bottom:13px}.revenue-total{display:flex;align-items:center;gap:12px}.revenue-total span{font-size:10px;color:#89867f}.revenue-total strong{font-family:var(--mono);font-size:22px}.legend{display:flex;gap:24px;justify-content:center;color:#8b8882;font-family:var(--mono);font-size:9px}.legend span{display:flex;align-items:center;gap:5px}.legend-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#64605b}.legend-dot.orange{background:var(--accent)}.legend-dot.neutral{background:#5d5a55}.segmented{height:31px;border-radius:17px;background:#252422;display:flex;padding:2px}.segmented button{border:0;background:transparent;color:#7e7b75;border-radius:15px;padding:0 13px;font-size:10px}.segmented button.selected{background:#393836;color:#ededeb;border:1px solid #4a4843}.sales-chart-wrap{display:grid;grid-template-columns:42px 1fr;height:278px}.y-axis{display:flex;flex-direction:column;justify-content:space-between;color:#77736d;font-size:9px;padding:2px 9px 6px 0;text-align:right}.sales-chart{position:relative;min-width:0;border-left:1px dashed #4a4742;border-bottom:1px dashed #45423e;background:#292826;overflow:hidden}.chart-grid-lines{position:absolute;inset:0;background-image:none;opacity:.65}.bar-field{position:absolute;inset:0 4px 0 12px;display:flex;align-items:flex-end;gap:2px}.sales-bar{height:calc(var(--h)*1%);flex:1;min-width:3px;max-width:10px;background:var(--accent);box-shadow:0 0 0 1px rgba(255,255,255,.03) inset}.sales-bar:nth-child(7n),.sales-bar:nth-child(11n){background:#b75b20}.june-marker{position:absolute;left:48%;top:4px;bottom:0;width:1px}.marker-line{position:absolute;top:0;bottom:0;border-left:1px dashed #a4a099}.marker-dot{position:absolute;top:95px;left:-4px;width:9px;height:9px;border-radius:50%;background:#292826;border:1px solid #fff}.chart-tooltip{position:absolute;top:78px;left:10px;width:145px;background:#373634;border:1px solid #55524d;border-radius:7px;padding:8px 10px;box-shadow:0 8px 25px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:8px;font-size:10px}.chart-tooltip>strong{font-size:11px;font-weight:500;color:#a6a29c;padding-bottom:6px;border-bottom:1px solid #4c4944}.chart-tooltip span{display:flex;align-items:center;gap:6px;color:#8b8881}.chart-tooltip b{margin-left:auto;color:#f0eeea;font-family:var(--mono);font-size:12px}.x-axis{padding-left:45px;display:grid;grid-template-columns:repeat(12,1fr);gap:1px;margin-top:10px;color:#77736e;font-size:9px;text-align:center}.x-axis strong{font-weight:600;color:#f4f2ef}
.revenue-body{padding:12px 11px 13px}.revenue-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.revenue-head>div{display:flex;flex-direction:column;gap:5px}.revenue-head span{font-size:9px;color:#87847e}.revenue-head strong{font-family:var(--mono);font-size:19px}.date-pill{height:31px;padding:0 9px;font-size:9px;color:#8f8c86;border-radius:16px;background:#2f2e2c}.ai-insight{width:100%;height:39px;margin-top:12px;border:1px solid #4b4844;border-radius:7px;background:#343331;display:grid;grid-template-columns:26px 1fr 18px;align-items:center;text-align:left;color:#e3e0dc;font-size:10px;padding:0 7px}.ai-insight .spark{width:25px;height:25px;border-radius:6px;background:#3f3e3b;display:grid;place-items:center;color:#ddd}.ai-insight>span:last-child{color:#6d6964}.revenue-chart{height:236px;margin-top:15px;position:relative;border-top:1px dashed #4a4742;border-bottom:1px solid #3d3b37}.revenue-grid{position:absolute;inset:0;background-image:none}.revenue-bars{position:absolute;inset:15px 10px 0;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}.revenue-bars span{width:3px;height:calc(var(--h)*1%);background:var(--accent);border-radius:2px 2px 0 0;box-shadow:0 0 8px rgba(255,116,23,.08)}.revenue-axis{display:flex;justify-content:space-between;color:#77736e;font-size:9px;margin-top:10px}
.transactions-panel{min-height:225px}.transactions-head{height:39px;background:#252422;border-bottom:1px solid #373532;display:flex;align-items:center;justify-content:space-between;padding:0 11px}.transactions-actions{display:flex;align-items:center;gap:7px}.table-search{width:220px;height:29px;border:1px solid #45423e;border-radius:6px;background:#2d2c2a;display:flex;align-items:center;gap:7px;padding:0 9px;color:#77736e}.table-search input{border:0;background:transparent;width:100%;font-size:9px;color:#ddd}.table-search input::placeholder{color:#77736e}.table-wrap{overflow:auto;padding:0 2px 6px}table{width:100%;border-collapse:separate;border-spacing:0;font-size:10px;white-space:nowrap}thead th{font-family:var(--mono);font-weight:400;color:#797670;text-align:left;height:32px;border-bottom:1px solid #3b3935;padding:0 9px;background:#2b2a28}tbody td{height:39px;border-bottom:1px solid #3c3935;padding:0 9px;color:#e6e3de}tbody tr:hover td{background:#2e2d2b}tbody tr:last-child td{border-bottom: none;}.check{width:30px;text-align:center;padding-left:6px!important;padding-right:4px!important}input[type="checkbox"]{appearance:none;width:12px;height:12px;border-radius:3px;background:#383631;border:1px solid #4b4842;vertical-align:middle}.muted{color:#77746e}.mono{font-family:var(--mono);font-weight:600}.status{display:inline-flex;align-items:center;gap:5px;border-radius:14px;padding:4px 10px;border:1px solid #484641;background:#383735;font-size:9px}.status i{width:7px;height:7px;border-radius:50%;background:currentColor;position:relative}.status-success{color:#19b986;background:#293a34}.status-pending{color:#f0ad2c;background:#3b3628}.status-refunded{color:#aaa7a1;background:#373735}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.68);z-index:50;display:grid;place-items:center;padding:20px}.modal-backdrop[hidden]{display:none}.modal{width:min(460px,100%);border:1px solid #4b4843;border-radius:12px;background:#2a2927;box-shadow:0 24px 70px rgba(0,0,0,.55)}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:18px;border-bottom:1px solid #3d3a36}.modal-head h2{margin:4px 0 0;font-size:20px}.modal form{padding:18px;display:flex;flex-direction:column;gap:14px}.modal label{display:flex;flex-direction:column;gap:6px;color:#a09c96;font-size:11px}.modal input{height:38px;border-radius:7px;border:1px solid #45423e;background:#22211f;color:#eee;padding:0 10px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:5px}
@media (max-width:1180px){.page-backdrop{padding:0}.app-shell{grid-template-columns:190px}.search-box{width:240px}.stats-grid{grid-template-columns:repeat(2,1fr)}.analytics-grid{grid-template-columns:1fr}.revenue-chart{height:190px}.sidebar{padding-left:10px;padding-right:10px}.sales-toolbar{grid-template-columns:1fr auto}.legend{justify-content:flex-start;grid-column:1/-1;grid-row:2}.transactions-panel{min-height:0}}
@media (max-width:850px){.page-backdrop{padding:0;background:#242320}.app-shell{border-radius:0;border:0;min-height:100vh;grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:0;bottom:0;width:230px;transform:translateX(-102%);transition:transform .2s ease;box-shadow:10px 0 30px rgba(0,0,0,.35)}.app-shell.sidebar-open .sidebar{transform:translateX(0)}.mobile-menu{display:grid;place-items:center}.breadcrumb{margin-right:auto}.topbar{padding:0 12px}.search-box{width:180px}.page-heading{align-items:flex-start;flex-direction:column}.heading-actions{width:100%;overflow:auto}.content{padding:14px 12px}.analytics-grid{display:block}.revenue-panel{margin-top:10px}}
@media (max-width:620px){.top-actions .icon-button,.top-actions .avatar-photo,.kbd{display:none}.search-box{width:155px}.stats-grid{grid-template-columns:1fr}.sales-toolbar{display:flex;flex-wrap:wrap}.revenue-total{width:100%}.legend{order:3;width:100%;justify-content:flex-start}.sales-chart-wrap{height:230px;grid-template-columns:32px 1fr}.x-axis{padding-left:33px}.chart-tooltip{display:none}.transactions-head{height:auto;min-height:45px;align-items:flex-start;flex-direction:column;padding:9px}.transactions-actions{width:100%}.table-search{flex:1}.form-grid{grid-template-columns:1fr}.page-heading h1{font-size:20px}}

/* Functional mock pages — intentionally reuse the original dashboard design language. */
.inline-toast{margin-bottom:10px;border:1px solid #4b4844;border-radius:7px;background:#30312e;color:#b7e5d5;padding:10px 12px;font-size:11px}.inline-toast.error{color:#f0b6a8;background:#342b28}.page-subtitle{margin:-5px 0 14px;color:var(--muted-2);font-size:11px}.panel-pad{padding:14px}.metric-line{display:grid;grid-template-columns:minmax(120px,1fr) minmax(100px,1.5fr) 42px;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #3a3834}.metric-line:last-child{border-bottom:0}.metric-line>div:first-child{display:flex;flex-direction:column;gap:4px}.metric-line strong{font-size:11px;font-weight:500}.metric-line span{font-size:9px;color:var(--muted-2)}.metric-line>b{font:600 10px var(--mono);text-align:right;color:#d8d5cf}.progress-track{height:6px;border-radius:6px;background:#22211f;overflow:hidden}.progress-track i,.progress-inline i{display:block;height:100%;width:var(--w);background:var(--accent);border-radius:inherit}.progress-inline{width:110px;height:6px;border-radius:6px;background:#22211f;display:inline-block;position:relative;vertical-align:middle;margin-right:32px}.progress-inline b{position:absolute;left:calc(100% + 8px);top:-3px;font:600 9px var(--mono);color:#9b9891}.person-cell{display:inline-flex;align-items:center;gap:8px}.mini-avatar,.thread-avatar{width:25px;height:25px;border:1px solid #4b4945;border-radius:6px;background:#393835;color:#d9d6d0;display:inline-grid;place-items:center;font:600 9px var(--mono)}.form-select{height:38px;border-radius:7px;border:1px solid #45423e;background:#22211f;color:#eee;padding:0 10px;outline:none}.status-failed,.status-high,.status-out-of-stock,.status-attention{color:#e9826c;background:#3b2c29}.status-active,.status-connected,.status-paid,.status-online,.status-delivered,.status-vip,.status-open{color:#19b986;background:#293a34}.status-low-stock,.status-medium,.status-scheduled,.status-packing,.status-shipped,.status-repeat,.status-in-progress,.status-waiting{color:#f0ad2c;background:#3b3628}.status-completed,.status-refunded,.status-offline,.status-away,.status-paused,.status-available,.status-new,.status-resolved,.status-on-hold{color:#aaa7a1;background:#373735}.status-in-meeting{color:#9ea8d9;background:#2e3039}.permission-mark{font-size:9px}.permission-mark.yes{color:var(--green)}.permission-mark.no{color:#77746f}.small-brand{width:35px;height:35px;font-size:13px;transform:none}.billing-card{display:flex;align-items:center;gap:12px;min-height:112px}.billing-card>div{display:flex;flex-direction:column;gap:4px}.billing-card strong{font:600 16px var(--mono)}.billing-card small{color:var(--muted-2);font-size:9px}
.message-panel{min-height:calc(100vh - 98px)}.message-columns{display:grid;grid-template-columns:340px minmax(0,1fr);min-height:calc(100vh - 100px)}.message-list{border-right:1px solid #3f3d39;min-width:0}.compact-search{width:145px}.thread-item{width:100%;border:0;border-bottom:1px solid #393733;background:#2b2a28;color:inherit;padding:11px;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:9px;text-align:left}.thread-item:hover,.thread-item.selected{background:#302f2d}.thread-copy{min-width:0;display:flex;flex-direction:column;gap:3px}.thread-copy strong{font-size:11px;font-weight:500}.thread-copy small,.thread-copy em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.thread-copy small{font-size:9px;color:#a19e98}.thread-copy em{font-size:9px;color:#77746f;font-style:normal}.thread-meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.thread-meta small{font-size:8px;color:#77746f}.thread-meta b{min-width:17px;height:17px;border-radius:9px;background:var(--accent);display:grid;place-items:center;font:600 8px var(--mono)}.conversation{display:grid;grid-template-rows:49px 1fr 57px;min-width:0}.conversation-head{border-bottom:1px solid #3b3935;padding:0 14px;display:flex;align-items:center;justify-content:space-between}.conversation-head>div{display:flex;flex-direction:column;gap:3px}.conversation-head strong{font-size:12px;font-weight:500}.conversation-head span{font-size:9px;color:#77746f}.conversation-body{padding:20px;overflow:auto;display:flex;flex-direction:column;gap:10px;background:#292826}.bubble-row{display:flex}.bubble-row.mine{justify-content:flex-end}.message-bubble{max-width:65%;padding:9px 11px;border:1px solid #45423e;border-radius:9px;background:#302f2d}.mine .message-bubble{border-color:#6e4c35;background:#3a2f28}.message-bubble p{margin:0;font-size:10px;line-height:1.55}.message-bubble span{display:block;margin-top:5px;text-align:right;font-size:8px;color:#77746f}.composer{border-top:1px solid #3b3935;padding:10px;display:flex;gap:8px}.composer input{flex:1;border:1px solid #45423e;border-radius:7px;background:#22211f;color:#eee;padding:0 11px;font-size:10px}.faq-list{padding:0 14px}.faq-item{border-bottom:1px solid #3a3834}.faq-item summary{list-style:none;cursor:pointer;padding:14px 2px;display:flex;justify-content:space-between;font-size:11px}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary span{color:var(--accent);font-size:16px}.faq-item p{margin:0 0 14px;color:#908d87;font-size:10px;line-height:1.6;max-width:800px}.settings-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:10px}.settings-fields{padding:15px;display:grid;grid-template-columns:1fr 1fr;gap:13px}.settings-fields label{display:flex;flex-direction:column;gap:6px;font-size:10px;color:#9b9891}.settings-fields input{height:38px;border-radius:7px;border:1px solid #45423e;background:#22211f;color:#eee;padding:0 10px}.preference-list{padding:3px 14px}.toggle-row{display:grid;grid-template-columns:1fr 36px;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #3a3834;cursor:pointer}.toggle-row:last-child{border-bottom:0}.toggle-row>span{display:flex;flex-direction:column;gap:4px}.toggle-row strong{font-size:11px;font-weight:500}.toggle-row small{font-size:9px;color:#77746f}.toggle-input{position:absolute;opacity:0}.toggle-row>i{width:34px;height:18px;border-radius:10px;background:#44413d;position:relative}.toggle-row>i:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#aaa7a1;top:2px;left:2px;transition:.15s}.toggle-input:checked+i{background:#8c4d26}.toggle-input:checked+i:after{left:18px;background:var(--accent)}
@media (max-width:900px){.message-columns{grid-template-columns:1fr}.message-list{border-right:0}.conversation{min-height:560px;border-top:1px solid #3f3d39}.settings-grid{grid-template-columns:1fr}.settings-fields{grid-template-columns:1fr}.metric-line{grid-template-columns:1fr 1fr 35px}}
@media (max-width:620px){.message-bubble{max-width:88%}.compact-search{display:none}}

/* ========================================================================== 
   Precision + directional layered-card system (v5)
   ========================================================================== */

:root{
    /* Rear/base is intentionally darker than the application background. */
    --layer-base:#252422;
    --layer-base-border:transparent;

    /* The FRONT card uses the exact same colour as the main app background. */
    --surface-bg:#2a2927;
    --surface-border:#2a2927;
    --surface-highlight:rgba(255,255,255,.025);
    --surface-shadow:0 2px 5px rgba(0,0,0,.22);

    /* KPI: rear/base card is exposed at the BOTTOM. */
    --kpi-front-inset-left:2px;
    --kpi-front-inset-right:2px;
    --kpi-front-inset-top:2px;
    --kpi-front-reveal-bottom:33px;

    /* Content panel: rear/base card is exposed at the TOP.
       The 2px values are only the deliberate thin edge; flex-fill below
       prevents an arbitrary dark band when a grid item stretches taller. */
    --panel-front-inset-x:2px;
    --panel-front-inset-bottom:2px;
    --panel-reveal-top:40px;
}

/* No accidental tilt/skew. */
.brand-mark,
button,.icon-button,.more-button,.row-action,.circle-arrow,.info-dot,.kbd,
.control-button,.primary-button,.date-pill,.table-search,.search-box,.form-select,
.modal input,.settings-fields input,.composer input{
    transform:none;
    font-style:normal;
}
.brand-mark{line-height:1}
.icon-button,.more-button,.row-action,.circle-arrow,.info-dot,.kbd{flex:0 0 auto}
.icon-button{padding:0;line-height:1}

/* Precise ellipsis control; the visual itself is the SVG #i-more-horizontal icon. */
.more-button,.row-action{
    letter-spacing:0;
    line-height:1;
    align-items:center;
    justify-content:center;
}
.more-button{
    width:24px;height:24px;min-width:24px;min-height:24px;
    border-radius:50%;
}
.row-action{
    width:28px;height:28px;min-width:28px;min-height:28px;
    border-radius:7px;
}
/* --------------------------------------------------------------------------
   TYPE A — KPI / summary card
   Direction: BOTTOM reveal.

   Outer .stat-card = rear/base card.
   ::before          = real second rounded front card.
   The front card is almost full-size, but its bottom is shortened by 33px.
   -------------------------------------------------------------------------- */
.stat-card{
    position:relative;
    isolation:isolate;
    min-height:124px;
    border:1px solid var(--layer-base-border);
    border-radius:12px;
    background:var(--layer-base);
    grid-template-columns:minmax(0,1fr) 60px;
    grid-template-rows:minmax(0,1fr) 34px;
    overflow:hidden;
    box-shadow: none;
}
.stat-card::before{
    content:"";
    position:absolute;
    z-index:0;
    top:var(--kpi-front-inset-top);
    left:var(--kpi-front-inset-left);
    right:var(--kpi-front-inset-right);
    bottom:var(--kpi-front-reveal-bottom);
    border:1px solid var(--surface-border);
    border-radius:11px;
    background:var(--surface-bg);
    box-shadow:0 1px 0 var(--surface-highlight) inset,var(--surface-shadow);
    pointer-events:none;
}
.stat-main,.mini-bars,.stat-foot{position:relative;z-index:1}
.stat-main{padding:16px 15px 10px}
.mini-bars{padding:25px 14px 12px 0;gap:6px}
.mini-bars i{width:2px;border-radius:2px}
.stat-foot{
    grid-column:1/-1;
    border-top:0;
    background:transparent;
    min-height:34px;
    padding:0 13px;
}
.stat-label{line-height:1.15}
.stat-value-row{margin-top:10px}
.stat-value-row strong{line-height:1}
.circle-arrow{
    width:16px;height:16px;min-width:16px;min-height:16px;
    border-radius:50%;line-height:1;background:transparent;
}

/* --------------------------------------------------------------------------
   TYPE B — chart/table/settings content panel
   Direction: TOP reveal (the inverse of KPI cards).

   Outer .panel.layer-top = rear/base card and owns the visible title/header.
   Direct .panel-surface   = the second rounded front card below that header.
   Only the deliberate 2px edge remains visible on left/right/bottom.
   The surface flex-fills the body so no extra rear area can hang below it.
   -------------------------------------------------------------------------- */
.panel{
    position:relative;
    border:1px solid #45423e;
    border-radius:11px;
    background:#2b2a28;
    overflow:hidden;
    box-shadow:0 1px 0 var(--surface-highlight) inset;
}
.panel.layer-top{
    background:var(--layer-base);
    border-color:var(--layer-base-border);
    box-shadow: none;

    /* Critical: the rear card may be stretched by CSS Grid, but the front
       card must always consume the entire remaining body. This removes
       accidental/excess rear-card exposure at the bottom. */
    display:flex;
    flex-direction:column;
}
.panel.layer-top > .panel-titlebar,
.panel.layer-top > .transactions-head{
    min-height:var(--panel-reveal-top);
    height:var(--panel-reveal-top);
    background:transparent;
    border-bottom:0;
    position:relative;
    z-index:2;
}
.panel.layer-top > .panel-surface{
    position:relative;
    z-index:1;
    margin-left:var(--panel-front-inset-x);
    margin-right:var(--panel-front-inset-x);
    margin-bottom:var(--panel-front-inset-bottom);

    /* Fill all available body height instead of stopping at content height. */
    flex:1 1 auto;
    min-height:0;

    border:1px solid var(--surface-border);
    border-radius:10px;
    background:var(--surface-bg);
    box-shadow:0 1px 0 var(--surface-highlight) inset,var(--surface-shadow);
}

/* Each surface keeps its own original internal spacing, but now it is a
   physically separate rounded front card rather than a fake box-shadow. */
.panel.layer-top > .sales-body,
.panel.layer-top > .revenue-body,
.panel.layer-top > .panel-pad,
.panel.layer-top > .faq-list,
.panel.layer-top > .settings-fields,
.panel.layer-top > .preference-list{
    overflow:hidden;
}
.panel.layer-top > .table-wrap{
    width:auto;
    overflow:auto;
    padding:0 2px 6px;
    background:var(--surface-bg);
}


/* Front-surface colour contract: all layered FRONT cards match the app canvas.
   More specific than older component rules, so no page can accidentally
   reintroduce a lighter front card. */
.stat-card::before,
.panel.layer-top > .sales-body,
.panel.layer-top > .revenue-body,
.panel.layer-top > .panel-pad,
.panel.layer-top > .table-wrap,
.panel.layer-top > .faq-list,
.panel.layer-top > .settings-fields,
.panel.layer-top > .preference-list{
    background:var(--surface-bg);
}

/* A workspace without a top/base-vs-front relationship must remain single.
   Do not force a fake double-card direction on Messages or utility containers. */
.message-panel{
    box-shadow:0 1px 0 var(--surface-highlight) inset;
}

/* Header line is supplied by the front card's own top border. */
.panel-titlebar,.transactions-head,.conversation-head{border-bottom-color:#3a3834}
.panel.layer-top > .panel-titlebar,
.panel.layer-top > .transactions-head{border-bottom:0}

/* Precise small circles. */
.info-dot{
    width:14px;height:14px;min-width:14px;min-height:14px;
    border-radius:50%;line-height:14px;text-align:center;background:transparent;
}
.status i,.presence-dot,.legend-dot{aspect-ratio:1/1;flex:0 0 auto}

/* Charts remain perfectly straight. */
.sales-bar,.revenue-bars span{height:var(--h);transform:none}
.sales-bar{border-radius:1px 1px 0 0}
.revenue-bars span{width:3px;border-radius:2px 2px 0 0;box-shadow:none}

/* Buttons/inputs share a deterministic baseline. */
.control-button,.primary-button,.date-pill{min-height:36px;line-height:1}
.primary-button.compact{min-height:30px}
td:last-child .row-action{margin-inline:auto}

/* Layered panels should retain the same spacing between separate cards. */
.analytics-grid,.transactions-panel{margin-bottom:15px}

@media (max-width:620px){
    .stat-card{min-height:120px}
    .stat-card::before{bottom:var(--kpi-front-reveal-bottom)}

    /* Transaction headers wrap on mobile. The front card follows naturally
       because it is a real child element, not a fixed-position pseudo-card. */
    .panel.layer-top > .transactions-head{
        height:auto;
        min-height:45px;
    }
}



/* Custom solid micro icons. These are not template glyphs; the arrow-up and
   info mark are hand-drawn filled badge icons for high-density displays. */
.circle-arrow .icon use,.info-dot .icon use{pointer-events:none}
/* ============================================================================
   VECTOR ICON SYSTEM — no font/Unicode glyphs for interface controls
   ========================================================================== */
.icon-micro{width:16px;height:16px;stroke-width:0}
.icon-info{width:14px;height:14px;stroke-width:0}
.circle-arrow .icon{display:block;color:inherit;overflow:visible}
.info-dot{font-size:0;color:inherit}
.info-dot .icon{display:block;overflow:visible}
.dots-icon{width:13px;height:13px;display:block;pointer-events:none}
.sort-icon{width:11px;height:11px;margin-left:3px;vertical-align:-1px;color:#68645e;stroke-width:2.05}
thead th:hover .sort-icon{color:#a7a39c}
.primary-button>.icon,.control-button>.icon{flex:0 0 auto}
.spark .icon{width:13px;height:13px;stroke-width:1.5}
.ai-arrow{display:grid;place-items:center;color:#77736e}
.ai-arrow .icon{display:block}
.kbd-icon{font-size:0}
.kbd-icon .icon{width:11px;height:11px;stroke-width:2}
.permission-mark{display:inline-flex;align-items:center;gap:5px}
.permission-mark .permission-icon{stroke-width:2}
.faq-icon{width:18px;height:18px;display:grid;place-items:center;color:var(--accent);flex:0 0 auto}
.faq-icon .icon{width:13px;height:13px;stroke-width:2.05}
.faq-minus{display:none}
.faq-item[open] .faq-plus{display:none}
.faq-item[open] .faq-minus{display:block}
.card-number{display:flex;align-items:center;gap:7px}
.card-mask{display:inline-flex;align-items:center;gap:3px}
.card-mask i{display:block;width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.9}


/* ============================================================================
   CINEVA PUBLIC APP + DASHBOARD EXTENSIONS
   ========================================================================== */
.page-backdrop-flat{padding:0}
.profile-stack{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.back-link{color:#9d9991;font-size:11px;padding:0 4px;text-decoration:none}
.back-link:hover{color:#ece9e5}
.spacer8{height:8px}
.status-failed,.status-archived{color:#c78787;background:#3a2929}
.status-paid,.status-published,.status-ready,.status-granted,.status-reviewed,.status-received{color:#19b986;background:#293a34}
.status-expired,.status-draft,.status-waiting{color:#f0ad2c;background:#3b3628}
.status-uploading,.status-open{color:#72b4ff;background:#243345}
.public-shell{min-height:100vh;background:#1f1e1c;color:#ece8e2}
.public-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 28px;border-bottom:1px solid #36332f;position:sticky;top:0;background:rgba(31,30,28,.92);backdrop-filter:blur(12px);z-index:20}
.public-brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.public-brand strong{display:block;font-size:18px}.public-brand small{display:block;color:#99948c;font-size:11px;margin-top:2px}
.public-nav{display:flex;align-items:center;gap:10px}.public-nav-link{text-decoration:none;color:#a9a39b;padding:10px 14px;border-radius:999px;font-size:12px}.public-nav-link.active,.public-nav-link:hover{background:#2e2c29;color:#f2efea}
.public-actions{display:flex;align-items:center;gap:12px}.ghost-button{text-decoration:none;color:#eee;background:#2f2d2a;border:1px solid #47433e;border-radius:999px;padding:10px 14px;display:inline-flex;align-items:center;gap:8px;font-size:12px}
.public-user-menu{position:relative}.public-user-trigger{display:flex;align-items:center;gap:10px;background:#2f2d2a;border:1px solid #47433e;color:#f1ede7;border-radius:12px;padding:6px 10px}.public-user-dropdown{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;background:#262522;border:1px solid #403d38;border-radius:12px;padding:8px;display:none;box-shadow:0 14px 30px rgba(0,0,0,.35)}.public-user-dropdown a{display:block;color:#ede9e3;text-decoration:none;padding:10px 12px;border-radius:8px;font-size:12px}.public-user-dropdown a:hover{background:#302e2b}.public-user-menu:hover .public-user-dropdown{display:block}
.public-content{padding:28px}.discover-hero,.detail-hero{display:grid;grid-template-columns:1.4fr .9fr;gap:18px;align-items:stretch;margin-bottom:20px}.discover-hero h1,.detail-hero h1{font-size:40px;line-height:1.08;margin:10px 0 12px;max-width:13ch}.discover-hero p,.detail-hero p{color:#c5c0b8;max-width:60ch}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.public-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.public-kpi,.public-panel,.hero-card,.content-card{border:1px solid #403d38;border-radius:18px;background:#272623;box-shadow:0 1px 0 rgba(255,255,255,.03) inset}.public-kpi{padding:16px}.public-kpi span{display:block;color:#969086;font-size:11px;margin-bottom:8px}.public-kpi strong{font-family:var(--mono);font-size:24px}.hero-card{padding:14px}.hero-poster,.detail-backdrop{height:100%;min-height:320px;border-radius:14px;background:#242321;padding:18px;display:flex;flex-direction:column;justify-content:flex-end}.hero-poster h3{font-size:30px;margin:8px 0}.content-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,128,41,.14);border:1px solid rgba(255,128,41,.32);color:#ff943a;border-radius:999px;padding:7px 10px;font-size:11px;width:max-content}.hero-meta,.card-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.hero-meta span,.card-meta span{display:inline-flex;align-items:center;border:1px solid #45413c;background:#2f2d2a;color:#e8e3db;border-radius:999px;padding:7px 10px;font-size:11px}.public-section{margin-top:22px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.section-head h1,.section-head h2{margin:0}.section-head a{color:#ff943a;text-decoration:none;font-size:12px}.content-grid,.catalog-grid,.dashboard-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.content-card{padding:16px}.content-card h3{margin:12px 0 8px}.content-card p{margin:0;color:#bbb5ad;font-size:13px;line-height:1.5}.content-card.featured{background:#262522}.content-card.small{display:block;text-decoration:none;color:inherit}.split-two{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}.public-panel{padding:16px}.flow-list{margin:0;padding-left:18px;color:#cdc7bf;display:grid;gap:10px}.flow-list.compact{gap:8px}.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.browse-card{min-height:180px}.query-box{border:1px solid #403d38;border-radius:16px;background:#262522;padding:16px;margin-bottom:14px}.query-box strong{font-size:28px;display:block;margin:8px 0}.single-column{grid-template-columns:1fr}.detail-side{min-height:320px}
@media (max-width:1100px){.discover-hero,.detail-hero,.split-two{grid-template-columns:1fr}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.content-grid,.dashboard-links,.public-kpis{grid-template-columns:1fr 1fr}.public-topbar{flex-wrap:wrap}}
@media (max-width:720px){.public-topbar,.public-content{padding:16px}.public-nav{order:3;width:100%;overflow:auto}.discover-hero h1,.detail-hero h1{font-size:30px}.content-grid,.dashboard-links,.public-kpis,.catalog-grid{grid-template-columns:1fr}.hero-poster,.detail-backdrop{min-height:240px}}


/* ============================================================================
   CINEVA LANDING — prototype layout, existing dashboard visual language
   No visual colour gradients are used.
   ========================================================================== */
.prototype-hero{
    max-width:1200px;
    margin:0 auto;
    padding:88px 24px 26px;
    text-align:center;
}
.prototype-hero h1{
    margin:14px auto 18px;
    max-width:none;
    font-size:clamp(48px,7vw,78px);
    line-height:1.03;
    letter-spacing:-2px;
    font-weight:450;
}
.prototype-hero>p{
    max-width:650px;
    margin:0 auto;
    color:#aaa59d;
    font-size:15px;
    line-height:1.7;
}
.hero-actions.centered{justify-content:center;margin-top:24px}
.landing-ridge{display:block;width:100%;height:90px;margin-top:42px}
.landing-ridge path{fill:none;stroke:#6c6861;stroke-width:1.1;vector-effect:non-scaling-stroke}
.landing-ridge .ridge-muted{opacity:.35}
.landing-wrap{max-width:1200px;margin:0 auto;padding:0 24px 70px}
.landing-banner{
    border:1px solid #3f3c37;
    background:#272623;
    border-radius:11px;
    padding:15px 17px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.landing-banner strong{display:block;margin-top:5px;font-size:13px;font-weight:550}
.landing-banner p{margin:3px 0 0;color:#8f8a82;font-size:11px;line-height:1.5}
.landing-section{margin-top:54px}
.landing-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.landing-section-head h2,.research-section h2{margin:5px 0 0;font-size:30px;font-weight:450;letter-spacing:-.6px}
.landing-section-head>a,.research-link{color:#d9d5cf;text-decoration:none;font-size:11px}
.landing-section-head>a:hover,.research-link:hover{color:#ff8a34}
.prototype-movie-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.prototype-movie-card{min-width:0;color:inherit;text-decoration:none}
.prototype-poster{
    position:relative;
    aspect-ratio:2/3;
    border:1px solid #3e3b36;
    border-radius:10px;
    background:#242321;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:12px;
    transition:border-color .18s ease,transform .18s ease;
}
.prototype-movie-card:hover .prototype-poster{border-color:#59544d;transform:translateY(-1px)}
.prototype-poster .content-chip{position:absolute;top:10px;left:10px}
.prototype-poster strong{position:relative;font-size:13px;font-weight:550;line-height:1.35}
.prototype-poster small{position:relative;margin-top:5px;color:#8e8981;font-size:9px}
.poster-ridge{position:absolute;left:0;right:0;bottom:38px;width:100%;height:70px;opacity:.42}
.poster-ridge path{fill:none;stroke:#6f6a63;stroke-width:1;vector-effect:non-scaling-stroke}
.prototype-movie-meta{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:9px;color:#858079}
.prototype-movie-meta b{font:600 10px var(--mono);color:#dedad4}
.research-section{max-width:720px;padding-bottom:10px}
.research-section>p{color:#959088;line-height:1.7;margin:10px 0 16px;font-size:12px}
.landing-search{display:flex;gap:8px;max-width:520px}
.landing-search label{height:36px;flex:1;border:1px solid #494641;border-radius:7px;background:#252422;display:flex;align-items:center;gap:8px;padding:0 11px;color:#858079}
.landing-search input{border:0;background:transparent;color:#ece9e5;width:100%;outline:none;font:11px var(--mono)}
.research-link{display:inline-block;margin-top:12px}

/* Remove legacy split-hero presentation on Discover only. */
.prototype-hero + .landing-wrap .content-chip{border-radius:999px}

/* ============================================================================
   SLIDING SEGMENTED TABS — labels stay fixed; only the background pill moves.
   ========================================================================== */
:root{
    --tabs-dur:250ms;
    --tabs-ease:cubic-bezier(.22,1,.36,1);
}
.segmented{
    position:relative;
    height:31px;
    border-radius:17px;
    background:#252422;
    display:inline-flex;
    align-items:center;
    gap:2px;
    padding:2px;
    overflow:hidden;
}
.segmented button{
    position:relative;
    z-index:1;
    height:27px;
    min-width:0;
    border:0;
    background:transparent!important;
    color:#7e7b75;
    border-radius:15px;
    padding:0 13px;
    font-size:10px;
    line-height:27px;
    white-space:nowrap;
    transition:color var(--tabs-dur) var(--tabs-ease);
}
.segmented button.selected,.segmented button[aria-selected="true"]{color:#ededeb;border:0}
.segmented button:not([aria-selected="true"]):hover{color:#bcb8b1}
.segmented-pill{
    position:absolute;
    top:2px;
    left:0;
    height:27px;
    width:0;
    border:1px solid #4a4843;
    background:#393836;
    border-radius:15px;
    transform:translateX(0);
    transition:transform var(--tabs-dur) var(--tabs-ease),width var(--tabs-dur) var(--tabs-ease);
    will-change:transform,width;
    z-index:0;
    pointer-events:none;
}

@media (prefers-reduced-motion:reduce){.segmented-pill,.segmented button{transition:none!important}}
@media (max-width:1100px){.prototype-movie-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.prototype-hero{padding:58px 16px 20px}.landing-wrap{padding:0 16px 50px}.prototype-movie-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.landing-section-head{align-items:flex-start;flex-direction:column}.landing-search{flex-direction:column}.landing-search label{min-height:36px}}

/* ============================================================================
   PUBLIC HEADER SLIDING TABS + STATIC PUBLIC SHELL
   The header never participates in route loading. Only .public-content swaps.
   Labels are stationary; only the measured pill moves underneath them.
   ========================================================================== */
:root{
    --public-tabs-dur:250ms;
    --public-tabs-ease:cubic-bezier(.22,1,.36,1);
    --public-tabs-muted:#a9a39b;
    --public-tabs-active:#f2efea;
    --public-tabs-bar:#242320;
    --public-tabs-pill:#363430;
}
.public-tabs{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:3px;
    padding:3px;
    border-radius:48px;
    background:var(--public-tabs-bar);
    overflow:visible;
}
.public-tab{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:4px 14px;
    border-radius:48px;
    color:var(--public-tabs-muted);
    background:transparent!important;
    text-decoration:none!important;
    white-space:nowrap;
    transition:color var(--public-tabs-dur) var(--public-tabs-ease);
}
.public-tab[aria-selected="true"],
.public-tab:hover{
    color:var(--public-tabs-active);
}
.public-tabs-pill{
    position:absolute;
    top:3px;
    left:0;
    height:30px;
    width:0;
    border-radius:48px;
    background:var(--public-tabs-pill);
    transform:translateX(0);
    transition:
        transform var(--public-tabs-dur) var(--public-tabs-ease),
        width var(--public-tabs-dur) var(--public-tabs-ease);
    will-change:transform,width;
    z-index:0;
    pointer-events:none;
}
.public-content{
    transition:opacity 120ms ease;
}
.public-content.is-route-loading{
    opacity:.58;
    pointer-events:none;
}
.public-content.route-enter{
    animation:public-content-enter 180ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes public-content-enter{
    from{opacity:.72;transform:translateY(2px)}
    to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
    .public-tabs-pill,.public-tab,.public-content{transition:none!important}
    .public-content.route-enter{animation:none!important}
}
@media (max-width:720px){
    .public-tabs{width:max-content;max-width:100%}
    .public-nav.public-tabs{overflow:visible}
}

/* ============================================================================
   CINEVA v4 — full landing + route semantics cleanup
   ========================================================================== */
.public-content{padding:0}
.public-content > .public-section,
.public-content > .detail-hero{
    margin-left:28px;
    margin-right:28px;
}

.landing-page-full{width:100%;min-height:100vh;background:#1f1e1c}
.prototype-hero.prototype-hero-full{
    max-width:none;
    width:100%;
    min-height:calc(100vh - 78px);
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:1px solid #34312d;
}
.landing-inner{
    width:100%;
    margin:0;
    padding-left:clamp(24px,4vw,72px);
    padding-right:clamp(24px,4vw,72px);
}
.hero-inner{padding-top:68px;padding-bottom:32px;text-align:center}
.prototype-hero-full h1{font-size:clamp(52px,7vw,92px);margin-top:14px}
.prototype-hero-full>p,.prototype-hero-full .hero-inner>p{max-width:720px}
.prototype-hero-full .landing-ridge{height:112px;margin-top:54px}
.landing-full-section{width:100%;padding:42px 0;border-bottom:1px solid #34312d}
.landing-announcement-section{padding-top:24px;padding-bottom:24px;background:#211f1d}
.landing-catalog-section{background:#1f1e1c}
.landing-research-section{background:#232220}
.landing-flow-section{background:#1f1e1c;padding-bottom:64px}
.prototype-movie-grid-full{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.landing-research-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:36px;align-items:center}
.research-copy h2{font-size:34px;margin:6px 0 10px;font-weight:450;letter-spacing:-.7px}
.research-copy>p{max-width:720px;color:#959088;font-size:12px;line-height:1.75;margin-bottom:18px}
.research-proof{border:1px solid #3f3c37;border-radius:11px;background:#272623;padding:14px 16px;box-shadow:var(--surface-shadow)}
.research-proof-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid #383530}
.research-proof-row:last-of-type{border-bottom:0}
.research-proof-row span{font:10px var(--mono);color:#817c75}
.research-proof-row strong{font:600 11px var(--mono);color:#e4e0da;text-align:right}
.research-proof .research-link{margin-top:13px}
.landing-flow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.landing-flow-card{border:1px solid #3e3b36;border-radius:11px;background:#272623;padding:18px;min-height:150px;box-shadow:var(--surface-shadow)}
.landing-flow-card>span{display:block;font:600 10px var(--mono);color:#ff8a34;margin-bottom:20px}
.landing-flow-card>strong{display:block;font-size:14px;margin-bottom:7px}
.landing-flow-card>p{margin:0;color:#8f8a82;font-size:11px;line-height:1.6}

@media (max-width:1100px){
    .prototype-movie-grid-full{grid-template-columns:repeat(3,minmax(0,1fr))}
    .landing-research-grid{grid-template-columns:1fr}
    .landing-flow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
    .public-content > .public-section,
    .public-content > .detail-hero{margin-left:16px;margin-right:16px}
    .prototype-hero.prototype-hero-full{min-height:calc(100vh - 120px)}
    .hero-inner{padding-top:42px;padding-bottom:20px}
    .prototype-hero-full .landing-ridge{height:76px;margin-top:36px}
    .landing-full-section{padding:32px 0}
    .prototype-movie-grid-full{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .landing-flow-grid{grid-template-columns:1fr}
}

/* ============================================================================
   CINEVA PRODUCTION EXTENSIONS (aplikasi nyata — data asli, bukan mock)
   Mengikuti token & kontrak DESIGN.md: solid, tanpa gradient, tanpa skew.
   ========================================================================== */

/* Forms ---------------------------------------------------------------- */
.form-stack{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field-label{font:10px var(--mono);color:#99958e;letter-spacing:.3px}
.field-control{width:100%;height:38px;border-radius:7px;border:1px solid #45423e;background:#22211f;color:#eee;padding:0 10px;font-size:12px;outline:none}
textarea.field-control{height:auto;min-height:86px;padding:9px 10px;line-height:1.5;resize:vertical}
select.field-control{appearance:auto}
input[type="file"].field-control{height:auto;padding:8px 10px;font-size:11px;color:#a5a29b}
.field-control:focus{border-color:#615c54}
.field-control::placeholder{color:#77746e}
.field-hint{font-size:9px;color:var(--muted-2)}
.check-row{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:#c9c5be;cursor:pointer}
.check-grid{display:flex;flex-wrap:wrap;gap:8px}
.check-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid #45423e;border-radius:7px;background:#22211f;padding:7px 11px;font-size:11px;color:#c9c5be;cursor:pointer}
.check-chip input{margin:0;width:12px;height:12px}
.check-chip:has(input:checked){border-color:#8a5a33;background:#2b2622;color:#ffb27a}
.form-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}

/* Buttons --------------------------------------------------------------- */
.danger-button{height:36px;border-radius:7px;border:1px solid #6d3f36;background:#3b2c29;color:#e9826c;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;font-size:11px}
.danger-button:hover{background:#45322d}
.control-button.compact,.danger-button.compact{height:30px;padding:0 12px}
button:disabled,.primary-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

/* Flash & errors -------------------------------------------------------- */
.flash{margin-bottom:12px;border:1px solid #4b4844;border-radius:7px;background:#30312e;color:#b7e5d5;padding:10px 12px;font-size:11px;line-height:1.5}
.flash-error{color:#f0b6a8;background:#342b28;border-color:#5a423c}
.flash-info{color:#b9c8e5;background:#2b2f36;border-color:#414a58}
.form-errors{margin:0 0 12px;border:1px solid #6d3f36;border-radius:7px;background:#342b28;padding:10px 12px}
.form-errors p{margin:0 0 6px;font-size:10px;color:#e9826c;font-family:var(--mono)}
.form-errors ul{margin:0;padding-left:16px}
.form-errors li{font-size:10px;color:#f0b6a8;line-height:1.5}

/* Pagination ------------------------------------------------------------ */
.pagination{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.pagination a,.pagination span{min-width:30px;height:30px;padding:0 9px;border:1px solid #45423e;border-radius:7px;background:#2d2c2a;color:#b3afa8;display:inline-flex;align-items:center;justify-content:center;font:600 10px var(--mono);text-decoration:none}
.pagination a:hover{background:#353431;color:#eee}
.pagination span.active{background:#f27622;border-color:#ff8a38;color:#fff}
.pagination span.dots,.pagination span.disabled{background:transparent;border-color:transparent;opacity:.5}

/* Empty state ----------------------------------------------------------- */
.empty-state{border:1px dashed #4a4742;border-radius:10px;background:#262523;padding:34px 22px;text-align:center;color:#8f8a82;font-size:12px;line-height:1.6}
.empty-state strong{display:block;color:#e6e3de;font-size:15px;margin-bottom:6px;font-weight:500}
.empty-actions{margin-top:14px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* Layout helper --------------------------------------------------------- */
.section-stack{display:flex;flex-direction:column;gap:15px}
.muted-note{color:var(--muted-2);font-size:10px;line-height:1.6;margin:8px 0 0}
.spacer16{height:16px}

/* Movie poster media ---------------------------------------------------- */
.poster-media{position:absolute;inset:0}
.poster-media img{width:100%;height:100%;object-fit:cover;display:block}
.prototype-poster.has-media .poster-ridge{display:none}
.prototype-poster.has-media .overlay-title{position:relative;z-index:1;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.poster-fade{position:absolute;left:0;right:0;bottom:0;height:64%;background:rgba(18,17,15,.82)}
.cell-poster{width:26px;height:36px;border-radius:4px;object-fit:cover;border:1px solid #45423e;vertical-align:middle;margin-right:8px;background:#242321}
.library-card-watch{margin-top:8px;width:100%}

/* Detail page ----------------------------------------------------------- */
.detail-copy{padding:6px 2px;display:flex;flex-direction:column}
.detail-copy .eyebrow{margin-bottom:2px}
.detail-backdrop{position:relative;overflow:hidden}
.detail-meta-list{margin-top:4px}
.detail-side-panel{display:flex;flex-direction:column}
.detail-side-panel .flow-list{font-size:12px}

/* Tables: row actions & links ------------------------------------------- */
.row-forms{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
td a.cell-link{color:#ffb27a;text-decoration:none}
td a.cell-link:hover{color:#ff8a34}
.td-title{display:flex;align-items:center;gap:0;font-size:11px}

/* Player ---------------------------------------------------------------- */
.player-shell{border:1px solid #3f3d39;border-radius:10px;background:#141413;overflow:hidden}
.player-shell video{width:100%;display:block;max-height:68vh;background:#000}
.player-bar-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#252422;border-top:1px solid #34322f}
input[type="range"].player-range{flex:1;appearance:none;-webkit-appearance:none;height:6px;border-radius:6px;background:#3a3835;outline:none}
input[type="range"].player-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#f27622;border:1px solid #ff8a38;cursor:pointer}
input[type="range"].player-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#f27622;border:1px solid #ff8a38;cursor:pointer}
.player-status{font:10px var(--mono);color:#8f8c86;white-space:nowrap}

/* QRIS ------------------------------------------------------------------ */
.qr-frame{display:inline-block;background:#fff;border-radius:12px;padding:12px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.qr-frame img{display:block;width:208px;height:208px}
.qr-amount{font:600 24px var(--mono);color:#ffb27a;margin-top:12px}
.qr-panel-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.pay-steps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}
.pay-step{border:1px solid #45413c;background:#2f2d2a;color:#8f8a82;border-radius:999px;padding:7px 12px;font:10px var(--mono)}
.pay-step.on{color:#ffb27a;border-color:#8a5a33;background:#2b2622}

/* Auth pages ------------------------------------------------------------ */
.auth-shell{min-height:100vh;background:#1f1e1c;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px 18px}
.auth-card{width:min(430px,100%);border:1px solid #3f3d39;border-radius:12px;background:var(--layer-base);padding:3px}
.auth-card-inner{border-radius:10px;background:var(--surface-bg);box-shadow:var(--surface-shadow);padding:26px 24px}
.auth-brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:18px;color:inherit;text-decoration:none}
.auth-card h1{font-size:20px;font-weight:450;margin:0 0 6px;letter-spacing:-.3px}
.auth-sub{color:#8f8a82;font-size:11px;margin:0 0 18px;line-height:1.6}
.auth-links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:16px;font-size:11px;color:#8f8a82}
.auth-links a{color:#c9c5be;text-decoration:none}
.auth-links a:hover{color:#ff8a34}
.auth-shell .form-stack .primary-button{width:100%}

/* Error pages ----------------------------------------------------------- */
.error-page{min-height:100vh;background:#1f1e1c;display:flex;align-items:center;justify-content:center;padding:30px;text-align:center}
.error-page h1{font:600 54px var(--mono);margin:0 0 8px;color:#f2efea}
.error-page p{color:#8f8a82;font-size:12px;margin:0 0 18px}

/* Extra status semantics (real model states) ----------------------------- */
.status-cancelled,.status-disabled,.status-unwatched,.status-inactive{color:#aaa7a1;background:#373735}
.status-watched,.status-resolved,.status-purchased{color:#19b986;background:#293a34}
.status-new{color:#7fb3f2;background:#2a3242}

/* Sidebar additions ------------------------------------------------------ */
.logout-form{margin-top:8px}
.logout-form button{width:100%;height:31px;padding:0 10px;border-radius:6px;color:#9e9e99;display:flex;align-items:center;gap:10px;font-size:12px;border:1px solid transparent;background:transparent;transition:.15s ease}
.logout-form button:hover{background:#292a28;color:#e9826c}
.sidebar-search{width:100%;margin-top:10px}

/* Watch grid ------------------------------------------------------------ */
.watch-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:15px;margin-bottom:15px;align-items:start}
@media (max-width:1180px){.watch-grid{grid-template-columns:1fr}}

/* Topbar user menu (dashboard) ------------------------------------------ */
.topbar-user{position:relative}
.topbar-user .public-user-dropdown{top:calc(100% + 10px)}
.topbar-user:hover .public-user-dropdown{display:block}

/* TMDb result cards ------------------------------------------------------ */
.tmdb-card{display:flex;gap:12px}
.tmdb-card img{width:64px;height:96px;object-fit:cover;border-radius:7px;border:1px solid #45423e;background:#242321;flex:0 0 auto}
.tmdb-copy{min-width:0;display:flex;flex-direction:column;gap:4px}
.tmdb-copy strong{font-size:12px;font-weight:550}
.tmdb-copy small{font-size:9px;color:var(--muted-2);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.tmdb-actions{margin-top:auto;padding-top:6px}

/* Media query tweaks ------------------------------------------------------ */
@media (max-width:720px){.auth-card-inner{padding:20px 16px}.qr-frame img{width:170px;height:170px}}

/* Public user dropdown: logout form button */
.public-user-dropdown form{margin:0}
.public-user-dropdown form button{display:block;width:100%;text-align:left;color:#ede9e3;border:0;background:transparent;padding:10px 12px;border-radius:8px;font-size:12px;cursor:pointer}
.public-user-dropdown form button:hover{background:#302e2b;color:#e9826c}
.public-user-trigger{cursor:pointer}

/* Label KPI & judul panel: tampilan uppercase, teks sumber tetap title-case. */
.stat-label,.title-with-info{text-transform:uppercase}

/* ============================================================================
   ANIMATION LIBRARY (dari report/newanimate.txt) + integrasi Cineva
   Dipakai: notification badge, dropdown, modal, error shake, like button,
   checkbox check, input clear.
   ========================================================================== */
:root {
  --badge-slide-dur: 260ms;
  --badge-pop-dur: 500ms;
  --badge-pop-close-dur: 180ms;
  --badge-fade-dur: 400ms;
  --badge-fade-close-dur: 180ms;
  --badge-blur: 2px;
  --badge-offset-x: -8.2px;
  --badge-offset-y: 12.4px;
  --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
  --like-color: #ff7417;
  --like-fill: 150ms;
  --like-pop: 350ms;
  --like-pop-ease: cubic-bezier(0.34, 1.96, 0.64, 1);
  --like-particle-dur: 600ms;
  --like-particle-size: 3px;
  --like-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --check-box: 150ms;
  --check-draw: 350ms;
  --check-uncheck: 150ms;
  --check-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --check-len: 15;
}

/* Notification badge ---------------------------------------------------- */
@keyframes t-badge-slide-in { from { transform: translate(var(--badge-offset-x), var(--badge-offset-y)); } to { transform: translate(0, 0); } }
.t-badge { position: absolute; top: -6px; right: -8px; pointer-events: none; will-change: transform; z-index: 2; }
.t-badge[data-open="true"] { animation: t-badge-slide-in var(--badge-slide-dur) var(--badge-slide-ease); }
.t-badge-dot {
  display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: #fff; font: 700 8px var(--mono);
  transform-origin: center;
  transition: transform var(--badge-pop-dur) var(--badge-pop-ease), opacity var(--badge-fade-dur) var(--badge-pop-ease), filter var(--badge-pop-dur) var(--badge-pop-ease);
}
.t-badge[data-open="false"] .t-badge-dot { transform: scale(0); opacity: 0; filter: blur(var(--badge-blur)); }

/* Menu dropdown ---------------------------------------------------------- */
.t-dropdown {
  transform-origin: top right;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dropdown-open-dur) var(--dropdown-ease), opacity var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.t-dropdown.is-open { transform: scale(1); opacity: 1; pointer-events: auto; }
.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale)); opacity: 0; pointer-events: none;
  transition: transform var(--dropdown-close-dur) var(--dropdown-ease), opacity var(--dropdown-close-dur) var(--dropdown-ease);
}

/* Modal open/close ------------------------------------------------------- */
.t-modal {
  transform-origin: center; transform: scale(var(--modal-scale)); opacity: 0; pointer-events: none;
  transition: transform var(--modal-open-dur) var(--modal-ease), opacity var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open { transform: scale(1); opacity: 1; pointer-events: auto; }
.modal-backdrop { transition: none; }

/* Error state shake ------------------------------------------------------ */
.t-input { transition: border-color 150ms ease-out; will-change: transform; }
.t-input.is-error { border-color: #6d3f36 !important; transition: border-color var(--revert-dur) ease-out; }
.t-error-msg { opacity: 0; visibility: hidden; transition: opacity var(--revert-dur) ease-out, visibility 0s linear var(--revert-dur); margin: 6px 0 0; font-size: 10px; color: #e9826c; }
.t-input-wrap.is-error .t-error-msg { opacity: 1; visibility: visible; transition: opacity var(--revert-dur) ease-out, visibility 0s linear 0s; }
.t-input.is-shaking { animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear; }
@keyframes t-input-shake {
  0%      { transform: translateX(0); animation-timing-function: var(--shake-ease); }
  28.57%  { transform: translateX(var(--shake-distance)); animation-timing-function: var(--shake-ease); }
  57.14%  { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57%  { transform: translateX(var(--shake-overshoot)); animation-timing-function: var(--shake-ease); }
  100%    { transform: translateX(0); }
}

/* Input clear ------------------------------------------------------------ */
.clear-wrap { position: relative; display: flex; align-items: center; }
.clear-wrap .t-clear-btn {
  position: absolute; right: 8px; top: 50%; translate: 0 -50%;
  width: 18px; height: 18px; border: 0; border-radius: 50%; background: #3a3835; color: #a5a29b;
  display: grid; place-items: center; opacity: 0; pointer-events: none;
  transition: opacity 150ms ease, color 150ms ease;
}
.clear-wrap.has-value .t-clear-btn { opacity: 1; pointer-events: auto; }
.clear-wrap .t-clear-btn:hover { color: #eee; background: #45423e; }
.clear-wrap input { padding-right: 30px; }

/* Like button ------------------------------------------------------------ */
.t-like { position: relative; }
.t-like .t-like-heart { transition: color var(--like-fill) var(--like-ease); }
.t-like .t-like-heart path { fill: transparent; stroke: currentColor; transition: fill var(--like-fill) var(--like-ease), stroke var(--like-fill) var(--like-ease); }
.t-like[data-liked="true"] .t-like-heart { color: var(--like-color); }
.t-like[data-liked="true"] .t-like-heart path { fill: currentColor; }
.t-like[data-liked="true"] .t-like-icon { animation: t-like-pop var(--like-pop) var(--like-pop-ease); }
.t-like .t-like-icon { display: inline-flex; }
@keyframes t-like-pop { 0% { transform: scale(1); } 30% { transform: scale(0.82); } 100% { transform: scale(1); } }
.t-like-particles { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; color: var(--like-color); }
.t-like-particles i {
  position: absolute;
  left: calc(var(--like-particle-size) * var(--psize, 1) / -2);
  top: calc(var(--like-particle-size) * var(--psize, 1) / -2);
  width: calc(var(--like-particle-size) * var(--psize, 1));
  height: calc(var(--like-particle-size) * var(--psize, 1));
  border-radius: 50%; background: currentColor; opacity: 0;
}
@keyframes t-like-burst {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  20%  { opacity: 1; transform: translate(calc(var(--px) * 0.25), calc(var(--py) * 0.25)) scale(1); }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(var(--p-end-scale, 0.6)); }
}
.t-like.is-bursting .t-like-particles i { animation: t-like-burst var(--pdur, var(--like-particle-dur)) ease-out var(--pdelay, 0ms) forwards; }

/* Checkbox check --------------------------------------------------------- */
.t-check {
  width: 16px; height: 16px; border-radius: 4px; border: 1px solid #4b4842; background: #383631;
  display: inline-grid; place-items: center; padding: 0; flex: 0 0 auto;
  transition: background var(--check-box) var(--check-ease), box-shadow var(--check-box) var(--check-ease);
}
.t-check svg { width: 10px; height: 10px; fill: none; stroke: #1e1d1b; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.t-check svg path { stroke-dasharray: var(--check-len); stroke-dashoffset: var(--check-len); transition: stroke-dashoffset var(--check-uncheck) var(--check-ease); }
.t-check[aria-checked="true"] { background: #f27622; border-color: #ff8a38; }
.t-check[aria-checked="true"] svg path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--check-draw) var(--check-ease); }

/* Integrasi Cineva -------------------------------------------------------- */
.public-actions .primary-button, .public-actions .control-button, .public-actions .ghost-button { border-radius: 999px; }
.public-icon-button {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid #47433e; background: #2f2d2a; color: #e8e3db;
  display: grid; place-items: center; text-decoration: none; flex: 0 0 auto;
  transition: background 150ms ease, color 150ms ease;
}
.public-icon-button:hover { background: #37342f; color: #fff; }
.public-avatar-button {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid #47433e; background: #665248; color: #fff;
  display: grid; place-items: center; padding: 0; font-size: 11px; font-weight: 700; flex: 0 0 auto;
}
.public-user-menu .t-dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; background: #262522; border: 1px solid #403d38; border-radius: 12px; padding: 8px; box-shadow: 0 14px 30px rgba(0,0,0,.35); z-index: 30; }
.public-user-menu .t-dropdown a, .public-user-menu .t-dropdown button.menu-item { display: block; width: 100%; text-align: left; color: #ede9e3; text-decoration: none; padding: 10px 12px; border-radius: 8px; font-size: 12px; border: 0; background: transparent; cursor: pointer; }
.public-user-menu .t-dropdown a:hover, .public-user-menu .t-dropdown button.menu-item:hover { background: #302e2b; }

/* Sidebar: profile dropdown + mobile overlay */
.agency-switcher { display: none; }
.sidebar-nav { margin-top: 4px; }
.profile-stack { position: relative; }
.profile-menu { position: relative; }
.profile-menu .profile-card { width: 100%; cursor: pointer; }
.profile-dropdown { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); background: #262522; border: 1px solid #403d38; border-radius: 12px; padding: 8px; box-shadow: 0 14px 30px rgba(0,0,0,.35); z-index: 40; transform-origin: bottom center; }
.profile-dropdown a, .profile-dropdown button { display: flex; width: 100%; align-items: center; gap: 10px; text-align: left; color: #ede9e3; text-decoration: none; padding: 10px 12px; border-radius: 8px; font-size: 12px; border: 0; background: transparent; cursor: pointer; }
.profile-dropdown a:hover, .profile-dropdown button:hover { background: #302e2b; }
.sidebar-overlay { display: none; }
@media (max-width: 850px) {
  .app-shell.sidebar-open .sidebar-overlay {
    display: block; position: fixed; inset: 0; z-index: 3; background: rgba(10, 10, 9, 0.5);
  }
}

/* Modal animasi hook */
.modal-backdrop .modal { transition: none; }
.modal.is-open { animation: none; }

/* Like button chrome (control-button look) */
.t-like{height:36px;border-radius:7px;border:1px solid #494641;background:#333230;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 13px;font-size:11px;color:#e8e3db;overflow:visible}
.t-like:hover{background:#3a3936}



/* Chat workspace fix: composer pinned, body scroll internal, fit viewport */
.message-panel{height:calc(100vh - 124px);min-height:440px}
.message-columns{height:100%;min-height:0}
.message-list{overflow:auto}
.conversation{grid-template-rows:49px minmax(0,1fr) auto;min-height:0}
.conversation-body{min-height:0}
@media (max-width:900px){
  .message-panel{height:auto;min-height:calc(100vh - 124px)}
  .message-columns{height:auto;min-height:0}
}

/* Fix breakpoint 851-1180px: shell harus tetap dua kolom */
@media (max-width:1180px) and (min-width:851px){
  .app-shell{grid-template-columns:190px minmax(0,1fr)}
}

/* ---------------------------------------------------------------------------
   Chat workspace — truly adaptive (modern browsers).
   .content menjadi kolom flex setinggi viewport di bawah topbar; panel flex
   mengisi sisa ruang berapapun tinggi heading/flash/pagination. Tidak ada
   angka ajaib; internal scroll di list + conversation-body.
   Fallback non-:has tetap memakai offset fixed di atas.
   --------------------------------------------------------------------------- */
.content:has(.message-panel){
  display:flex;
  flex-direction:column;
  height:calc(100vh - 55px);
  height:calc(100dvh - 55px);
  overflow:auto;
}
.content:has(.message-panel) .message-panel{
  flex:1 1 auto;
  height:auto;
  min-height:300px;
  display:flex;
  flex-direction:column;
}
.content:has(.message-panel) .message-columns{
  flex:1 1 auto;
  height:100%;
  min-height:0;
}
@media (max-width:900px){
  .content:has(.message-panel) .message-columns{
    display:flex;
    flex-direction:column;
  }
  .content:has(.message-panel) .message-list{
    flex:0 1 42%;
    min-height:0;
  }
  .content:has(.message-panel) .conversation{
    flex:1 1 auto;
    min-height:0;
  }
}

/* ---------------------------------------------------------------------------
   Global scrollbar + text selection — theme accent (solid, no gradient).
   Rest state: muted burnt orange; hover/active: full accent #ff7417.
   --------------------------------------------------------------------------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#171715}
::-webkit-scrollbar-thumb{background:#8a5a33;border-radius:8px;border:2px solid #171715}
::-webkit-scrollbar-thumb:hover{background:#ff7417}
::-webkit-scrollbar-corner{background:#171715}
*{scrollbar-width:thin;scrollbar-color:#8a5a33 #171715}
::selection{background:#ff7417;color:#161616}
::-moz-selection{background:#ff7417;color:#161616}