/* Aranzu Design System v2: 60/30/10, 8px grid, AA contrast, two fonts */
html{background:var(--ar-main);color:var(--ar-text);font-family:var(--ar-font-body)}
body{background:var(--ar-main);color:var(--ar-text);font-family:var(--ar-font-body);line-height:1.5}
body,button,input,select,textarea{font-family:var(--ar-font-body)}
h1,h2,h3,h4,h5,h6,.account-stats b{font-family:var(--ar-font-heading)}
p,li,dd,label,input,select,textarea,button,a,small,span{font-family:var(--ar-font-body)}
p,li,dd{color:inherit}
.muted,.package-note{color:var(--ar-text-muted)!important;opacity:1}

/* 60% warm canvas, 30% structured surfaces, 10% terracotta accent. */
.site-nav,.admin-header,.admin-panel,.admin-stats>a,.account-stats>div,.worker-card,.booking-detail,.checkout-form,.order-summary,.invoice-card{background:var(--ar-surface)}
.admin-sidebar,.footer{background:var(--ar-secondary);color:var(--ar-main)}
.coverage,.product-hero>div,.admin-flash{background:var(--ar-secondary-soft);color:var(--ar-main)}
.pill.dark,.admin-button,.checkout-form button{background:var(--ar-secondary);color:var(--ar-white)}
.pill.light{border-color:var(--ar-main);background:var(--ar-main);color:var(--ar-secondary)}
.micro,.arrow-link,.panel-head a,.booking-manage summary{color:var(--ar-secondary-soft)}
.admin-stats>a::before,.account-stats>div::before{width:8px;background:var(--ar-accent)}

/* Global 8px geometry and alignment. */
.site-nav{height:88px;padding-inline:32px}
.main-nav{gap:24px}
.pill{min-height:48px;border-radius:24px;padding:8px 24px}
.flash{padding:16px 24px}
.hero{min-height:calc(100vh - 88px);padding:64px 32px}
.hero h1{margin:24px 0 32px}
.hero-copy>p:not(.micro){margin:0 0 32px}
.manifesto{padding:144px 10vw}
.manifesto h2{margin:32px auto}
.service-copy{padding:80px 48px}
.service-copy h2{margin:32px 0}
.arrow-link{margin-top:32px;padding-bottom:8px}
.portfolio-section,.package-section{padding:128px 32px}
.section-heading{margin-bottom:64px;gap:32px}
.portfolio-grid{gap:40px 16px}
.portfolio-grid figcaption{padding-top:16px}
.portfolio-grid figcaption span{margin-bottom:8px}
.coverage{padding:144px 32px}
.coverage h2{margin:32px 0}
.product-hero>div{padding:80px 32px}
.product-hero h1{margin:32px 0}
.product-hero>div{position:relative;z-index:1;isolation:isolate}
.product-hero>div>*{position:relative;z-index:1;opacity:1;visibility:visible}
.product-hero .micro,.product-hero h1,.product-hero .product-lead{color:var(--ar-main)}
.product-hero>picture,.product-hero>img{position:relative;z-index:0}
.product-intro{padding:144px 15vw}
.product-intro h2{margin:32px auto}
.package-note{margin-top:8px}
.footer{grid-template-columns:2fr repeat(3,1fr);gap:40px;min-height:336px;padding:88px 32px 48px}
.footer img{margin-bottom:24px}
.footer>div{gap:16px}
.footer small{margin-bottom:16px}
.checkout-form label,.admin-form label{gap:8px;margin:16px 0 8px}
.checkout-form input,.checkout-form textarea,.admin-form input,.admin-form select,.admin-form textarea{padding:16px 8px}
.simple-page{padding:96px 10vw}
.simple-page h1,.account-head h1{margin:24px 0 72px}
.empty-state{padding:80px 24px}
.checkout-page{gap:80px;padding:96px 8vw}
.checkout-page h1{margin:32px 0}
.order-summary{margin-top:64px;padding:32px}
.order-summary h2{margin:8px 0}
.order-summary>div{padding:16px 0}
.checkout-form{padding:40px}
.checkout-form fieldset{padding:16px 0}
.checkout-form legend{margin-bottom:8px}
.payment-option{padding:16px!important}
.payment-option span{gap:8px}
.invoice-card{gap:16px;margin-bottom:32px;padding:40px}
.demo-note{padding:24px}
.button-row{gap:24px}

/* Admin, customer and worker workspaces share one grid. */
.admin-sidebar{width:280px;margin-left:-280px;padding:40px 32px}
.admin-sidebar img{margin-bottom:16px}
.admin-sidebar nav{gap:24px;margin-top:48px}
.admin-sidebar .nav-group{gap:8px}
.admin-sidebar .nav-group>span{padding:0 16px 8px}
.admin-sidebar nav a{display:flex;align-items:center;min-height:48px;border-radius:8px;padding:8px 16px}
.admin-sidebar form{padding-top:24px}
.admin-header{height:96px;gap:24px;padding-inline:32px}
.admin-content{width:100%;max-width:1680px;padding:32px}
.admin-flash{margin-bottom:24px;padding:16px 24px}
.admin-stats{gap:16px;margin:32px 0}
.admin-stats a{min-height:168px;padding:24px}
.admin-panel{margin-bottom:24px;padding:24px}
.panel-head{gap:16px;margin-bottom:24px}
.account-stats div{padding:24px}
.admin-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:8px 16px}
.account-page{max-width:1280px;padding:48px 40px 96px}
.account-head h1{margin-bottom:24px}
.account-stats{gap:8px;margin:32px 0 48px}
.booking-list{gap:24px}
.booking-detail{padding:32px}
.booking-top{gap:24px;padding-bottom:24px}
.booking-top h2{margin:16px 0 8px}
.booking-meta{gap:16px;margin:24px 0;padding-bottom:24px}
.booking-meta div{gap:8px}
.workspace-pending{gap:24px;margin:24px 0;padding:24px}
.booking-manage{margin-top:24px;padding-top:24px}
.manage-grid{gap:24px;padding:24px 0}
.manage-grid textarea,.manage-grid input{padding:16px}
/* Kelola pesanan opens tools, so its summary reads as a button. */
.booking-manage>summary{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border:1px solid var(--ar-secondary);border-radius:999px;color:var(--ar-secondary);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;list-style:none;transition:background-color .15s ease,color .15s ease}
.booking-manage>summary::-webkit-details-marker{display:none}
.booking-manage>summary:hover,.booking-manage[open]>summary{background:var(--ar-secondary);color:var(--ar-main)}
.booking-manage__chevron{transition:transform .15s ease}
.booking-manage[open] .booking-manage__chevron{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.booking-manage>summary,.booking-manage__chevron{transition:none}}
@media(max-width:560px){.booking-manage>summary{display:flex;justify-content:center}}
.manage-panel{display:grid;gap:24px;padding-top:24px}
.manage-panel .manage-grid{padding:0}
.manage-card{display:grid;align-content:start;gap:14px;margin:0;padding:24px;border:1px solid var(--ar-border);border-radius:var(--ar-radius-lg);background:var(--ar-surface)}
.manage-card h3{font-size:24px;line-height:1.2}
.manage-card p{margin:0;line-height:1.55}
.manage-card__hint,.manage-note{color:var(--ar-text-muted)}
.manage-note{margin:0;max-width:70ch;line-height:1.55}
.manage-card label{display:grid;gap:8px;font-weight:700;color:var(--ar-text)}
.manage-card__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.manage-card input{padding:0 14px}
.manage-card textarea{padding:12px 14px}
.manage-card input,.manage-card textarea{width:100%;min-height:48px;border:1px solid var(--ar-border-strong);border-radius:var(--ar-radius);background:var(--ar-white);font-weight:400}
.manage-card [aria-invalid="true"]{border-color:var(--ar-danger)}
.manage-card .pill{justify-self:start;min-height:44px}
.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;max-width:1100px;margin-top:40px}
.profile-grid h2{font-size:28px;line-height:1.2}
.profile-grid label span small{font-weight:400;color:var(--ar-text-muted)}
@media(max-width:900px){.profile-grid{grid-template-columns:minmax(0,1fr)}}
.manage-card--waiting{align-self:start;background:var(--ar-warning-soft);border-color:var(--ar-tan)}
.change-history{display:grid;gap:12px}
.change-history h3{font-size:24px}
.change-history ol{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.change-history li{display:grid;gap:8px;padding:16px 18px;border:1px solid var(--ar-border);border-radius:var(--ar-radius-lg);background:var(--ar-surface)}
.change-history p{margin:0;line-height:1.55}
.change-history__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.change-history__head small,.change-history__from{color:var(--ar-text-muted)}
.change-history__details{white-space:pre-line;color:var(--ar-text-soft)}
.change-history__reply{padding:10px 12px;border-left:3px solid var(--ar-accent);background:var(--ar-main-soft)}
@media(max-width:560px){.manage-card{padding:18px}.manage-card__row{grid-template-columns:minmax(0,1fr)}.manage-card .pill{justify-self:stretch}}
.worker-card{padding:24px}
.worker-card-head{gap:16px;padding-bottom:16px}
.worker-card .booking-meta{gap:16px}
.worker-card .booking-meta>div{padding:16px}

/* Dashboard and calendar sit on explicit columns; no floating content. */
/* Status/role marker, always paired with a written label: colour helps scanning, text carries the meaning. */

/* Contrast and control states (WCAG AA or stronger). */
a{color:inherit}
input,select,textarea{border-color:var(--ar-border)!important;background-color:var(--ar-surface);color:var(--ar-text)}
input::placeholder,textarea::placeholder{color:var(--ar-text-muted);opacity:1}
.status{color:var(--ar-text);font-weight:700}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:4px solid var(--ar-accent);outline-offset:4px}
@media(max-width:720px){
    .site-nav{height:72px;padding-inline:16px}
    .main-nav{gap:8px;padding:24px 16px}
    .hero{padding:48px 16px calc(80px + env(safe-area-inset-bottom))}
    .manifesto,.product-intro{padding:80px 24px}
    .service-copy{padding:64px 24px}
    .portfolio-section,.package-section{padding:80px 16px}
    .section-heading{margin-bottom:40px}
    .coverage{padding:80px 16px}
    .product-hero>div{padding:64px 24px}
    .footer{grid-template-columns:1fr;gap:32px;padding:64px 24px 40px}
    .simple-page{padding:64px 24px}
    .checkout-page{gap:48px;padding:64px 24px}
    .checkout-form,.order-summary,.invoice-card{padding:24px}
    .admin-content{padding:16px}
    .admin-header{height:80px;padding-inline:16px}
    .admin-panel,.worker-card,.booking-detail{padding:16px}
    .account-page{padding:32px 16px 72px}
    .account-stats{margin:24px 0 32px}
    .account-stats div{gap:16px;padding:16px}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Design rules v2: one palette, one 8px grid, two fonts, AA text, aligned layout. */
body{background:var(--ar-main);color:var(--ar-text)}
main{min-width:0}
h1,h2,h3,h4,h5,h6{color:inherit;font-family:var(--ar-font-heading)}
body,p,li,dt,dd,label,input,select,textarea,button,a,small,span{font-family:var(--ar-font-body)}
.muted,.package-note,.booking-number,.workspace-pending span{color:var(--ar-text-muted)!important}

/* 60% main canvas, 30% secondary structure, 10% accent for actions and state. */
.admin-body,.account-page,.booking-shell,.gallery-page,.application-page,.simple-page{background:var(--ar-main);color:var(--ar-text)}
.site-nav,.admin-header,.admin-panel,.booking-detail,.worker-card,.checkout-form,.order-summary,.invoice-card,.application-form,.gallery-callout,.empty-state{background:var(--ar-surface);color:var(--ar-text)}
.admin-sidebar,.footer{background:var(--ar-secondary);color:var(--ar-main)}
.product-hero>div,.coverage,.admin-flash{background:var(--ar-secondary-soft);color:var(--ar-main)}
.pill.dark,.admin-button,.checkout-form button,.application-form button{border-color:var(--ar-secondary);background:var(--ar-secondary);color:var(--ar-white)}
.micro,.arrow-link,.panel-head a,.booking-manage summary{color:var(--ar-secondary-soft)}

/* Every major page and component sits on the shared 8px grid. */
.site-nav,.admin-header,.footer,.hero,.service-copy,.portfolio-section,.package-section,
.product-intro,.coverage,.simple-page,.account-page,.admin-content,.application-page,
.booking-shell,.gallery-page{padding-inline:var(--ar-page-inline)}
.flash{position:static;width:auto;max-width:none;margin:16px 32px;padding:16px 24px;transform:none}
.flash.is-hiding{opacity:0;transform:none}
.section-heading,.panel-head,.booking-top,.worker-card-head{align-items:start;gap:24px}
.portfolio-grid,.admin-stats,.account-stats,.manage-grid,.photo-grid{align-items:stretch}
.admin-panel,.booking-detail,.worker-card,.checkout-form,.order-summary,.invoice-card,.application-form,.gallery-callout,.empty-state{border-color:var(--ar-border)}
.checkout-summary-column,.application-intro,.selection-bar,.workspace-switcher{position:static}

/* Service pages keep one focal hero and equal package rows. */
.product-hero>div{position:relative;z-index:1;isolation:isolate;align-items:flex-start;justify-content:center;min-width:0;padding:64px 48px}
.product-hero>div>*{position:relative;z-index:1;opacity:1;visibility:visible}
.product-hero .micro,.product-hero h1,.product-hero .product-lead{color:var(--ar-main)}
.product-hero>picture,.product-hero>img{position:relative;z-index:0}
.product-hero h1{max-width:100%;margin:24px 0;font-size:clamp(56px,5.4vw,104px);line-height:.9;overflow-wrap:normal;text-wrap:balance}
.product-hero--graduation h1{font-size:clamp(48px,4.8vw,88px)}
.product-hero .product-lead{max-width:520px;margin:0;font-size:clamp(18px,1.45vw,24px);line-height:1.45}

/* Workspace cards and tables share edges, columns, and control heights. */
.admin-main{min-width:0}
.admin-header>div,.admin-panel,.manage-grid>*{min-width:0}
.admin-content{margin:0 auto}
.admin-header>button,.mobile-toggle,.sidebar-close,.pill,.admin-button,input,select,textarea{min-height:48px}
.worker-card .booking-meta,.booking-meta{align-items:stretch}
.worker-card .booking-meta>div,.booking-meta>div{min-width:0}

/* Bag lives in the header (DESIGN.md rule 5); a stable admin sidebar frame. */
.site-nav{gap:var(--ar-space-2)}
.main-nav,.mobile-toggle{margin-left:auto}
.header-cart{display:inline-flex;align-items:center;gap:var(--ar-space-1);min-height:48px;padding-inline:var(--ar-space-1);text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:.13em}
.header-cart b{display:grid;place-items:center;min-width:24px;height:24px;padding-inline:6px;border-radius:12px;background:var(--ar-secondary);color:var(--ar-main);font-size:11px;letter-spacing:0}
/* Cart is an action, so it reads as a bordered button rather than one more nav word. */
.header-cart{gap:8px;min-height:44px;margin-left:16px;padding:0 6px 0 14px;border:1px solid var(--ar-secondary);border-radius:999px;color:var(--ar-secondary);transition:background-color .15s ease,color .15s ease}
.header-cart:hover,.header-cart:focus-visible{background:var(--ar-secondary);color:var(--ar-main)}
.header-cart:hover b,.header-cart:focus-visible b{background:var(--ar-main);color:var(--ar-secondary)}
/* Account actions live in one menu so Keluar no longer sits in the nav row. */
.account-menu{position:relative}
.account-menu summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;list-style:none}
.account-menu summary::-webkit-details-marker{display:none}
.account-menu summary svg{transition:transform .15s ease}
.account-menu[open] summary svg{transform:rotate(180deg)}
.account-menu__panel{position:absolute;top:calc(100% + 8px);right:0;z-index:40;display:grid;gap:2px;min-width:240px;padding:8px;border:1px solid var(--ar-border);border-radius:var(--ar-radius-lg);background:var(--ar-surface);box-shadow:var(--ar-shadow);text-transform:none;letter-spacing:0;font-size:14px;font-weight:400}
.account-menu__who{display:grid;gap:2px;margin:0 0 6px;padding:8px 10px 12px;border-bottom:1px solid var(--ar-border)}
.account-menu__who small{color:var(--ar-text-muted);overflow-wrap:anywhere}
.account-menu__panel a,.account-menu__logout{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 10px;border:0;border-radius:var(--ar-radius);background:none;color:var(--ar-text);font:inherit;font-weight:700;text-align:left}
.account-menu__panel a:hover,.account-menu__logout:hover{background:var(--ar-main-soft)}
.account-menu__logout{color:var(--ar-danger-strong)}
@media(prefers-reduced-motion:reduce){.header-cart,.account-menu summary svg{transition:none}}
@media(max-width:900px){.account-menu{width:100%}.account-menu summary{width:100%}.account-menu__panel{position:static;min-width:0;margin-top:4px;box-shadow:none}}
@media(max-width:560px){.header-cart{margin-left:8px;padding:0 4px 0 10px}.header-cart span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.chat-launcher:focus-visible{outline:4px solid var(--ar-accent-strong);outline-offset:4px;box-shadow:0 0 0 8px var(--ar-surface)}
.admin-body[data-page-type="admin"] .admin-sidebar{height:100vh;overflow:hidden}
.admin-body[data-page-type="admin"] .sidebar-brand{flex:0 0 auto;margin-bottom:24px}
.admin-body[data-page-type="admin"] .sidebar-brand img{margin:0}
.admin-body[data-page-type="admin"] .admin-sidebar nav{flex:1 1 auto;min-height:0;margin-top:0;padding-right:8px;overflow-y:auto;overscroll-behavior:contain}
.admin-body .admin-stats a,.admin-body .admin-stats a span,.admin-body .admin-stats a b,.admin-body .admin-stats a small{color:var(--ui-cocoa)}

/* Admin catalog actions. */

/* Booking management uses one aligned card grid instead of a compressed table. */

@media(max-width:1100px){
    .product-hero>div{padding:56px 32px}
}
@media(max-width:720px){
    :root{--ar-page-inline:16px}
    .flash{margin:16px;padding:16px}
    .product-hero>div{justify-content:flex-start;padding:48px 24px}
    .product-hero h1,.product-hero--graduation h1{font-size:clamp(48px,16vw,72px)}
    .section-heading,.panel-head,.booking-top,.worker-card-head{gap:16px}
}

/* Mobile admin navigation and compact operational lists. */
@media(max-width:720px){
    .admin-header>#sidebarToggle{position:relative;z-index:40;transition:transform .24s ease}
    .admin-sidebar.open+.admin-main .admin-header>#sidebarToggle{transform:translateX(288px);border-radius:8px;background:var(--ar-secondary);color:var(--ar-white)}
}

/* Booking lifecycle tabs: active, completed, and archived. */
.booking-tabs{display:flex;align-items:center;gap:8px;overflow-x:auto;padding-bottom:8px}
.booking-tabs a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:2px solid var(--ar-secondary);border-radius:8px;background:var(--ar-surface);padding:8px 16px;color:var(--ar-secondary);font-weight:800;white-space:nowrap}
.booking-tabs a span{display:grid;min-width:24px;height:24px;place-items:center;border-radius:8px;background:var(--ar-secondary);color:var(--ar-white);font-size:12px}
.booking-tabs a.active{background:var(--ar-secondary);color:var(--ar-white)}
.booking-tabs a.active span{background:var(--ar-main);color:var(--ar-secondary)}

/* Compact production-team directory with expandable operational details. */
@media(max-width:720px){
    .booking-tabs{margin-inline:-8px;padding-inline:8px}
    .booking-tabs a{flex:1 0 auto}
}

/* Public legal information uses the same restrained 8px grid. */
.footer .footer-subheading{display:block;margin-top:24px}
.legal-page{background:var(--ar-main);color:var(--ar-secondary)}
.legal-hero{display:grid;gap:16px;padding:96px max(32px,10vw) 64px;background:var(--ar-secondary);color:var(--ar-main)}
.legal-hero .micro,.legal-hero h1,.legal-hero p{margin:0;color:inherit}
.legal-hero h1{max-width:880px;font-size:clamp(40px,7vw,80px);line-height:1}
.legal-content{display:grid;gap:0;width:min(960px,calc(100% - 64px));margin:0 auto;padding:64px 0 96px}
.legal-content section{display:grid;gap:16px;border-bottom:1px solid var(--ar-border);padding:32px 0}
.legal-content h2,.legal-content p,.legal-content ul{margin:0}
.legal-content h2{font-size:clamp(24px,3vw,36px)}
.legal-content p,.legal-content li{color:var(--ar-text);font-size:16px;line-height:1.75}
.legal-content ul{display:grid;gap:8px;padding-left:24px}
.legal-content a{color:var(--ar-accent-strong);font-weight:800;text-decoration:underline;text-underline-offset:4px}
.legal-note{display:grid;gap:8px;margin-top:32px;border:1px solid var(--ar-border);background:var(--ar-main);background:var(--ar-surface);padding:24px}
.legal-note p{margin:0}
@media(max-width:720px){
    .legal-hero{padding:64px 24px 48px}
    .legal-content{width:calc(100% - 32px);padding:40px 0 64px}
    .legal-content section{padding:24px 0}
}

/* Keep the overlaid hero label legible on every hero photograph. */
.hero .micro{color:var(--ar-main)}

/* Customer review: five labelled rating options on the 8px grid. */
.review-page .account-head{margin-bottom:var(--ar-space-4)}
.review-form{max-width:720px}
.review-rating{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--ar-space-1)}
.review-rating .payment-option{flex-direction:row;align-items:center;gap:var(--ar-space-1);min-height:48px;margin:0}
.review-form .check{gap:var(--ar-space-1);font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.5}
.review-rating .payment-option b{font:24px var(--ar-font-heading)}
.review-received{display:grid;gap:var(--ar-space-1);max-width:720px;padding:var(--ar-space-3);border:1px solid var(--ar-border);border-radius:var(--ar-radius-lg);background:var(--ar-surface)}
.review-received p{margin:0;font:20px/1.5 var(--ar-font-heading)}
.review-received span{color:var(--ar-text-muted)}
@media(max-width:720px){.review-rating{grid-template-columns:minmax(0,1fr)}}
.review-callout{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ar-space-2);margin-top:var(--ar-space-3);padding:var(--ar-space-2) var(--ar-space-3);border:1px solid var(--ar-border);border-radius:var(--ar-radius);background:var(--ar-main)}
.review-callout p{margin:0;max-width:60ch;line-height:1.6}
.revision-quota{margin:0 0 var(--ar-space-1);font-weight:700;color:var(--ar-text-muted)}

/* Package comparison: one column per package, row labels stay visible while the table scrolls sideways. */
.package-compare{overflow-x:auto;border:1px solid var(--ar-border);border-radius:var(--ar-radius-lg);background:var(--ar-surface);overscroll-behavior-x:contain}
.package-compare:focus-visible{outline:4px solid var(--ar-accent-strong);outline-offset:4px}
.compare-table{width:100%;min-width:max-content;border-collapse:separate;border-spacing:0}
.compare-table th,.compare-table td{padding:var(--ar-space-2);border-bottom:1px solid var(--ar-border);text-align:left;vertical-align:top;line-height:1.5}
.compare-table thead th{min-width:208px;max-width:280px;padding-top:var(--ar-space-3)}
.compare-table thead h3{margin:0;font:400 28px/1.15 var(--ar-font-heading)}
.compare-table thead p{margin:var(--ar-space-1) 0 0;font-size:16px;color:var(--ar-text-muted)}
.compare-table tbody td{max-width:280px}
.compare-table tbody th,.compare-corner{position:sticky;left:0;z-index:1;min-width:136px;background:var(--ar-main);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ar-text)}
.compare-table td small{display:block;color:var(--ar-text-muted)}
.compare-price{font:24px var(--ar-font-heading)}
.compare-table ul{margin:0;padding-left:18px}
.compare-table li+li{margin-top:4px}
.compare-actions td{display:table-cell}
.compare-actions form{margin:0 0 var(--ar-space-1)}
.compare-actions .pill{margin-top:0}
.compare-table tr:last-child>*{border-bottom:0}
.compare-hint{display:none;margin:0 0 var(--ar-space-2);color:var(--ar-text-muted)}
@media(max-width:900px){
    .compare-hint{display:block}
    .compare-table thead th{min-width:220px}
    .compare-table tbody th,.compare-corner{min-width:112px;max-width:112px}
}
.review-rating .payment-option small{opacity:1;color:var(--ar-text-muted)}

/* Touch targets the shared baseline cannot reach because these components size themselves. */
.logo{height:44px}
.panel-head a{display:inline-flex;align-items:center;min-height:44px}

/* Readable type (antislop R-06): field labels in sentence case at 14px, field text at 16px
   (also stops iOS zooming into focused inputs). Uppercase stays for eyebrows, buttons and the
   main navigation as the editorial brand voice, but never below 11-12px. */
.checkout-form label,.admin-form label,.video-revision-form label{font-size:14px;font-weight:700;letter-spacing:0;text-transform:none}
.checkout-form input,.checkout-form select,.checkout-form textarea,.admin-form input,.admin-form select,.admin-form textarea,.video-revision-form textarea{font-size:16px;font-weight:400;letter-spacing:0;text-transform:none}
.checkout-form .check,.admin-form .check{font-weight:400}
.pill,.main-nav,.header-cart,.arrow-link,.gallery-back{font-size:12px}
.micro,.footer small{font-size:11px}
/* Booking codes and client names are looked up and matched, so they wrap instead of being cut off. */

/* Transitions (transitions.dev: modal, menu dropdown). Reduced motion removes them. */
.t-modal{transform-origin:center;transform:scale(var(--modal-scale));opacity:0;transition:transform var(--modal-open-dur) var(--modal-ease),opacity var(--modal-open-dur) var(--modal-ease)}
.t-modal.is-open{transform:scale(1);opacity:1}
.t-modal.is-closing{transform:scale(var(--modal-scale-close));opacity:0;transition:transform var(--modal-close-dur) var(--modal-ease),opacity var(--modal-close-dur) var(--modal-ease)}
.t-dropdown{transform-origin:top right;transform:scale(var(--dropdown-pre-scale));opacity:0;transition:transform var(--dropdown-open-dur) var(--dropdown-ease),opacity var(--dropdown-open-dur) var(--dropdown-ease)}
.t-dropdown[data-origin="bottom-right"]{transform-origin:bottom right}
.t-dropdown.is-open{transform:scale(1);opacity:1}
@media (prefers-reduced-motion:reduce){.t-modal,.t-dropdown{transition:none!important}}

/* Sidebar: open by default on desktop (navigation.js), account block at the bottom. */
.admin-body .sidebar-account{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:var(--ar-space-1) 12px;margin-top:var(--ar-space-3);border-top:1px solid rgba(255,255,255,.2);padding-top:var(--ar-space-2)}
.sidebar-account__avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ar-main);color:var(--ar-secondary);font-weight:700;font-size:14px}
.sidebar-account__who{display:grid;min-width:0}
.sidebar-account__who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-account__who small{color:rgba(255,253,249,.75);font-size:13px}
.sidebar-account form{grid-column:1/-1;margin:0;border:0;padding:0}
.admin-body .sidebar-account__logout{display:flex;align-items:center;min-height:44px;width:100%;border:0;border-radius:8px;background:transparent;padding:0 12px;color:var(--ar-main);font-weight:700;text-align:left}
.admin-body .sidebar-account__logout:hover{background:rgba(255,255,255,.1)}
.admin-body[data-page-type="worker"] .sidebar-brand{display:grid;gap:8px;margin-bottom:24px}
.admin-body[data-page-type="worker"] .sidebar-brand img{margin:0}
.admin-body[data-page-type="worker"] .sidebar-brand small{font-size:11px;letter-spacing:.17em;opacity:.72}
.admin-body[data-page-type="worker"] .admin-sidebar nav{margin-top:0}
.admin-body .sidebar-account--top{flex:0 0 auto;margin:0 0 24px;border-top:0;border-bottom:1px solid rgba(255,255,255,.2);padding:0 0 var(--ar-space-2)}

/* People lists (Tim Produksi, Pelanggan): stats, toolbar with filters, table with row actions, dialogs. */
.team-page{display:grid;gap:var(--ar-space-3)}
.team-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ar-space-2);margin:0}
.team-stats>div{border:1px solid var(--ar-border);border-radius:var(--ar-radius-lg);background:var(--ar-surface);padding:var(--ar-space-2) var(--ar-space-3)}
.team-stats dt{color:var(--ar-text-muted);font-size:14px}
.team-stats dd{margin:var(--ar-space-1) 0 0;font:32px/1 var(--ar-font-heading);color:var(--ar-text)}
.team-panel{padding:0;overflow:hidden}
.team-toolbar{display:grid;grid-template-columns:minmax(220px,2fr) minmax(150px,1fr) minmax(150px,1fr) auto;align-items:end;gap:var(--ar-space-2);border-bottom:1px solid var(--ar-border);padding:var(--ar-space-2) var(--ar-space-3)}
.team-toolbar label{display:grid;gap:6px;margin:0;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none}
.team-toolbar input,.team-toolbar select{min-height:44px;border:1px solid var(--ar-border);border-radius:var(--ar-radius);background:var(--ar-white);padding:0 12px;font-size:16px;font-weight:400}
.team-toolbar input,.team-toolbar select{width:100%;min-width:0}
.team-toolbar__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ar-space-1)}
.team-button--quiet{background:var(--ar-surface)!important;color:var(--ar-secondary)!important;border:1px solid var(--ar-border)!important}
.team-reset{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--ar-space-1);color:var(--ar-secondary-soft);font-weight:700;text-decoration:underline}
.team-table{width:100%;border-collapse:collapse}
.team-table th{padding:12px var(--ar-space-2);border-bottom:1px solid var(--ar-border);background:var(--ar-main);color:var(--ar-text-muted);font-size:13px;font-weight:700;text-align:left}
.team-table td{padding:12px var(--ar-space-2);border-bottom:1px solid var(--ar-line-soft);vertical-align:middle}
.team-table th:first-child,.team-table td:first-child{padding-left:var(--ar-space-3)}
.team-table tbody tr:hover{background:var(--ar-main)}
.team-table tr.is-inactive .team-person b{color:var(--ar-text-muted)}
.team-person{display:flex;align-items:center;gap:12px;min-width:0}
.team-person>span:last-child{display:grid;min-width:0}
.team-person small{overflow:hidden;color:var(--ar-text-muted);text-overflow:ellipsis;white-space:nowrap}
.team-avatar{display:grid;flex:0 0 auto;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ar-main-soft);color:var(--ar-secondary);font-weight:700;font-size:14px}
.team-roles{display:flex;flex-wrap:wrap;gap:6px}
.role-badge,.status-badge{display:inline-flex;align-items:center;min-height:24px;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:700;white-space:nowrap}
.role-badge--photographer{background:var(--ar-cat-blue-soft);color:var(--ar-cat-blue)}
.role-badge--videographer{background:var(--ar-cat-purple-soft);color:var(--ar-cat-purple)}
.role-badge--photo_editor{background:var(--ar-cat-teal-soft);color:var(--ar-cat-teal)}
.role-badge--video_editor{background:var(--ar-warning-soft);color:var(--ar-warning)}
.role-badge--director{background:var(--ar-main-soft);color:var(--ar-secondary)}
.role-badge--assistant{background:var(--ar-main-soft);color:var(--ar-text-muted)}
.status-badge{background:var(--ar-main-soft);color:var(--ar-text-muted)}
.status-badge--active{background:var(--ar-success-soft);color:var(--ar-success)}
.team-load{color:var(--ar-text-muted);white-space:nowrap}
.team-load b{color:var(--ar-text)}
.team-load small{display:block;font-size:13px}
.team-money{white-space:nowrap;font-variant-numeric:tabular-nums}
.team-actions{white-space:nowrap;text-align:right}
.team-action{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--ar-border);border-radius:var(--ar-radius);background:var(--ar-surface);padding:0 14px;color:var(--ar-secondary);font-weight:700}
.team-action:hover{border-color:var(--ar-secondary)}
.team-action--icon{padding:0;margin-left:4px}
.team-action--icon svg{fill:currentColor}
.team-empty{display:grid;justify-items:start;gap:var(--ar-space-1);padding:var(--ar-space-3)}
.team-empty a{color:var(--ar-secondary-soft);font-weight:700;text-decoration:underline}
.team-pagination{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ar-space-2);padding:var(--ar-space-2) var(--ar-space-3)}
.team-pagination>span:first-child{margin-right:auto;color:var(--ar-text-muted)}
.team-pagination a,.team-pagination [aria-disabled]{display:inline-flex;align-items:center;min-height:44px;border:1px solid var(--ar-border);border-radius:var(--ar-radius);padding:0 14px;font-weight:700}
.team-pagination [aria-disabled]{color:var(--ar-text-muted)}

.row-menu{position:fixed;inset:auto;margin:0;min-width:220px;border:1px solid var(--ar-border);border-radius:var(--ar-radius);background:var(--ar-white);padding:6px;box-shadow:0 12px 32px rgba(53,21,10,.14);text-align:left}
.row-menu a,.row-menu button{display:flex;align-items:center;width:100%;min-height:44px;border:0;border-radius:6px;background:none;padding:0 12px;color:var(--ar-text);font:inherit;font-weight:600;text-align:left}
.row-menu a:hover,.row-menu button:hover{background:var(--ar-main)}
.row-menu form{margin:0}
.row-menu hr{margin:6px 0;border:0;border-top:1px solid var(--ar-border)}
.row-menu .row-menu__danger{color:var(--ar-danger)}

.ar-dialog{text-align:left;white-space:normal;width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border:1px solid var(--ar-border);border-radius:var(--ar-radius-lg);background:var(--ar-white);padding:0;color:var(--ar-text);box-shadow:0 24px 64px rgba(53,21,10,.24)}
.ar-dialog::backdrop{background:rgba(53,21,10,.45)}
.ar-dialog__form{display:grid;gap:var(--ar-space-2);margin:0;padding:var(--ar-space-3)}
.ar-dialog__form header h2{margin:0;font:700 22px/1.3 var(--ar-font-body)}
.ar-dialog__form header p{margin:6px 0 0;color:var(--ar-text-muted)}
.ar-dialog__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ar-space-2)}
.ar-dialog__grid .span-2{grid-column:1/-1}
.ar-dialog__grid label{margin:0}
.ar-dialog__grid input{border:1px solid var(--ar-border);border-radius:var(--ar-radius);background:var(--ar-white);padding:10px 12px}
.ar-dialog__grid fieldset{display:flex;flex-wrap:wrap;gap:var(--ar-space-1) var(--ar-space-2);margin:0;border:1px solid var(--ar-border);border-radius:var(--ar-radius);padding:12px var(--ar-space-2)}
.ar-dialog__grid legend{padding:0 4px;font-weight:700}
.customer-orders{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--ar-border)}
.customer-orders li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--ar-space-2);border-bottom:1px solid var(--ar-border);padding:10px 0}
.customer-orders a{display:inline-flex;align-items:center;min-height:44px;color:var(--ar-secondary)}
.customer-orders span:not(.status-badge){color:var(--ar-text-muted)}
@media (max-width:760px){.customer-orders li{grid-template-columns:1fr auto}.customer-orders li>span:not(.status-badge){grid-column:1/-1;grid-row:2}}
.ar-dialog__form footer{display:flex;justify-content:flex-end;gap:var(--ar-space-1)}

/* Produk & Paket: service badges and the textarea fields of the package dialogs. */
.role-badge--addon{background:var(--ar-main-soft);color:var(--ar-text-muted)}
.role-badge--graduation{background:var(--ar-cat-blue-soft);color:var(--ar-cat-blue)}
.role-badge--story{background:var(--ar-cat-purple-soft);color:var(--ar-cat-purple)}
.role-badge--production{background:var(--ar-cat-teal-soft);color:var(--ar-cat-teal)}
.ar-dialog__grid textarea{border:1px solid var(--ar-border);border-radius:var(--ar-radius);background:var(--ar-white);padding:10px 12px;font:inherit;font-weight:400;line-height:1.5;resize:vertical}
.ar-dialog__grid label.check{display:flex;flex-direction:row;align-items:center;gap:10px;min-height:44px;font-weight:600}
.ar-dialog__grid label.check input{flex:0 0 auto;width:18px;height:18px;margin:0}
@media(max-width:760px){
    .package-table td[data-label]:not([data-label="Paket"]){grid-column:1/-1}
    .package-table td.team-actions{grid-column:2;grid-row:1}
    .package-table td[data-label="Harga"]::before,.package-table td[data-label="Sesi"]::before,.package-table td[data-label="Dipesan"]::before{content:attr(data-label);display:block;color:var(--ar-text-muted);font-size:12px}
}

/* Portofolio cards and testimonial rows. */
.portfolio-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--ar-border);padding:var(--ar-space-2) var(--ar-space-3)}
.portfolio-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--ar-space-2);margin:0;padding:var(--ar-space-3);list-style:none}
.portfolio-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--ar-border);border-radius:var(--ar-radius-lg);background:var(--ar-white)}
.portfolio-card__image{position:relative;display:grid;place-items:center;overflow:hidden;aspect-ratio:4/3;background:var(--ar-main-soft)}
.portfolio-card__image img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.portfolio-card__image p{margin:0;padding:var(--ar-space-2);color:var(--ar-danger);font-size:14px;text-align:center}
.portfolio-card__body{display:grid;gap:6px;padding:var(--ar-space-2) var(--ar-space-2) 0}
.portfolio-card__body small{overflow:hidden;color:var(--ar-text-muted);text-overflow:ellipsis;white-space:nowrap}
.portfolio-card__actions{display:flex;align-items:center;gap:6px;margin-top:auto;padding:12px var(--ar-space-2) var(--ar-space-2)}
.portfolio-card__actions .cal-muted{margin-right:auto}
.team-stats .dash-delta{color:var(--ar-text-muted);font:400 13px/1.4 var(--ar-font-body)}
.testimonial-quote{max-width:52ch;margin:0 0 4px;font:italic 15px/1.5 var(--ar-font-heading)}
.testimonial-rating{color:var(--ar-accent);letter-spacing:2px}
.testimonial-consent{display:block;margin-top:4px;color:var(--ar-text-muted);font-size:12px}
.testimonial-original{margin:0;border-left:3px solid var(--ar-accent);background:var(--ar-main-soft);padding:12px 16px;font:italic 15px/1.6 var(--ar-font-heading)}
.testimonial-original footer{margin-top:6px;color:var(--ar-text-muted);font:700 13px var(--ar-font-body)}
.testimonial-publish{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;font-weight:600}
.testimonial-publish input{width:18px;height:18px;margin:0}
@media(max-width:760px){
    .portfolio-toolbar{padding:var(--ar-space-2)}
    .portfolio-cards{grid-template-columns:minmax(0,1fr);padding:var(--ar-space-2)}
    .testimonial-table td[data-label]:not([data-label="Pelanggan"]){grid-column:1/-1}
    .testimonial-table td.team-actions{grid-column:2;grid-row:1}
}

/* Pendaftaran Freelancer: status tabs with search, review dialog. */
.application-toolbar .team-search{flex:1 1 240px;max-width:360px;margin:0}
.application-toolbar input{width:100%;min-height:44px;border:1px solid var(--ar-border);border-radius:var(--ar-radius);background:var(--ar-white);padding:0 12px;font:inherit}
.application-decision{display:grid;gap:var(--ar-space-2);margin:0;border-top:1px solid var(--ar-border);padding-top:var(--ar-space-2)}
.application-decision footer{flex-wrap:wrap}
.application-reject{color:var(--ar-danger)!important}
@media(max-width:760px){
    .application-toolbar .team-search{max-width:none}
    .application-table td[data-label]:not([data-label="Pelamar"]){grid-column:1/-1}
    .application-table td.team-actions{grid-column:2;grid-row:1}
}

/* Pengaturan: section menu on the left, cards on the right (template Settings pattern). */
.settings-shell{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--ar-space-3);align-items:start}
.settings-nav{position:sticky;top:var(--ar-space-2);display:grid;gap:4px}
.settings-nav a{display:grid;gap:2px;min-height:44px;border-radius:var(--ar-radius);padding:10px 14px;color:var(--ar-text)}
.settings-nav a:hover{background:var(--ar-main-soft)}
.settings-nav a[aria-current]{background:var(--ar-surface);box-shadow:inset 3px 0 0 var(--ar-accent)}
.settings-nav small{color:var(--ar-text-muted);font-size:13px;line-height:1.4}
.settings-body{display:grid;gap:var(--ar-space-3);min-width:0}
.settings-card{display:grid;gap:var(--ar-space-2)}
.settings-card>header h2,.settings-card__head h2{margin:0 0 4px;font:700 18px/1.3 var(--ar-font-body)}
.settings-card form{margin:0}
.settings-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ar-space-2)}
.settings-card__head--padded{border-bottom:1px solid var(--ar-border);padding:var(--ar-space-2) var(--ar-space-3)}
.settings-actions{display:flex;justify-content:flex-end;margin-top:var(--ar-space-2)}
.settings-steps{display:grid;gap:12px;margin:0;padding-left:20px;line-height:1.6}
.settings-steps details{margin-top:6px}
.settings-steps summary{display:inline-flex;align-items:center;min-height:44px;color:var(--ar-secondary);font-weight:700;cursor:pointer}
.settings-secret{display:inline-block;border-radius:6px;background:var(--ar-main-soft);padding:2px 8px;font-size:15px;letter-spacing:.08em;word-break:break-all}
.settings-codes{border:1px solid var(--ar-success);border-radius:var(--ar-radius);background:var(--ar-success-soft);padding:var(--ar-space-2)}
.settings-codes h3{margin:0 0 4px;font:700 16px/1.3 var(--ar-font-body)}
.settings-codes ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:12px 0 0;padding:0;list-style:none}
.settings-codes code{font-size:15px;letter-spacing:.06em}
.settings-danger{border-top:1px solid var(--ar-border);padding-top:var(--ar-space-2)}
.settings-danger h3{margin:0 0 4px;font:700 16px/1.3 var(--ar-font-body);color:var(--ar-danger)}
.settings-list{display:grid;margin:0;padding:0;list-style:none}
.settings-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--ar-space-2);border-top:1px solid var(--ar-border);padding:12px 0}
.settings-list form{margin:0}
.audit-table code{font-size:12px;word-break:break-all}
@media(max-width:1000px){.settings-shell{grid-template-columns:minmax(0,1fr)}.settings-nav{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
    .settings-nav{grid-template-columns:minmax(0,1fr)}
    .settings-card__head{flex-direction:column}
    .settings-card__head--padded{padding:var(--ar-space-2)}
    .audit-table td[data-label]:not([data-label="Waktu"]){grid-column:1/-1}
}

/* Performa: the conversion funnel as labelled bars; every value is printed, so no tooltip is needed. */
.funnel{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.funnel li{display:grid;grid-template-columns:150px minmax(0,1fr) 72px 200px;align-items:center;gap:12px}
.funnel__label{font-weight:600}
.funnel__track{height:24px;border-radius:4px;background:var(--ar-main-soft)}
.funnel__bar{display:block;height:100%;border-radius:0 4px 4px 0;background:var(--ar-accent)}
.funnel b{font-variant-numeric:tabular-nums;text-align:right}
.funnel small{color:var(--ar-text-muted);font-size:13px}
@media(max-width:900px){.funnel li{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}.funnel__track{grid-column:1/-1;grid-row:2}.funnel small{grid-column:1/-1}}
@media(max-width:760px){
    .perf-table td[data-label]:not(:first-child){grid-column:1/-1}
    .perf-table td[data-label]:not(:first-child)::before{content:attr(data-label) " · ";color:var(--ar-text-muted)}
}

/* Pesanan & Penugasan: same list pattern, plus booking detail and team dialogs. */
.team-toolbar--wide{grid-template-columns:minmax(220px,2fr) repeat(4,minmax(130px,1fr))}
.team-toolbar--wide .team-toolbar__actions{grid-column:1/-1;justify-content:flex-end}
.booking-drive{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ar-space-2);border:1px solid var(--ar-border);border-radius:var(--ar-radius-lg);background:var(--ar-surface);padding:12px var(--ar-space-3)}
.booking-drive p{margin:0;max-width:72ch;color:var(--ar-text-muted)}
.booking-drive p b{margin-right:6px;color:var(--ar-text)}
.booking-requests{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ar-space-2);border:1px solid var(--ar-border);border-left:4px solid var(--ar-accent);border-radius:var(--ar-radius-lg);background:var(--ar-surface);padding:12px var(--ar-space-3)}
.booking-requests p{margin:0;color:var(--ar-text-muted)}
.booking-requests p b{margin-right:6px;color:var(--ar-text)}
.booking-table td[data-label="Jadwal"] .status-badge{margin-top:6px}
.booking-detail-grid .span-2{grid-column:1/-1}
.booking-change{display:grid;gap:8px;margin:0;padding-top:12px;border-top:1px solid var(--ar-border)}
.booking-change:first-of-type{padding-top:0;border-top:0}
.booking-change__details{white-space:pre-line;padding:10px 12px;border-radius:var(--ar-radius);background:var(--ar-main-soft)}
.booking-change__form{display:grid;gap:8px}
.booking-drive form{margin:0}
.booking-drive .drive-ready{color:var(--ar-success);font-weight:700}
.booking-panel-head{display:grid;gap:8px;border-bottom:1px solid var(--ar-border);padding:var(--ar-space-2) var(--ar-space-3)}
.booking-panel-head p{margin:0;color:var(--ar-text-muted)}
.booking-panel-head .booking-tabs{padding-bottom:0}
.booking-code{display:grid;gap:2px;min-width:0}
.booking-code b{overflow-wrap:anywhere}
.booking-code small,.booking-deadline{color:var(--ar-text-muted);font-size:13px}
.booking-deadline{display:block;margin-top:4px;white-space:nowrap}
.team-stack{display:inline-flex}
.team-stack .team-avatar+.team-avatar{margin-left:-8px}
.team-avatar--small{width:32px;height:32px;border:2px solid var(--ar-surface);font-size:12px}
.status-badge--warning,.status-badge--menunggu-dp{background:var(--ar-warning-soft);color:var(--ar-warning)}
.status-badge--dp-diterima{background:var(--ar-cat-blue-soft);color:var(--ar-cat-blue)}
.status-badge--lunas{background:var(--ar-success-soft);color:var(--ar-success)}
.status-badge--selesai{background:var(--ar-secondary);color:var(--ar-white)}
.status-badge--danger,.status-badge--ditutup-pelunasan-lewat-tenggat{background:var(--ar-danger-soft);color:var(--ar-danger-strong)}
.ar-dialog--wide{width:min(880px,calc(100vw - 32px))}
.booking-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ar-space-2)}
.booking-detail-grid section{display:grid;align-content:start;gap:8px;border:1px solid var(--ar-border);border-radius:var(--ar-radius);padding:var(--ar-space-2)}
.booking-detail-grid h3{margin:0;font:700 15px/1.3 var(--ar-font-body)}
.booking-detail-grid p{margin:0;line-height:1.55}
.booking-detail-grid a{color:var(--ar-secondary);font-weight:700}
.booking-detail-grid form{margin:0}
.booking-muted{color:var(--ar-text-muted);font-size:14px}
.booking-assignments,.booking-integrations{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.booking-assignments span{color:var(--ar-text-muted)}
.booking-integrations li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px}
.booking-integrations small{flex-basis:100%;color:var(--ar-danger-strong)}
.booking-inline-actions{display:flex;flex-wrap:wrap;gap:8px}
.booking-team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ar-space-2)}
.booking-team-grid fieldset{display:grid;align-content:start;gap:2px;margin:0;border:1px solid var(--ar-border);border-radius:var(--ar-radius);padding:12px var(--ar-space-2)}
.booking-team-grid legend{padding:0 4px;font-weight:700}
.booking-team-grid .check{display:flex;align-items:center;gap:10px;min-height:44px;margin:0}
.ar-dialog__grid select{border:1px solid var(--ar-border);border-radius:var(--ar-radius);background:var(--ar-white);padding:10px 12px}
.ar-dialog__grid label small{font-weight:400;color:var(--ar-text-muted)}
.ar-dialog__grid .check{display:flex;align-items:flex-start;gap:10px;line-height:1.5}
.ar-dialog__grid fieldset.addon-choices .check{flex-basis:100%}
.ar-dialog__form footer form{margin:0}

@media(max-width:1100px){.team-toolbar,.team-toolbar--wide{grid-template-columns:repeat(2,minmax(0,1fr))}.team-search{grid-column:1/-1}.team-toolbar__actions{grid-column:1/-1}}
@media(max-width:760px){
    .team-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .team-stats dd{font-size:26px}
    .team-toolbar{grid-template-columns:minmax(0,1fr);padding:var(--ar-space-2)}
    .team-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
    .team-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--ar-space-1) var(--ar-space-2);border-bottom:1px solid var(--ar-border);padding:var(--ar-space-2)}
    .team-table td{display:block;border:0;padding:0}
    .team-table td:first-child{padding-left:0}
    .team-table td[data-label="Anggota"]{grid-column:1/-1}
    .team-table td[data-label="Peran"],.team-table td[data-label="WhatsApp"],.team-table td[data-label="Tugas"]{grid-column:1/-1}
    .team-table td[data-label="WhatsApp"]::before,.team-table td[data-label="Tugas"]::before{content:attr(data-label) " · ";color:var(--ar-text-muted)}
    .team-actions{align-self:center}
    .ar-dialog__grid,.booking-detail-grid,.booking-team-grid{grid-template-columns:minmax(0,1fr)}
    .team-toolbar--wide{grid-template-columns:repeat(2,minmax(0,1fr))}
    .team-toolbar--wide .team-toolbar__actions{justify-content:flex-start}
    .team-toolbar--wide select{padding-inline:8px;font-size:15px}
    .booking-panel-head .booking-tabs a{flex:1 0 auto;padding-inline:12px}
    .booking-table td[data-label]:not([data-label="Booking"]){grid-column:1/-1}
    .booking-table td.team-actions{grid-column:2;grid-row:1}
    .booking-table td[data-label="Klien"]::before,.booking-table td[data-label="Paket"]::before,.booking-table td[data-label="Jadwal"]::before{content:attr(data-label);display:block;color:var(--ar-text-muted);font-size:12px}
    .booking-drive{padding:12px var(--ar-space-2)}
    .booking-panel-head{padding:var(--ar-space-2)}
}

/* Kalender Produksi: one card with a side panel (mini calendar, role calendars, crew) and the month grid. */
.cal-page{--cal-photographer:var(--ar-cat-blue);--cal-photographer-soft:var(--ar-cat-blue-soft);--cal-videographer:var(--ar-cat-purple);--cal-videographer-soft:var(--ar-cat-purple-soft);--cal-photo_editor:var(--ar-cat-teal);--cal-photo_editor-soft:var(--ar-cat-teal-soft);--cal-video_editor:var(--ar-warning);--cal-video_editor-soft:var(--ar-warning-soft);--cal-director:var(--ar-secondary);--cal-director-soft:var(--ar-main-soft);--cal-assistant:var(--ar-text-muted);--cal-assistant-soft:var(--ar-main-soft)}
.cal-page:has(#cal-role-photographer:not(:checked)) [data-role="photographer"],
.cal-page:has(#cal-role-videographer:not(:checked)) [data-role="videographer"],
.cal-page:has(#cal-role-photo_editor:not(:checked)) [data-role="photo_editor"],
.cal-page:has(#cal-role-video_editor:not(:checked)) [data-role="video_editor"],
.cal-page:has(#cal-role-director:not(:checked)) [data-role="director"],
.cal-page:has(#cal-role-assistant:not(:checked)) [data-role="assistant"],
.is-filtering .is-filtered-out,.is-filtering .cal-more-item{display:none!important}
.cal-shell{display:grid;grid-template-columns:272px minmax(0,1fr);overflow:hidden;margin-top:var(--ar-space-2);border:1px solid var(--ar-border);border-radius:var(--ar-radius-lg);background:var(--ar-surface)}
.cal-muted{margin:0;color:var(--ar-text-muted);font-size:14px;line-height:1.5}
.cal-panel{display:flex;flex-direction:column;border-right:1px solid var(--ar-border)}
.cal-panel__foot{margin-top:auto;border-bottom:0}
.cal-panel__foot .admin-button,.cal-primary{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px}
.cal-panel__title{display:flex;align-items:center;justify-content:space-between;margin:0;font:700 15px/1.3 var(--ar-font-body)}
.cal-roles{display:grid}
.cal-filter{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;font-weight:600;cursor:pointer}
.cal-filter input{width:18px;height:18px;margin:0;accent-color:var(--cal-photographer)}
.cal-filter--videographer input{accent-color:var(--cal-videographer)}
.cal-filter--photo_editor input{accent-color:var(--cal-photo_editor)}
.cal-filter--video_editor input{accent-color:var(--cal-video_editor)}
.cal-filter--director input{accent-color:var(--cal-director)}
.cal-filter--assistant input{accent-color:var(--cal-assistant)}
.cal-count{margin-left:auto;color:var(--ar-text-muted);font-weight:400;font-variant-numeric:tabular-nums}
.cal-people{display:grid;margin:0;padding:0;list-style:none}
.cal-people a{display:flex;align-items:center;gap:10px;min-height:44px;border-radius:var(--ar-radius);padding:0 8px;color:var(--ar-text);font-weight:600}
.cal-people a:hover{background:var(--ar-main-soft)}
.cal-people a[aria-current]{background:var(--ar-main-soft);color:var(--ar-secondary)}
.cal-main{min-width:0}
.cal-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;border-bottom:1px solid var(--ar-border);padding:var(--ar-space-2)}
.cal-head h2{margin:0 auto 0 4px;font:400 26px/1.15 var(--ar-font-heading);white-space:nowrap}
.cal-nav{display:flex;gap:6px}
.cal-nav__button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--ar-border);border-radius:var(--ar-radius);background:var(--ar-white);padding:0 12px;color:var(--ar-secondary);font:700 14px/1 var(--ar-font-body);cursor:pointer}
.cal-nav__button span{font-size:20px}
.cal-nav__button:hover{border-color:var(--ar-secondary)}
.cal-panel-toggle{display:none}
.cal-search{flex:0 1 180px;min-width:120px}
.cal-search input{width:100%;min-height:44px;border:1px solid var(--ar-border);border-radius:var(--ar-radius);background:var(--ar-white);padding:0 12px;font:inherit}
.cal-views{display:flex;border:1px solid var(--ar-border);border-radius:var(--ar-radius);background:var(--ar-white);padding:2px}
.cal-views a{display:inline-flex;align-items:center;min-height:44px;border-radius:6px;padding:0 14px;color:var(--ar-text-muted);font-weight:700}
.cal-views a[aria-current]{background:var(--ar-secondary);color:var(--ar-white)}
.cal-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-weekday{border-bottom:1px solid var(--ar-border);padding:10px;color:var(--ar-text-muted);font-size:13px;font-weight:700;text-align:center}
.cal-cell{display:flex;flex-direction:column;gap:4px;min-width:0;min-height:112px;border-right:1px solid var(--ar-border);border-bottom:1px solid var(--ar-border);background:var(--ar-white);padding:6px}
.cal-cell:last-child{border-right:0}
.cal-cell.is-outside{background:var(--ar-main-soft)}
.cal-cell.is-outside .cal-date{color:var(--ar-text-muted)}
.cal-cell.is-today{box-shadow:inset 0 0 0 2px var(--ar-secondary)}
.cal-date{display:inline-flex;align-items:center;align-self:flex-start;gap:6px;min-width:36px;min-height:36px;border:0;border-radius:var(--ar-radius);background:none;padding:0 3px;color:var(--ar-text);font:700 14px/1 var(--ar-font-body)}
.cal-num{display:grid;place-items:center;min-width:26px;height:26px;border-radius:6px}
button.cal-date{cursor:pointer}
button.cal-date:hover{background:var(--ar-main-soft)}
.cal-cell.is-today .cal-num{background:var(--ar-secondary);color:var(--ar-white)}
.cal-dots{display:none;gap:3px}
.cal-swatch{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cal-photographer)}
.cal-swatch--videographer{background:var(--cal-videographer)}
.cal-swatch--photo_editor{background:var(--cal-photo_editor)}
.cal-swatch--video_editor{background:var(--cal-video_editor)}
.cal-swatch--director{background:var(--cal-director)}
.cal-swatch--assistant{background:var(--cal-assistant)}
.cal-chips{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin:0;padding:0;list-style:none}
.cal-chips li{min-width:0}
.cal-chips li[data-role]:nth-child(n+3){display:none}
.is-filtering .cal-chips li[data-role]:nth-child(n+3){display:block}
.cal-chip{display:block;width:100%;min-height:28px;overflow:hidden;border:0;border-radius:6px;background:var(--cal-photographer);padding:6px 8px;color:var(--ar-white);font:700 12px/1.3 var(--ar-font-body);text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.cal-chip__dot{display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:currentColor;vertical-align:middle;opacity:.8}
.cal-chip--videographer{background:var(--cal-videographer)}
.cal-chip--photo_editor{background:var(--cal-photo_editor)}
.cal-chip--video_editor{background:var(--cal-video_editor)}
.cal-chip--director{background:var(--cal-director)}
.cal-chip--assistant{background:var(--cal-assistant)}
.cal-chip:hover{filter:brightness(1.12)}
.cal-more{min-height:28px;border:0;background:none;padding:0 4px;color:var(--ar-secondary);font:700 12px/1 var(--ar-font-body);text-align:left;cursor:pointer}
.cal-no-match,.cal-empty{padding:var(--ar-space-2)}
.cal-agenda{display:grid;gap:4px;padding:var(--ar-space-2) var(--ar-space-3)}
.cal-agenda h3{margin:var(--ar-space-2) 0 4px;color:var(--ar-text-muted);font:700 14px/1.3 var(--ar-font-body)}
.cal-agenda__day:first-child h3{margin-top:0}
.cal-agenda ul,.cal-day-list{display:grid;margin:0;padding:0;list-style:none}
.cal-item{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:start;gap:12px;border-bottom:1px solid var(--ar-border);border-left:3px solid var(--cal-photographer);padding:10px 0 10px 12px}
.cal-item--videographer{border-left-color:var(--cal-videographer)}
.cal-item--photo_editor{border-left-color:var(--cal-photo_editor)}
.cal-item--video_editor{border-left-color:var(--cal-video_editor)}
.cal-item--director{border-left-color:var(--cal-director)}
.cal-item--assistant{border-left-color:var(--cal-assistant)}
.cal-item time{font-weight:700;font-variant-numeric:tabular-nums}
.cal-item div{display:grid;gap:2px;min-width:0}
.cal-item span{color:var(--ar-text-muted);font-size:14px}
.cal-item a{color:var(--ar-secondary);font-weight:700}
.cal-connect label{margin:0;font-weight:700}
.cal-copy{display:flex;gap:8px}
.cal-copy input{flex:1;min-width:0;min-height:44px;border:1px solid var(--ar-border);border-radius:var(--ar-radius);background:var(--ar-white);padding:0 12px;font:inherit}
.cal-link{display:inline-flex;align-items:center;min-height:44px;color:var(--ar-secondary);font-weight:700}
.cal-connect footer{justify-content:space-between}
.cal-danger{min-height:44px;border:0;background:none;padding:0;color:var(--ar-danger);font-weight:700;cursor:pointer}
@media(max-width:1180px){
    .cal-shell{grid-template-columns:minmax(0,1fr)}
    .cal-panel{display:none;border-right:0;border-bottom:1px solid var(--ar-border)}
    .cal-panel.is-open{display:flex}
    .cal-panel-toggle{display:inline-flex}
    .cal-panel-toggle[aria-expanded="true"]{background:var(--ar-secondary);color:var(--ar-white)}
}
@media(max-width:760px){
    .cal-head{gap:8px}
    .cal-head h2{flex-basis:100%;order:3;margin:4px 0 0;font-size:24px}
    .cal-search{order:4;flex:1 1 100%}
    .cal-search input{width:100%}
    .cal-views{order:5;flex:1 1 100%}
    .cal-views a{flex:1;justify-content:center}
    .cal-weekday{padding:8px 0}
    .cal-cell{min-height:0;align-items:stretch;padding:2px}
    .cal-chips{display:none}
    .is-filtering .cal-chips{display:grid}
    .cal-date{flex-direction:column;justify-content:center;gap:4px;width:100%;min-height:52px}
    .cal-dots{display:flex}
    .cal-agenda{padding:var(--ar-space-2)}
    .cal-item{grid-template-columns:48px minmax(0,1fr)}
    .cal-item .status-badge{grid-column:2;justify-self:start}
}

/* Overview: action shortcuts, one range filter that scopes the tiles, charts and table below it. */
.dash{display:grid;gap:var(--ar-space-4)}
.dash-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--ar-space-2)}
.dash-head h2{margin:0 0 4px;font:400 30px/1.2 var(--ar-font-heading)}
.dash-head__actions{display:flex;flex-wrap:wrap;gap:8px}
.dash-head__actions .admin-button{display:inline-flex;align-items:center;min-height:44px}
.dash-section-title{margin:0 0 12px;font:700 17px/1.3 var(--ar-font-body)}
.dash-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ar-space-2);margin:0;padding:0;list-style:none}
.dash-actions a{display:flex;align-items:center;gap:12px;min-height:72px;border:1px solid var(--ar-border);border-left:4px solid var(--ar-accent);border-radius:var(--ar-radius-lg);background:var(--ar-surface);padding:12px var(--ar-space-2);color:var(--ar-text)}
.dash-actions a:hover{border-color:var(--ar-secondary)}
.dash-actions a.is-clear b{color:var(--ar-text-muted)}
.dash-actions b{font:700 28px/1 var(--ar-font-body)}
.dash-actions span{font-weight:600;line-height:1.35}
.dash-sales{display:grid;gap:var(--ar-space-2)}
.dash-filter{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.dash-filter .dash-section-title{margin:0 8px 0 0}
.dash-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ar-space-2);margin:0}
.dash-stats>div{display:grid;align-content:start;gap:6px;border:1px solid var(--ar-border);border-radius:var(--ar-radius-lg);background:var(--ar-surface);padding:var(--ar-space-2) var(--ar-space-3)}
.dash-stats dt{color:var(--ar-text-muted);font-size:14px;font-weight:600}
.dash-stats dd{margin:0;font:700 26px/1.2 var(--ar-font-body);overflow-wrap:anywhere}
.dash-stats .dash-delta{color:var(--ar-text-muted);font:400 13px/1.4 var(--ar-font-body)}
.dash-delta--up{color:var(--ar-success)!important}
.dash-delta--down{color:var(--ar-danger)!important}
.dash-charts{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--ar-space-2)}
.dash-chart{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:8px;min-width:0;margin:0;border:1px solid var(--ar-border);border-radius:var(--ar-radius-lg);background:var(--ar-surface);padding:var(--ar-space-2) var(--ar-space-3)}
.dash-chart h3{margin:0 0 2px;font:700 16px/1.3 var(--ar-font-body)}
.dash-chart__plot{position:relative;min-height:240px;border-radius:var(--ar-radius);outline-offset:4px}
.dash-chart__plot svg{display:block;overflow:visible}
.chart-grid{stroke:var(--ar-main-soft);stroke-width:1}
.chart-tick{fill:var(--ar-text-muted);font:12px var(--ar-font-body);font-variant-numeric:tabular-nums}
.chart-label{fill:var(--ar-text);font:700 12px var(--ar-font-body)}
.chart-area{fill:var(--ar-accent);fill-opacity:.1}
.chart-line{fill:none;stroke:var(--ar-accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart-dot{fill:var(--ar-accent);stroke:var(--ar-surface);stroke-width:2}
.chart-bar{fill:var(--ar-accent)}
.chart-bar.is-active{fill:var(--ar-accent-strong)}
.chart-cross{stroke:var(--ar-border-strong);stroke-width:1}
.chart-tip{position:absolute;z-index:2;display:grid;gap:2px;pointer-events:none;border:1px solid var(--ar-border);border-radius:var(--ar-radius);background:var(--ar-white);padding:8px 10px;box-shadow:0 8px 24px rgba(53,21,10,.12);white-space:nowrap}
.chart-tip[hidden]{display:none}
.chart-tip b{font-size:15px}
.chart-tip span{color:var(--ar-text-muted);font-size:12px}
.dash-table summary{display:inline-flex;align-items:center;min-height:44px;color:var(--ar-secondary);font-weight:700;cursor:pointer}
.dash-table table{width:100%;border-collapse:collapse;font-size:14px}
.dash-table th,.dash-table td{border-bottom:1px solid var(--ar-border);padding:8px 4px;text-align:left}
.dash-table td:last-child,.dash-table th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.dash-recent-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--ar-border);padding:var(--ar-space-2) var(--ar-space-3)}
.dash-recent-head h3{margin:0;font:700 16px/1.3 var(--ar-font-body)}
.dash-recent-head a,.booking-code a{display:inline-flex;align-items:center;min-height:44px;color:var(--ar-secondary);font-weight:700}
.booking-code a{min-height:0}
@media(max-width:1100px){.dash-actions,.dash-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-charts{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){
    .dash{gap:var(--ar-space-3)}
    .dash-head h2{font-size:24px}
    .dash-actions a{min-height:64px;padding:10px 12px}
    .dash-actions b{font-size:24px}
    .dash-stats>div{padding:12px var(--ar-space-2)}
    .dash-stats dd{font-size:20px}
    .dash-chart{padding:var(--ar-space-2)}
    .dash-recent-head{padding:var(--ar-space-2)}
    .booking-table td[data-label="Nilai"],.booking-table td[data-label="Pembayaran"]{grid-column:1/-1}
}

/* On desktop the sidebar stays put and the header button collapses it; the drawer close button is for mobile. */
@media (min-width:901px){.sidebar-close{display:none}}

/* Home: packages, how it works and FAQ, laid out like the template's pricing/steps/FAQ blocks in Aranzu's editorial style. */
.home-packages,.home-steps,.home-faq{padding:120px 3.5vw;border-top:1px solid var(--ar-border);scroll-margin-top:88px}
.home-steps{background:var(--ar-main-soft)}
.home-step-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ar-space-3);margin:0;padding:0;list-style:none;counter-reset:none}
.home-step-list li{display:grid;align-content:start;gap:10px;border-top:1px solid var(--ar-secondary);padding-top:20px}
.home-step-list span{color:var(--ar-accent);font:400 2.5rem/1 var(--ar-font-heading)}
.home-step-list h3{margin:0;font:700 1.15rem/1.35 var(--ar-font-body)}
.home-step-list p{margin:0;color:var(--ar-text-muted);line-height:1.6}
.home-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--ar-space-6);align-items:start}
.home-faq .section-heading{display:block;margin:0}
.home-faq-list{border-top:1px solid var(--ar-secondary)}
.home-faq-list details{border-bottom:1px solid var(--ar-border)}
.home-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 0;font:700 1.1rem/1.4 var(--ar-font-body);cursor:pointer;list-style:none}
.home-faq-list summary::-webkit-details-marker{display:none}
.home-faq-list summary::after{content:"+" / "";flex:0 0 auto;color:var(--ar-accent);font:400 1.6rem/1 var(--ar-font-heading)}
.home-faq-list details[open] summary::after{content:"–" / ""}
.home-faq-list details p{max-width:62ch;margin:0 0 20px;color:var(--ar-text-muted);line-height:1.7}
.home-faq-more{margin:24px 0 0;color:var(--ar-text-muted);line-height:1.7}
.home-faq-more a{color:var(--ar-secondary);font-weight:700}
@media(max-width:1100px){.home-step-list{grid-template-columns:repeat(2,minmax(0,1fr))}.home-faq{grid-template-columns:minmax(0,1fr);gap:var(--ar-space-3)}}
@media(max-width:760px){
    .home-packages,.home-steps,.home-faq{padding:64px 20px}
    .home-step-list{grid-template-columns:minmax(0,1fr)}
}

/* Masuk/daftar: template sign-in pattern; form left, a real Aranzu photograph right. */
.sign-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100vh - 88px);background:var(--ar-main)}
.sign-shell__form{display:flex;align-items:center;justify-content:center;padding:56px 24px}
.sign-shell__inner{width:min(440px,100%)}
.sign-shell__inner h1{margin:12px 0 12px;font:400 clamp(2.4rem,4vw,3.4rem)/1.05 var(--ar-font-heading)}
.sign-lead{margin:0 0 28px;color:var(--ar-text-muted);line-height:1.6}
.sign-form{display:grid;gap:16px}
.sign-form label{display:grid;gap:8px;margin:0;font-weight:700;font-size:14px;letter-spacing:0;text-transform:none}
.sign-form label small{color:var(--ar-text-muted);font-weight:400}
.sign-form input:not([type=checkbox]){width:100%;min-height:48px;border:1px solid var(--ar-border-strong);border-radius:var(--ar-radius);background:var(--ar-white);padding:0 14px;font:400 16px var(--ar-font-body);color:var(--ar-text)}
.sign-form input:focus-visible{outline:3px solid var(--ar-accent);outline-offset:1px}
.sign-field{display:grid;gap:4px}
.sign-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sign-label-row label{font-weight:700;font-size:14px}
.sign-label-row a,.sign-alt a{display:inline-flex;align-items:center;min-height:44px;color:var(--ar-secondary);font-weight:700}
.sign-check{display:flex!important;flex-direction:row;align-items:center;gap:10px;min-height:44px;font-weight:400!important}
.sign-check input{width:18px;height:18px;margin:0}
.sign-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sign-alt{margin:0;color:var(--ar-text-muted);text-align:center}
.sign-form .pill.full{display:flex;align-items:center;justify-content:center;width:100%;margin-top:4px}
.sign-shell__photo{position:relative;margin:0;overflow:hidden;background:var(--ar-main-soft)}
.sign-shell__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sign-shell__photo figcaption{position:absolute;right:32px;bottom:32px;left:32px;border-radius:var(--ar-radius-lg);background:rgba(53,21,10,.72);padding:20px 24px;color:var(--ar-white)}
.sign-shell__photo blockquote{margin:0 0 8px;font:italic 1.15rem/1.5 var(--ar-font-heading)}
.sign-shell__photo span{font-size:13px;font-weight:700;opacity:.85}
@media(max-width:1000px){.sign-shell{grid-template-columns:minmax(0,1fr)}.sign-shell__photo{display:none}}
@media(max-width:520px){.sign-pair{grid-template-columns:minmax(0,1fr)}.sign-shell__form{padding:40px 20px}}

/* Notification bell and popup, shared by the public, admin and worker headers. */
.notif-bell{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--ar-border);border-radius:999px;background:var(--ar-surface);color:var(--ar-secondary);cursor:pointer}
.notif-bell:hover{background:var(--ar-main-soft)}
.notif-bell b{position:absolute;top:-4px;right:-4px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--ar-accent);color:var(--ar-white);font-size:11px;line-height:1}
.notif-panel[popover]{position:fixed;inset:auto;top:84px;right:16px;width:min(380px,calc(100vw - 32px));max-height:min(70vh,560px);margin:0;padding:0;overflow-y:auto;border:1px solid var(--ar-border);border-radius:var(--ar-radius-lg);background:var(--ar-surface);box-shadow:var(--ar-shadow);color:var(--ar-text);font:400 14px/1.5 var(--ar-font-body);text-transform:none;letter-spacing:0}
.notif-panel__head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--ar-border);background:var(--ar-surface)}
.notif-panel h2{margin:0;font:700 15px/1.3 var(--ar-font-body)}
.notif-panel__head form{margin:0;padding:0;border:0}
.notif-panel__head button{min-height:36px;padding:0 10px;border:0;border-radius:var(--ar-radius);background:none;color:var(--ar-secondary);font:700 13px var(--ar-font-body);cursor:pointer}
.notif-panel__head button:hover{background:var(--ar-main-soft)}
.notif-item{display:grid;gap:4px;padding:14px 16px;border-bottom:1px solid var(--ar-border)}
.notif-item:last-child{border-bottom:0}
.notif-item.is-unread{background:var(--ar-main-soft);box-shadow:inset 3px 0 0 var(--ar-accent)}
.notif-item p{margin:0;color:var(--ar-text-soft)}
.notif-item footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.notif-item small{color:var(--ar-text-muted);font-size:13px;letter-spacing:0;text-transform:none}
.notif-item a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid var(--ar-secondary);border-radius:999px;color:var(--ar-secondary);font-size:13px;font-weight:700}
.notif-item a:hover,.notif-item a:focus-visible{background:var(--ar-secondary);color:var(--ar-white)}
.notif-empty{margin:0;padding:24px 16px;color:var(--ar-text-muted)}
.admin-header>.notif-bell{min-height:44px;margin-left:auto;border:1px solid var(--ar-border);background:var(--ar-surface);font-size:inherit}
.admin-header .notif-panel+span{margin-left:16px}
.site-nav .notif-panel[popover]{top:96px}
.admin-header .notif-panel[popover]{top:104px}
@media(max-width:900px){.site-nav .notif-panel[popover]{top:80px;right:12px}.admin-header .notif-panel[popover]{top:92px;right:12px}}

/* Worker workspace: the admin list pattern (stats, filters, table, detail dialog). */
.worker-page{display:grid;gap:var(--ar-space-3)}
.worker-next{font-size:28px}
.worker-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:var(--ar-space-2) var(--ar-space-3);border-bottom:1px solid var(--ar-border)}
.worker-filters .cal-views a span{margin-left:6px;opacity:.75}
.worker-search{display:flex;flex:1 1 360px;flex-wrap:wrap;align-items:center;gap:8px;max-width:560px;margin:0}
.worker-filters .team-search{flex:1 1 220px;max-width:none}
.worker-search .admin-button{min-height:44px}
.worker-filters input{width:100%;min-height:44px;border:1px solid var(--ar-border);border-radius:var(--ar-radius);background:var(--ar-white);padding:0 12px;font-size:16px}
.worker-revision-count{display:block;margin-top:4px;color:var(--ar-danger-strong);font-size:13px;font-weight:700}
.worker-folders,.worker-selection{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.worker-folders{display:flex;flex-wrap:wrap;gap:8px}
.booking-detail-grid .worker-folders a{min-height:44px;font-weight:700;text-decoration:none}
.worker-selection{max-height:220px;overflow:auto;padding:10px 12px 10px 32px;list-style:decimal;border-radius:var(--ar-radius);background:var(--ar-main-soft);font-size:14px}
.booking-detail-grid a.worker-whatsapp{display:inline-flex;align-items:center;min-height:44px;color:var(--ar-white)}
.booking-detail-grid h3 .status-badge{margin-left:6px;vertical-align:middle}
@media(max-width:900px){
    .worker-filters{padding:var(--ar-space-2)}
    .worker-filters .team-search{flex-basis:100%;max-width:none}
    .worker-table td[data-label="Pekerjaan"],.worker-table td[data-label="Jadwal"]{grid-column:1/-1}
    .worker-table td[data-label="Peran"]{grid-column:1}
    .worker-table td[data-label="Status"]{grid-column:1}
}
/* A table row turned into a grid on small screens must still honour [hidden]. */
.team-table tr[hidden]{display:none}
@media(max-width:560px){
    .admin-header{gap:12px}
    .admin-header>#sidebarToggle{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
    .admin-header h1{font-size:20px;line-height:1.2}
}

/* Customer timeline runs left to right so a booking card stays short; narrow screens scroll it sideways. */
.customer-timeline ol{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(104px,1fr);overflow-x:auto;padding-bottom:6px}
.customer-timeline li{min-height:0;padding:38px 10px 0 0;font-size:13px;line-height:1.35}
.customer-timeline li>span{top:0}
.customer-timeline li:not(:last-child)::after{top:13px;bottom:auto;left:34px;right:4px;width:auto;height:1px}
.customer-timeline li.done:not(:last-child)::after{background:var(--ar-success)}
.service-row__action{align-self:flex-start;margin-top:30px}

/* Filter selects keep their arrow away from the outline. */
.team-toolbar select,.worker-filters select{appearance:none;-webkit-appearance:none;padding-right:40px;background:var(--ar-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2335150a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center/14px}
@media(min-width:1101px){.testimonial-toolbar{grid-template-columns:minmax(200px,2fr) repeat(3,minmax(130px,1fr)) auto}.testimonial-toolbar .team-toolbar__actions{grid-column:auto}}
.portfolio-card__image{position:relative}
.portfolio-card__order{position:absolute;top:10px;left:10px;z-index:1;display:grid;place-items:center;min-width:32px;height:32px;padding:0 8px;border-radius:999px;background:var(--ar-secondary);color:var(--ar-white);font-weight:700;font-size:14px;box-shadow:0 0 0 2px var(--ar-surface)}

/* Search field with its Terapkan button on one line (Pesanan, Produk, Freelancer). */
.team-search-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.team-search-group .team-search{flex:1 1 200px;min-width:0;max-width:none;margin:0}
.team-search-group .admin-button{min-height:44px;flex:0 0 auto}
.team-toolbar .team-search-group{grid-column:auto}
@media(min-width:1101px){
    .booking-toolbar{grid-template-columns:minmax(320px,2.4fr) repeat(4,minmax(120px,1fr))}
    .package-toolbar{grid-template-columns:minmax(320px,2.4fr) repeat(3,minmax(130px,1fr))}
}
@media(max-width:1100px){.team-toolbar .team-search-group{grid-column:1/-1}}
.application-toolbar .team-search-group{flex:1 1 320px;max-width:480px}
@media(max-width:760px){.application-toolbar .team-search-group{max-width:none}}
.booking-panel-head__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.booking-panel-head__row .admin-button{min-height:44px}

/* Home pricing: three service cards, a dark price card each, and a help box (layout after Evergrid Pricing 01). */
.pricing-intro{display:grid;justify-items:center;gap:12px;max-width:720px;margin:0 auto var(--ar-space-10);text-align:center}
.pricing-intro h2{margin:0;font:400 clamp(2.4rem,4.6vw,4rem)/1.05 var(--ar-font-heading)}
.pricing-intro p:not(.micro){margin:0;max-width:60ch;color:var(--ar-text-muted);line-height:1.6}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ar-space-2);align-items:stretch}
.pricing-card{position:relative;display:flex;flex-direction:column;gap:var(--ar-space-4);border-radius:var(--ar-radius-lg);background:var(--ar-secondary);color:var(--ar-main);padding:var(--ar-space-3)}
.pricing-card .micro{margin:0;color:var(--ar-tan)}
.pricing-card__head{display:grid;gap:6px}
.pricing-card h3{margin:0;color:var(--ar-main);font:400 clamp(1.75rem,2.4vw,2.1rem)/1.1 var(--ar-font-heading)}
.pricing-card__line{margin:0;color:rgba(248,243,234,.82);font:italic 1.05rem/1.5 var(--ar-font-heading)}
.pricing-card__price{display:grid;gap:4px;margin:0}
.pricing-card__price small{color:rgba(248,243,234,.78);font-size:14px}
.pricing-card__price b{font:700 clamp(2rem,3vw,2.5rem)/1.1 var(--ar-font-body)}
.pricing-card__action.pill{display:flex;align-items:center;justify-content:center;width:100%;border:1px solid var(--ar-main);background:var(--ar-main);color:var(--ar-secondary);font-weight:700;text-align:center}
.pricing-card__action.pill:hover{background:var(--ar-surface)}
.pricing-card__list{display:grid;gap:12px}
.pricing-card__list h4{margin:0;border-bottom:1px solid rgba(248,243,234,.16);padding-bottom:12px;color:rgba(248,243,234,.78);font:700 13px/1.2 var(--ar-font-body);letter-spacing:.08em;text-transform:uppercase}
.pricing-card ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.pricing-card li{position:relative;padding-left:24px;font-size:15px;line-height:1.45}
.pricing-card li::before{content:"";position:absolute;top:.3em;left:2px;width:5px;height:9px;border:solid var(--ar-tan);border-width:0 2px 2px 0;transform:rotate(45deg)}
.pricing-help{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ar-space-2);margin-top:var(--ar-space-2);border-radius:var(--ar-radius-lg);background:var(--ar-secondary);color:var(--ar-main);padding:var(--ar-space-3)}
.pricing-help h3{margin:0 0 4px;color:var(--ar-main);font:400 1.5rem/1.2 var(--ar-font-heading)}
.pricing-help p{margin:0;max-width:60ch;color:rgba(248,243,234,.82);line-height:1.6}
.pricing-help .pill{display:inline-flex;align-items:center;justify-content:center;font-weight:700}
@media(max-width:991px){.pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pricing-intro{margin-bottom:var(--ar-space-6)}}
@media(max-width:640px){
    .pricing-grid{grid-template-columns:minmax(0,1fr);row-gap:var(--ar-space-2)}
    .pricing-intro{justify-items:start;text-align:left}
    .pricing-help{flex-direction:column;align-items:stretch;padding:var(--ar-space-2)}
    .pricing-help .pill{width:100%}
}

/* Keranjang: items and add-ons on the left, a sticky summary on the right; a bottom bar on phones. */
.cart-page{max-width:1240px;margin:0 auto;padding:140px 3.5vw 120px}
.cart-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:var(--ar-space-5);border-bottom:1px solid var(--ar-border);padding-bottom:var(--ar-space-3)}
.cart-head .micro{margin:0 0 8px}
.cart-head h1{margin:0;font:400 clamp(2.4rem,5vw,3.6rem)/1.05 var(--ar-font-heading)}
.cart-head h1 span{color:var(--ar-text-muted);font:400 1.1rem/1 var(--ar-font-body)}
.cart-head__link{color:var(--ar-secondary);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:var(--ar-space-5);align-items:start}
.cart-main{display:grid;gap:var(--ar-space-2)}
.cart-line{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:var(--ar-space-3);align-items:start;border:1px solid var(--ar-border);border-radius:var(--ar-radius-lg);background:var(--ar-surface);padding:var(--ar-space-3)}
.cart-line--addon{grid-template-columns:minmax(0,1fr) auto;padding:var(--ar-space-2) var(--ar-space-3)}
.cart-line__image{display:block;overflow:hidden;aspect-ratio:4/5;border-radius:var(--ar-radius)}
.cart-line__image img{width:100%;height:100%;object-fit:cover}
.cart-line__body .micro{margin:0 0 6px}
.cart-line h2{margin:0;font:400 clamp(1.5rem,2.4vw,2rem)/1.15 var(--ar-font-heading)}
.cart-line h2 a{color:inherit;text-decoration:none}
.cart-line h2 a:hover{text-decoration:underline}
.cart-line h3{margin:0;font:700 16px/1.3 var(--ar-font-body)}
.cart-line__body p:not(.micro){margin:4px 0 0;color:var(--ar-text-muted)}
.cart-line__meta{display:grid;gap:4px;margin:12px 0 0;padding:0;list-style:none;color:var(--ar-text-muted);font-size:15px}
.cart-line__price{display:grid;justify-items:end;gap:8px;text-align:right}
.cart-line__price strong{font-size:1.15rem}
.cart-line__price form{margin:0}
.cart-remove{min-height:44px;border:0;background:none;padding:0 4px;color:var(--ar-danger);font:700 14px/1 var(--ar-font-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cart-addons{margin-top:var(--ar-space-3);scroll-margin-top:100px}
.cart-addons>h2{margin:0;font:400 1.6rem/1.2 var(--ar-font-heading)}
.cart-addons>p{margin:4px 0 var(--ar-space-2);color:var(--ar-text-muted)}
.cart-addon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.cart-addon{display:grid;grid-template-rows:1fr auto auto;gap:12px;margin:0;border:1px dashed var(--ar-border-strong);border-radius:var(--ar-radius-lg);background:var(--ar-main-soft);padding:var(--ar-space-2)}
.cart-addon h3{margin:0;font:700 15px/1.3 var(--ar-font-body)}
.cart-addon p{margin:4px 0 0;color:var(--ar-text-muted);font-size:14px}
.cart-addon .pill{min-height:44px}
.cart-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ar-space-3);margin-top:var(--ar-space-4);border-top:1px solid var(--ar-border);padding-top:var(--ar-space-4)}
.cart-info h3{margin:0 0 6px;font:700 15px/1.3 var(--ar-font-body)}
.cart-info p{margin:0;color:var(--ar-text-muted);font-size:15px;line-height:1.6}
.cart-info a{color:var(--ar-secondary);font-weight:700}
.cart-summary{position:sticky;top:110px;display:grid;gap:var(--ar-space-2);border-radius:var(--ar-radius-lg);background:var(--ar-secondary);color:var(--ar-main);padding:var(--ar-space-3)}
.cart-summary h2{margin:0;color:var(--ar-main);font:400 1.5rem/1.2 var(--ar-font-heading)}
.cart-summary dl{display:grid;gap:10px;margin:0}
.cart-summary dl>div{display:flex;justify-content:space-between;gap:16px}
.cart-summary dt{color:rgba(248,243,234,.82)}
.cart-summary dt small{display:block;margin-top:2px;font-size:13px;color:rgba(248,243,234,.72)}
.cart-summary dd{margin:0;font-weight:700;text-align:right;white-space:nowrap}
.cart-summary__total{border-top:1px solid rgba(248,243,234,.18);padding-top:10px}
.cart-summary__pay{border-top:1px solid rgba(248,243,234,.18);padding-top:var(--ar-space-2)}
.cart-summary__now dt{color:var(--ar-main);font-weight:700}
.cart-summary__now dd{font-size:1.75rem;line-height:1.1}
.cart-summary__now{align-items:baseline}
.cart-summary__note{margin:0;color:rgba(248,243,234,.78);font-size:14px}
.cart-summary .cart-summary__cta{width:100%;min-height:52px;border-color:var(--ar-main);background:var(--ar-main);color:var(--ar-secondary);font-size:12px}
.cart-summary .cart-summary__cta:hover{background:var(--ar-surface)}
.cart-methods p{margin:0 0 8px;color:rgba(248,243,234,.78);font-size:13px}
.cart-methods ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.cart-methods li{border:1px solid rgba(248,243,234,.28);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700}
.cart-bar{display:none}
.cart-empty{display:grid;justify-items:center;gap:12px;border:1px solid var(--ar-border);border-radius:var(--ar-radius-lg);background:var(--ar-surface);padding:var(--ar-space-8) var(--ar-space-3);text-align:center;color:var(--ar-secondary)}
.cart-empty h2{margin:0;font:400 2rem/1.15 var(--ar-font-heading)}
.cart-empty p{margin:0;max-width:46ch;color:var(--ar-text-muted);line-height:1.6}
.cart-empty .pill{margin-top:8px}
.cart-empty__signin a{color:var(--ar-secondary);font-weight:700}
.cart-recommend{margin-top:var(--ar-space-6)}
.cart-recommend h2{margin:0 0 var(--ar-space-2);font:400 1.6rem/1.2 var(--ar-font-heading)}
.cart-recommend__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ar-space-2)}
.cart-recommend__card{overflow:hidden;border:1px solid var(--ar-border);border-radius:var(--ar-radius-lg);background:var(--ar-surface)}
.cart-recommend__card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cart-recommend__card div{display:grid;gap:8px;padding:var(--ar-space-2)}
.cart-recommend__card .micro,.cart-recommend__card h3,.cart-recommend__card p{margin:0}
.cart-recommend__card h3{font:400 1.4rem/1.2 var(--ar-font-heading)}
.cart-recommend__card .pill{justify-self:start;min-height:44px}
@media(max-width:900px){
    .cart-page{padding:110px 20px 140px}
    .cart-layout{grid-template-columns:minmax(0,1fr)}
    .cart-summary{position:static}
    .cart-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--ar-border);background:var(--ar-surface);padding:12px 20px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(53,21,10,.08)}
    .cart-bar p{display:grid;margin:0}
    .cart-bar small{color:var(--ar-text-muted);font-size:13px}
    .cart-bar b{font-size:1.2rem}
    .cart-bar .pill{min-height:48px}
    .cart-recommend__grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
    .cart-line{grid-template-columns:88px minmax(0,1fr)}
    .cart-line__price{grid-column:1/-1;grid-template-columns:1fr auto;align-items:center;justify-items:start;text-align:left;border-top:1px solid var(--ar-line-soft);padding-top:12px}
    .cart-line--addon{grid-template-columns:minmax(0,1fr)}
    .cart-line--addon .cart-line__price{grid-column:auto}
    .cart-info{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:900px){body:has(.cart-bar){padding-bottom:88px}body:has(.cart-bar) .chat-widget{bottom:calc(96px + env(safe-area-inset-bottom))}}
/* Text instead of arrow glyphs on navigation and send buttons. */
button.lightbox-nav{width:auto;height:44px;padding:0 18px;border-radius:999px;font:700 13px/1 var(--ar-font-body);letter-spacing:.04em}
.chat-form button[type=submit]{padding:0 14px;font:700 14px/1 var(--ar-font-body)}
.chat-widget .chat-form{grid-template-columns:1fr auto}

/* Footer: compact on desktop, brand block left-aligned with the tagline tight under the logo. */
.footer{min-height:0;gap:32px;padding:48px 32px 32px}
.footer>div:first-child{align-items:flex-start;text-align:left}
/* The logo PNG carries ~23px of transparent padding above and ~25px below at 150px wide; negative margins trim it. */
.footer img{margin:-23px 0 -19px -16px}
.footer p{margin:0}
.footer>div{gap:2px}
.footer small{margin-bottom:8px}
.footer a{min-height:32px}
/* Phones: only the logo and tagline, centred, about 5px apart. */
@media(max-width:720px){
    .footer{padding-top:40px}
    .footer>div:not(:first-child){display:none}
    .footer>div:first-child{align-items:center;text-align:center}
    .footer img{margin:-23px auto -20px}
}
/* Public header: hamburger and "Menu" share one size and baseline. */
.mobile-toggle{align-items:center;gap:8px;line-height:1}
.mobile-toggle .menu-icon{display:block;width:14px;height:12px;flex:0 0 auto}
.mobile-toggle .menu-label{font-size:14px;line-height:1}
/* Admin and workspace header: hamburger and page title side by side on one centre line. */
.admin-header{align-items:center}
.admin-header>#sidebarToggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;font-size:22px;line-height:1}
.admin-header>.admin-header__title{display:flex;align-items:center;min-height:44px}
.admin-header h1{margin:0;line-height:1.2}
/* Service pages: the hero panel uses the footer colour. */
.product-hero>div{background:var(--ar-secondary)}
/* Comparison: price-to-revision rows sit centred under each package. */
.compare-table .compare-detail td{text-align:center}
/* Calendar header: title over the month buttons on the left, search over the view switch on the right.
   The panel's top section has the same two-row height so the borders line up. */
.cal-shell{--cal-head-h:139px}
.cal-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);grid-template-areas:"title search" "nav views";align-items:center;gap:12px 16px;min-height:var(--cal-head-h)}
.cal-head h2{grid-area:title;margin:0;line-height:44px}
.cal-head .cal-nav{grid-area:nav}
.cal-head .cal-search{grid-area:search;width:100%;min-width:0}
.cal-head .cal-views{grid-area:views}
.cal-head .cal-views a{flex:1;justify-content:center}
@media(max-width:1180px){
    .cal-head{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"toggle title" "nav nav" "search search" "views views"}
    .cal-head .cal-panel-toggle{grid-area:toggle}
}
/* Big calendar: every day is its own fixed-size card; two chips, then "+N". */
.cal-grid{display:grid;gap:6px;padding:8px;background:var(--ar-main-soft)}
.cal-row{gap:6px}
.cal-weekday{border:0;padding:6px 0 2px}
.cal-cell{height:148px;min-height:0;overflow:hidden;border:1px solid var(--ar-border);border-radius:var(--ar-radius);padding:6px}
.cal-cell:last-child{border-right:1px solid var(--ar-border)}
.cal-cell.is-outside{background:var(--ar-main)}
.cal-more{align-self:flex-start;min-height:24px;border-radius:999px;background:var(--ar-main-soft);padding:0 10px}
.cal-more:hover{background:var(--ar-line-soft)}
/* Day details scroll inside the dialog instead of growing past the screen. */
.cal-day-list{max-height:min(60vh,440px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:760px){
    .cal-grid{gap:3px;padding:4px}
    .cal-row{gap:3px}
    .cal-cell{height:60px;padding:2px}
    .cal-date{min-height:52px}
}
/* Calendar v3: Google button outside; month + navigation over the filter cards; search and view switch top right. */
.cal-toolbar{display:flex;margin-top:var(--ar-space-1)}
.cal-shell{grid-template-columns:272px minmax(0,1fr);grid-template-areas:"month head" "panel main"}
.cal-monthbar{grid-area:month;display:grid;align-content:start;gap:8px;border-right:1px solid var(--ar-border);border-bottom:1px solid var(--ar-border);padding:var(--ar-space-2)}
.cal-monthbar h2{margin:0;font:400 26px/44px var(--ar-font-heading);white-space:nowrap}
.cal-monthbar .cal-nav .cal-nav__button{flex:1}
.cal-head{grid-area:head;display:flex;align-items:center;gap:12px;min-height:0;grid-template-areas:none}
.cal-head .cal-search{flex:1 1 auto;width:auto}
.cal-head .cal-search input{min-height:50px}
.cal-head .cal-views{flex:0 0 auto}
.cal-head .cal-views a{padding:0 18px}
.cal-panel{grid-area:panel;display:flex;flex-direction:column;gap:12px;min-height:0;padding:12px}
.cal-main{grid-area:main}
.cal-card{display:flex;flex:1 1 0;flex-direction:column;min-height:132px;overflow:hidden;border:1px solid var(--ar-border);border-radius:var(--ar-radius);background:var(--ar-white)}
.cal-card>.cal-panel__title{border-bottom:1px solid var(--ar-border);padding:12px}
.cal-card__body{flex:1 1 auto;min-height:0;margin:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 12px}
.cal-card .cal-people{list-style:none}
.cal-panel__foot{margin-top:0;border:0;padding:0}
@media(max-width:1180px){
    .cal-shell{grid-template-columns:minmax(0,1fr);grid-template-areas:"month" "head" "panel" "main"}
    .cal-monthbar{border-right:0}
    .cal-head{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--ar-border)}
    .cal-head .cal-search{flex:1 1 200px}
    .cal-panel{display:none;border-right:0;border-bottom:1px solid var(--ar-border)}
    .cal-panel.is-open{display:flex}
    .cal-card{flex:none;max-height:240px}
}
@media(max-width:760px){
    .cal-head .cal-views{flex:1 1 100%}
    .cal-monthbar h2{font-size:24px}
}
/* Staff pages open straight on their content: no intro line, a tighter top. */
@media(min-width:761px){.admin-content{padding-top:var(--ar-space-3)}}
/* Profile photos: same circle as the initials, cropped to fill. */
img.avatar{display:block;object-fit:cover;border-radius:50%}
img.sidebar-account__avatar{width:40px;height:40px}
img.team-avatar{width:40px;height:40px}
img.team-avatar--small{width:32px;height:32px}
a.sidebar-account{color:inherit;text-decoration:none;border-radius:8px}
a.sidebar-account:hover .sidebar-account__who b{text-decoration:underline}
.avatar--large{width:96px;height:96px;font-size:30px;display:grid;place-items:center;border-radius:50%;background:var(--ar-main-soft);color:var(--ar-secondary);font-weight:700}
.avatar-edit{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ar-space-3)}
.avatar-edit__form{display:grid;gap:12px;flex:1 1 260px}
.avatar-edit__form input[type=file]{min-height:44px;padding:8px 0;font:inherit}
.staff-profile{display:grid;gap:var(--ar-space-3)}
.staff-profile__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ar-space-2);margin:0}
.staff-profile__facts dt{color:var(--ar-text-muted);font-size:13px;font-weight:700}
.staff-profile__facts dd{margin:4px 0 0;font-weight:700;overflow-wrap:anywhere}
@media(max-width:560px){.staff-profile__facts{grid-template-columns:minmax(0,1fr)}}
.cal-toolbar .cal-primary{width:auto;padding-inline:20px}
.cal-card__body{display:grid;align-content:start;gap:2px}
.avatar-edit__form label{display:grid;gap:6px;font-weight:700}
.avatar-edit__form .settings-actions{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:8px}
/* Team profile and change requests. */
.staff-profile__head,.staff-detail__head{display:flex;align-items:center;gap:var(--ar-space-2)}
.staff-profile__head h2,.staff-detail__head h2{margin:0}
.staff-profile__head p,.staff-detail__head p{margin:4px 0 0}
.staff-profile__facts .span-2{grid-column:1/-1}
.staff-profile__facts dd{white-space:pre-line}
.staff-request__photo{display:flex;align-items:center;gap:12px;font-weight:700}
.staff-request__photo img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.staff-request__diff{width:100%;border-collapse:collapse;margin:8px 0 12px;font-size:14px}
.staff-request__diff th,.staff-request__diff td{border-bottom:1px solid var(--ar-border);padding:8px;text-align:left;vertical-align:top}
.staff-request__diff thead th{color:var(--ar-text-muted);font-size:12px}
.staff-request-badge{display:block;margin-top:2px;color:var(--ar-warning);font-weight:700}
.admin-form .avatar-edit{margin-bottom:var(--ar-space-2)}
/* Customer summary: each number is its own card again. */
.account-page .account-stats{gap:var(--ar-space-2);border:0;background:transparent}
.account-page .account-stats>div+div{border:1px solid var(--ui-line)}
/* Calendar: month name centred over Sebelumnya / Berikutnya. */
.cal-monthbar h2{text-align:center}
/* Tabs on the left, search on the right; the search stretches with the window and takes the full row once it wraps. */
.worker-search,.application-toolbar .team-search-group{flex:1 1 360px;max-width:560px;margin-left:auto;justify-content:flex-end}
@media(max-width:900px){.worker-search,.application-toolbar .team-search-group{flex-basis:100%;max-width:none;margin-left:0}}
/* Produk & Paket, Testimonial: the list scrolls inside its card; the header row stays visible. */
.admin-table-wrap--scroll{max-height:min(640px,70vh);overflow-y:auto;overscroll-behavior:contain}
.admin-table-wrap--scroll thead th{position:sticky;top:0;z-index:1}
.admin-table-wrap--scroll:focus-visible{outline:2px solid var(--ar-secondary);outline-offset:-2px}
@media(min-width:1101px){.package-toolbar{grid-template-columns:minmax(260px,2.4fr) repeat(3,minmax(120px,1fr)) auto}.package-toolbar .team-toolbar__actions{grid-column:auto}}
.package-toolbar .team-toolbar__actions{align-self:end}

/* Fee tim: section heads, the payout checklist, and amount inputs inside tables. */
.fee-section-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;padding:var(--ar-space-2)}
.fee-section-head h2{margin:0 0 4px;font:700 18px/1.3 var(--ar-font-body)}
.fee-section-head p{margin:0}
.fee-sub{display:block;margin-top:2px}
.fee-pick{display:block;max-height:280px;margin:0 0 var(--ar-space-2);overflow-y:auto;border:1px solid var(--ar-border);border-radius:var(--ar-radius);padding:0 12px}
.fee-pick label.check{align-items:center;gap:10px;min-height:44px;margin:0;padding:8px 0;font-weight:400;line-height:1.35}
.fee-pick label.check+label.check{border-top:1px solid var(--ar-line-soft)}
.fee-pick label.check>span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.fee-pick label.check>.team-money{flex:0 0 auto}
.fee-pick b:first-child,.fee-pick small{display:block}
.fee-pick small{color:var(--ar-text-muted)}
.fee-pay input[type=file]{width:100%;min-width:0;max-width:100%}
.fee-amount input{width:min(160px,100%);min-height:44px}
.fee-rate-group{margin:0 0 var(--ar-space-3);border:0;padding:0}
.fee-rate-group legend{margin-bottom:8px;font:700 16px/1.3 var(--ar-font-body)}
/* Keuangan: income amounts read as money in; the delete action sits under the edit form. */
.finance-note{margin:0}
.team-table td.finance-in b{color:var(--ar-success)}
.finance-delete{display:flex;justify-content:flex-start;padding:0 var(--ar-space-3) var(--ar-space-3)}
.finance-charts{padding:0 var(--ar-space-2) var(--ar-space-2)}
.finance-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.finance-toolbar>label:not(.team-search){flex:0 1 240px}
.finance-toolbar .team-search{flex:1 1 260px}
.ar-dialog__grid input[type=file]{width:100%;min-width:0;max-width:100%}
@media(max-width:760px){.finance-table td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;color:var(--ar-text-muted);font-size:12px}}
/* Sumber & Iklan: the generated campaign link with its copy button. */
.utm-result{display:grid;gap:8px;margin-top:var(--ar-space-2)}
.utm-result__row{display:flex;gap:8px}
.utm-result__row input{flex:1 1 auto;min-width:0;min-height:44px;border:1px solid var(--ar-border);border-radius:var(--ar-radius);background:var(--ar-white);padding:0 12px;font:inherit}
/* Studio Konten: one box per platform, copyable fields with a character count, and the image creative. */
.content-studio .dash-filter{align-items:center}
.content-box__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px}
.content-box__head h2{margin:0}
.content-engine{display:inline-block;margin-top:4px;color:var(--ar-text-muted);font-size:13px}
.content-variant{margin-top:var(--ar-space-2);border-top:1px solid var(--ar-line-soft);padding-top:var(--ar-space-2)}
.content-variant h3{margin:0 0 8px;font:700 15px/1.3 var(--ar-font-body)}
.content-field{display:grid;gap:6px;margin-top:var(--ar-space-2)}
.content-field__head{display:flex;align-items:center;gap:10px}
.content-field__head label{flex:1 1 auto;min-width:0;margin:0;font-weight:700}
.content-field textarea{width:100%;min-width:0;border:1px solid var(--ar-border);border-radius:var(--ar-radius);background:var(--ar-white);color:var(--ar-text);padding:10px 12px;font:inherit;line-height:1.5;resize:vertical}
.content-count{color:var(--ar-text-muted);font-size:13px;font-variant-numeric:tabular-nums}
.content-count.is-over{color:var(--ar-danger);font-weight:700}
.content-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 var(--ar-space-2)}
.content-shots{margin-top:var(--ar-space-2)}
.content-creative{display:grid;gap:var(--ar-space-2);justify-items:start}
.content-creative canvas{width:min(100%,420px);height:auto;border:1px solid var(--ar-border);border-radius:var(--ar-radius)}
@media(max-width:760px){.team-table.content-shots tr{grid-template-columns:minmax(0,1fr)}}
.content-top-actions{display:flex;flex-wrap:wrap;gap:8px}
.publish-list{display:grid;margin:var(--ar-space-2) 0 0;padding:0;list-style:none}
.publish-list li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;min-height:52px;border-top:1px solid var(--ar-line-soft);padding:8px 0}
.publish-state{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--ar-text-muted)}
.publish-state.is-done{color:var(--ar-success);font-weight:700}
.publish-state.is-failed{color:var(--ar-danger)}
.publish-pick{max-height:none}
.admin-button:disabled{opacity:.5;cursor:not-allowed}
/* Sidebar: on desktops with a mouse the links are 36px tall so Operasional and Konten fit without scrolling;
   touch screens keep the 48px targets. The scrollbar stays visible so the remaining groups are discoverable. */
#adminSidebar nav{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
@media (min-width:901px) and (pointer:fine){
    .admin-sidebar nav{gap:12px}
    .admin-sidebar .nav-group{gap:2px}
    .admin-sidebar .nav-group>span{padding-bottom:4px}
    .admin-sidebar nav a{min-height:36px;padding:6px 16px}
}
/* Overview: the Konten shortcuts and the next planned posts. */
.dash-content{margin-top:var(--ar-space-3)}
.dash-content .dash-filter{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.dash-content__actions{display:flex;flex-wrap:wrap;gap:8px}
.dash-content__list{display:grid;gap:8px;margin:var(--ar-space-2) 0 0;padding:0;list-style:none}
.dash-content__list a{display:grid;grid-template-columns:minmax(150px,auto) 1fr auto;gap:4px 16px;align-items:center;min-height:48px;border:1px solid var(--ar-border);border-radius:var(--ar-radius);background:var(--ar-surface);padding:8px 16px;color:var(--ar-text)}
@media(max-width:620px){.dash-content__list a{grid-template-columns:1fr}}
/* Rencana Konten: month grid on desktop, a list of planned days on phones. */
.plan-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.plan-bar h2{margin:0 auto 0 0;font:400 28px/1.2 var(--ar-font-heading)}
.plan-nav,.plan-bar__actions{display:flex;flex-wrap:wrap;gap:8px}
.plan-help{margin:12px 0 var(--ar-space-2)}
.plan-calendar{padding:8px}
.plan-weekdays,.plan-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.plan-weekdays span{padding:4px 8px;color:var(--ar-text-muted);font-size:12px;font-weight:700}
.plan-grid{margin:0;padding:0;list-style:none}
.plan-day{display:grid;align-content:start;gap:4px;min-height:112px;border:1px solid var(--ar-line-soft);border-radius:var(--ar-radius);background:var(--ar-surface);padding:6px}
.plan-day.is-outside{background:transparent;color:var(--ar-text-muted)}
.plan-day.is-today{border-color:var(--ar-accent)}
.plan-day__date{font-weight:700;font-variant-numeric:tabular-nums}
.plan-day__month{display:none}
.plan-item{display:grid;gap:2px;width:100%;border:1px solid var(--ar-border);border-left:3px solid var(--ar-text-muted);border-radius:6px;background:var(--ar-main);padding:4px 6px;color:var(--ar-text);text-align:left;font:inherit;font-size:12px;line-height:1.35;cursor:pointer}
.plan-item__time{font-weight:700;font-variant-numeric:tabular-nums}
.plan-item__title{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.plan-item__status{color:var(--ar-text-muted)}
.plan-item--ready{border-left-color:var(--ar-warning)}
.plan-item--scheduled,.plan-item--publishing{border-left-color:var(--ar-accent)}
.plan-item--published{border-left-color:var(--ar-success)}
.plan-item--failed{border-left-color:var(--ar-danger)}
.plan-item--failed .plan-item__status{color:var(--ar-danger);font-weight:700}
.plan-empty{margin-top:8px}
.plan-channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px 16px;margin:0;border:0;padding:0}
.plan-channels legend{margin-bottom:6px;font-weight:700}
.plan-channels label.check{display:flex;align-items:flex-start;gap:8px;min-height:36px;margin:0;font-weight:400}
.plan-channels small{display:block;color:var(--ar-text-muted)}
@media(max-width:760px){
    .plan-weekdays{display:none}
    .plan-grid{grid-template-columns:1fr}
    .plan-day{min-height:0}
    .plan-day.is-empty,.plan-day.is-outside{display:none}
    .plan-day__month{display:inline}
    .plan-item{font-size:14px;padding:8px 10px}
}
.publish-when{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:0 0 var(--ar-space-2);border:0;padding:0}
.publish-when legend{margin-bottom:6px;font-weight:700}
.publish-when label.check{display:flex;align-items:center;gap:8px;min-height:44px;margin:0;font-weight:400}
.publish-when__at{display:grid;gap:4px;flex:1 1 220px}
[data-schedule-only][hidden]{display:none!important}
/* Studio Konten: caption templates, Template + AI, and saving edits per box. */
.content-polish{align-self:end}
.content-polish small,.content-template small{display:block;color:var(--ar-text-muted)}
.content-template{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 16px;margin-top:var(--ar-space-2);border:1px dashed var(--ar-border);border-radius:var(--ar-radius);padding:12px}
.content-template>label:first-child{display:grid;gap:4px;flex:1 1 220px;margin:0}
.content-template label.check{display:flex;align-items:center;gap:8px;min-height:44px;margin:0;font-weight:400}
.content-edit__save{display:flex;justify-content:flex-end;margin-top:var(--ar-space-2)}
.template-preview{max-width:420px;color:var(--ar-text-muted);white-space:pre-line}
.template-codes code{font-size:12px;background:var(--ar-main-soft);border-radius:4px;padding:1px 4px}
.ar-dialog__grid>label{min-width:0}.ar-dialog__grid select{width:100%;min-width:0;max-width:100%}
.content-cta{display:grid;gap:4px;max-width:320px;margin-top:var(--ar-space-2);font-weight:700}
.content-cta select{min-height:44px}
.content-shots input,.content-shots textarea{width:100%;min-width:0;border:1px solid var(--ar-border);border-radius:var(--ar-radius);background:var(--ar-white);color:var(--ar-text);padding:6px 8px;font:inherit;resize:vertical}
.content-shots input{min-height:40px}
.content-shots td:first-child{width:120px}
.plan-item[draggable="true"]{cursor:grab}
.plan-item.is-dragging{opacity:.5}
.plan-day.is-drop{outline:2px dashed var(--ar-accent);outline-offset:-2px}
.plan-item--review{border-left-color:var(--ar-secondary-soft)}
.plan-approve{display:flex;justify-content:flex-end;padding:0 var(--ar-space-3)}
.content-video{display:grid;gap:var(--ar-space-2);justify-items:start}
.content-video canvas,.content-video video{width:min(100%,270px);height:auto;aspect-ratio:9/16;border:1px solid var(--ar-border);border-radius:var(--ar-radius);background:#120c09}
.fee-method{display:grid;gap:4px;margin:0 0 var(--ar-space-2);border:0;padding:0}
.fee-method legend{margin-bottom:6px;font-weight:700}
.fee-method label.check,.fee-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:44px;margin:0;font-weight:400}
.fee-method small{flex-basis:100%;padding-left:26px;color:var(--ar-text-muted)}
[data-manual-only][hidden],[data-transfer-only][hidden]{display:none!important}

/* Owner decision 19 Okt 2026: headings and button labels in Capitalize Each Word. Zero specificity, so uppercase micro styles (.pill, .micro) keep their own rule. */
:where(h1,h2,h3,h4,h5,h6,button,.admin-button,.cal-nav__button){text-transform:capitalize}

/* One dropdown arrow for every single select, 16px from the edge so it does not hug the border. */
select:not([multiple]):not([size]){appearance:none;-webkit-appearance:none;padding-right:42px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2335150a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:14px}
.content-sources label.check{align-items:center}.content-sources label.check input{margin:0}
.compare-table thead th{text-align:center;vertical-align:bottom}
/* Overview: one rhythm between sections, and Konten in a box like the other blocks (19 Okt 2026). */
.dash-content,.dash-sales{margin-top:var(--ar-space-2)}.dash-sales{gap:0}.dash-sales>.dash-section-title,.dash-content>.dash-section-title{margin:0 0 12px}.dash-sales>.dash-filter{margin:0}.dash-sales>*+*:not(.dash-filter):not(.dash-section-title){margin-top:var(--ar-space-2)}.dash-box{display:grid;gap:var(--ar-space-2);border:1px solid var(--ar-border);border-radius:var(--ar-radius-lg);background:var(--ar-surface);padding:var(--ar-space-2) var(--ar-space-3)}.dash-box .dash-content__list{margin:0}.dash-box__empty{margin:0}
.whatsapp-paste{display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px;padding:12px;border:1px dashed var(--ar-border-strong);border-radius:var(--ar-radius)}.whatsapp-paste label{margin:0}@media (max-width:640px){.whatsapp-paste{grid-template-columns:1fr}}
.nav-count{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--ar-accent);color:var(--ar-white);font-size:12px;font-weight:700;line-height:1}.inline-form{display:inline-block;margin-left:8px}
.outbox-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px}