@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap");
:root { font-family: "Noto Sans SC", system-ui, sans-serif; color: #172522; background: #f3f0e7; font-synthesis: none; --ink: #142f2c; --mint: #b9dacd; --orange: #ef704b; --paper: #fffdf8; --line: #dedbd0; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.center { min-height: 100vh; display: grid; place-content: center; gap: 14px; color: #55645f; }
.spinner { justify-self: center; width: 28px; height: 28px; border: 3px solid #d8ded9; border-top-color: var(--orange); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; padding: 4vw; background: radial-gradient(circle at 12% 20%, #31594f, var(--ink) 40%, #0e2321 75%); }
.login-copy { padding: 7vh 8vw 7vh 4vw; color: white; align-self: center; }
.login-copy p { text-transform: uppercase; letter-spacing: .14em; color: #bdd8d0; }
.login-copy h1 { font-size: clamp(2.5rem, 5vw, 5.7rem); line-height: 1.08; max-width: 820px; margin: 34px 0; letter-spacing: -.04em; }
.login-copy > span { color: #bdd0ca; font-size: 1.08rem; }
.brand-mark { width: 58px; height: 58px; display: grid; place-content: center; color: var(--ink); background: #f3c952; border-radius: 18px 18px 18px 5px; font-size: 1.6rem; font-weight: 700; box-shadow: 0 10px 30px #07141166; }
.brand-mark.small { width: 40px; height: 40px; border-radius: 13px 13px 13px 4px; font-size: 1.1rem; box-shadow: none; }
.login-card { align-self: center; justify-self: center; width: min(440px, 100%); padding: 42px; display: grid; gap: 22px; background: var(--paper); border-radius: 28px; box-shadow: 0 35px 80px #07141173; }
.login-card small, .page-heading small { color: var(--orange); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; }
.login-card h2 { font-size: 2rem; margin: 6px 0; }
.login-card p { margin: 0; color: #6b7671; }
.login-card label { display: grid; gap: 8px; color: #4c5b56; font-size: .9rem; }
.login-card input { border: 1px solid var(--line); border-radius: 12px; background: white; padding: 13px 14px; outline: none; }
.login-card input:focus { border-color: #4d8173; box-shadow: 0 0 0 3px #b9dacd66; }
.code-field { display: grid; grid-template-columns: 1fr auto; gap: 8px; }.code-field .quiet { white-space: nowrap; }
.primary { border: 0; border-radius: 12px; padding: 12px 18px; background: var(--orange); color: white; font-weight: 700; box-shadow: 0 8px 20px #ef704b33; }
.primary:disabled { opacity: .6; }
.error { color: #a43b2c !important; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 230px 1fr; background: #f3f0e7; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px; display: flex; flex-direction: column; color: #dfeae6; background: var(--ink); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 35px; }
.brand strong, .brand span { display: block; }.brand span { color: #91aaa2; font-size: .74rem; margin-top: 2px; }
.sidebar nav { display: grid; gap: 7px; }
.sidebar nav button { display: flex; gap: 12px; align-items: center; border: 0; color: #b8c9c4; background: transparent; padding: 11px 13px; border-radius: 11px; text-align: left; }
.sidebar nav button b { display: grid; place-content: center; width: 29px; height: 29px; border: 1px solid #56726a; border-radius: 9px; font-size: .74rem; }
.sidebar nav button.active { color: white; background: #284840; }.sidebar nav button.active b { color: var(--ink); background: #f3c952; border-color: #f3c952; }
.operator { margin-top: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 13px 6px 0; border-top: 1px solid #315149; }
.operator .avatar { width: 34px; height: 34px; display: grid; place-content: center; border-radius: 50%; color: var(--ink); background: var(--mint); font-weight: 700; }
.operator strong, .operator small { display: block; }.operator strong { font-size: .84rem; }.operator small { color: #89a59d; font-size: .65rem; }.operator button { border: 0; color: #9bb3ac; background: none; font-size: .72rem; }
.workspace { min-width: 0; }
.topbar { min-height: 76px; padding: 12px 30px; display: flex; justify-content: space-between; align-items: center; background: #fffdf8cc; border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.topbar small { display: block; color: #8a918e; font-size: .68rem; }.topbar select { border: 0; background: transparent; color: var(--ink); font-weight: 700; outline: none; }
.client-download { color: var(--orange); font-size: .76rem; font-weight: 700; text-decoration: none; }
.push-toggle { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .72rem; padding: .5rem .75rem; white-space: nowrap; }
.push-toggle.enabled { border-color: #78a887; color: #245f37; background: #eef8f0; }
.status { display: flex; align-items: center; gap: 8px; color: #52645e; font-size: .8rem; }.status i { width: 9px; height: 9px; background: #31a36f; border-radius: 50%; box-shadow: 0 0 0 4px #31a36f20; }.status i.paused { background: #db5c49; }
.mobile-page { display: none; }
.banner { margin: 14px 28px 0; padding: 10px 14px; border-radius: 10px; background: #fae3dc; }
.chat-layout { height: calc(100vh - 76px); display: grid; grid-template-columns: minmax(270px, 340px) 1fr; }
.conversation-list { overflow-y: auto; padding: 24px 14px; border-right: 1px solid var(--line); background: #f9f7f0; }
.section-title { padding: 0 12px 20px; display: flex; justify-content: space-between; align-items: end; }.section-title small { color: var(--orange); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }.section-title h2 { margin: 4px 0 0; }.section-title > span { padding: 3px 9px; border-radius: 20px; color: #446258; background: #dbe8e2; font-size: .74rem; }
.conversation-list > button { position: relative; width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 14px 12px; border: 0; border-radius: 14px; color: inherit; background: transparent; text-align: left; }.conversation-list > button.selected { background: white; box-shadow: 0 8px 25px #132e2810; }.conversation-list > button > span:nth-child(2) { min-width: 0; }.conversation-list strong, .conversation-list small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.conversation-list strong { font-size: .86rem; }.conversation-list small, .conversation-list time { color: #85908c; font-size: .7rem; margin-top: 4px; }.conversation-list em { position: absolute; right: 10px; bottom: 7px; color: var(--orange); font-size: .63rem; font-style: normal; }
.buyer-avatar { width: 38px; height: 38px; display: grid; place-content: center; color: #315a4d; background: #cfe4dc; border-radius: 50%; font-weight: 700; }
.message-panel { min-width: 0; display: flex; flex-direction: column; background: #eeebe3; }
.message-header { min-height: 78px; padding: 14px 24px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #d5d2c8; }.message-header > div:first-child { margin-right: auto; }.message-header h3, .message-header p { margin: 0; }.message-header p { color: #7d8883; font-size: .74rem; margin-top: 3px; }.mode { padding: 5px 10px; border-radius: 20px; font-size: .72rem; }.mode.ai { color: #326b58; background: #cce6dc; }.mode.human { color: #a24130; background: #f7dcd4; }.quiet { border: 1px solid #bcbdb7; border-radius: 9px; color: #495852; background: #f8f6ef; padding: 7px 10px; font-size: .75rem; }
.messages { flex: 1; overflow-y: auto; padding: 28px; display: flex; flex-direction: column; gap: 14px; }.messages article { max-width: min(70%, 600px); }.messages article > div { padding: 12px 15px; border-radius: 15px; line-height: 1.65; font-size: .9rem; box-shadow: 0 5px 20px #132e280c; }.messages article small { display: block; margin: 4px 8px; color: #929993; font-size: .65rem; }.messages article.incoming { align-self: flex-start; }.messages article.incoming > div { background: white; border-bottom-left-radius: 4px; }.messages article.outgoing { align-self: flex-end; text-align: right; }.messages article.outgoing > div { color: white; background: #315c50; border-bottom-right-radius: 4px; text-align: left; }
.composer { margin: 0 22px 22px; padding: 12px; border: 1px solid #d6d4ca; border-radius: 16px; background: white; box-shadow: 0 12px 35px #243e3714; }.composer textarea { width: 100%; min-height: 58px; resize: vertical; padding: 5px; border: 0; outline: none; }.composer > div { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }.composer span { color: #9ba19d; font-size: .66rem; }.composer-error { margin: 0 28px 8px; color: #a43b2c; font-size: .8rem; }
.empty { min-height: 190px; display: grid; place-content: center; justify-items: center; padding: 30px; color: #8b938f; text-align: center; }.empty span { font-size: 2rem; color: #b7bdb9; }.empty p { max-width: 380px; line-height: 1.7; }
.page { padding: clamp(22px, 4vw, 54px); }.page-heading { max-width: 780px; }.page-heading h1 { margin: 8px 0; font-size: clamp(2rem, 4vw, 3.8rem); letter-spacing: -.04em; }.page-heading p { color: #66736e; line-height: 1.8; }.stage-grid { margin-top: 35px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }.stage-card, .placeholder-card { padding: 24px; background: var(--paper); border: 1px solid #e2ded2; border-radius: 18px; box-shadow: 0 12px 35px #203c3510; }.stage-card { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; }.stage-card.selected { border-color: #4f8775; box-shadow: 0 0 0 2px #4f877524,0 12px 35px #203c3510; }.stage-card header, .stage-card footer, .stage-card label { display: flex; justify-content: space-between; }.stage-card header span { color: #2e6b57; font-weight: 700; }.stage-card header small { color: #949c98; }.stage-card h3 { font-size: 1.8rem; }.stage-card h3 small { color: #858d89; font-size: .85rem; font-weight: 400; }.stage-card label { margin: 15px 0 5px; color: #7a8580; font-size: .72rem; }.stage-card progress { width: 100%; height: 7px; border: 0; accent-color: var(--orange); }.stage-card progress.profit { accent-color: #2b8d67; }.stage-card footer { margin-top: 18px; padding-top: 15px; border-top: 1px solid #e8e4da; color: #78827e; font-size: .7rem; }.placeholder-card { max-width: 720px; margin-top: 34px; }.placeholder-card > span { color: var(--orange); font-size: .74rem; font-weight: 700; }.placeholder-card p { color: #6f7b76; }.inline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }.inline-form label { display: grid; gap: 5px; color: #6e7c77; font-size: .72rem; }
.bottom-nav { display: none; }
.metric-strip { margin: 28px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }.metric-strip article { padding: 18px; border-radius: 15px; background: var(--paper); border: 1px solid var(--line); }.metric-strip small,.metric-strip strong { display: block; }.metric-strip small { color: #7d8883; }.metric-strip strong { margin-top: 7px; font-size: 1.45rem; color: var(--ink); }
.data-list { margin-top: 24px; display: grid; gap: 10px; }.data-row { display: flex; gap: 18px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }.data-row > div:first-child { min-width: 0; margin-right: auto; }.data-row strong,.data-row small { display: block; }.data-row small { margin-top: 4px; color: #7e8985; }.state-stack { text-align: right; }.state-stack span { color: #2f6a58; font-weight: 700; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 16px; }.entity-card { padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); }.entity-card header,.entity-card footer { display: flex; justify-content: space-between; align-items: center; }.entity-card header span { color: #2f6a58; font-weight: 700; }.entity-card h3 { margin: 22px 0 8px; }.entity-card p { min-height: 42px; color: #73807b; }.entity-card footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid #ebe7dd; }.entity-card footer b { font-size: 1.35rem; }.entity-card footer span { color: #7b8782; font-size: .76rem; }
.inline-form { margin: 25px 0; display: grid; grid-template-columns: minmax(150px,.55fr) minmax(260px,1.45fr) auto; gap: 10px; }.inline-form input { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: white; outline: none; }.inline-form input:focus { border-color: #4d8173; }
.split-cards { margin-top: 30px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }.split-cards > div { min-width: 0; padding: 21px; border: 1px solid var(--line); border-radius: 18px; background: #faf8f2; }.split-cards h2 { margin-top: 0; }.split-cards h2 small { color: #83908b; font-size: .75rem; }.pill { padding: 5px 9px; border-radius: 20px; color: #746a42; background: #eee6bd; font-size: .72rem; font-style: normal; }.pill.active,.pill.approved,.pill.completed { color: #28644f; background: #d5e9e0; }.pill.rejected,.pill.failed,.pill.expired { color: #9c4031; background: #f4d9d2; }
.source-line { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 13px 0; border-bottom: 1px solid #e8e3d9; }.source-line:last-child { border: 0; }.source-line strong,.source-line small { display: block; }.source-line small { margin-top: 4px; overflow: hidden; color: #7d8883; text-overflow: ellipsis; white-space: nowrap; }.source-line em { color: #6d7b76; font-size: .72rem; font-style: normal; }.dot { width: 9px; height: 9px; border-radius: 50%; background: #d7a448; }.dot.good { background: #35a372; }
.profit-hero { margin-top: 30px; padding: clamp(25px,4vw,45px); color: white; background: linear-gradient(135deg,#173b35,#2f6255); border-radius: 22px; }.profit-hero small,.profit-hero strong,.profit-hero span { display: block; }.profit-hero strong { margin: 9px 0; font-size: clamp(2.6rem,6vw,5.5rem); letter-spacing: -.05em; }.profit-hero .negative { color: #ffb09c; }.profit-hero span { color: #a9c7bd; }
.approval-row { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; padding: 19px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); }.approval-row h3 { margin: 5px 0; }.approval-row small { color: #7f8b86; }.approval-row footer { display: flex; gap: 7px; }.quiet.danger { color: #a64232; border-color: #deb9b0; }
.settings-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }.settings-grid > div,.secret-card { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); }.stack-form { display: grid; gap: 10px; }.stack-form > input,.stack-form > select,.inline-form select { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: white; }.stack-form fieldset { display: flex; flex-wrap: wrap; gap: 10px 18px; border: 1px solid var(--line); border-radius: 11px; }.stack-form legend { color: #75817d; font-size: .75rem; }.secret-card { margin-top: 24px; color: #183a34; background: #e3f1eb; border-color: #a8cdbc; }.secret-card code { overflow-wrap: anywhere; }.secret-card pre { max-height: 220px; overflow: auto; padding: 14px; color: white; background: #173b35; border-radius: 12px; }

@media (max-width: 760px) {
  .client-download { display: none; }
  .login-shell { grid-template-columns: 1fr; padding: 24px 16px; }.login-copy { padding: 20px 8px 30px; }.login-copy h1 { font-size: 2.25rem; margin: 20px 0 14px; }.login-copy > span { font-size: .9rem; }.login-card { padding: 27px 22px; border-radius: 22px; }
  .app-shell { display: block; padding-bottom: calc(66px + env(safe-area-inset-bottom)); }.sidebar { display: none; }.topbar { min-height: 62px; padding: 9px 15px; position: sticky; top: 0; z-index: 4; }.mobile-page { display: block; max-width: 105px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: white; }.chat-layout { height: auto; min-height: calc(100vh - 128px); display: block; }.conversation-list { max-height: 230px; padding: 14px 9px; border-right: 0; border-bottom: 1px solid var(--line); }.section-title { padding-bottom: 10px; }.section-title h2 { font-size: 1.15rem; }.conversation-list > button { padding: 10px; }.message-panel { min-height: calc(100vh - 340px); }.message-header { min-height: 65px; padding: 10px 14px; flex-wrap: wrap; }.message-header h3 { font-size: .95rem; }.mode { order: 2; }.messages { min-height: 260px; padding: 18px 12px; }.messages article { max-width: 86%; }.composer { position: sticky; bottom: 70px; z-index: 2; margin: 0 9px 10px; }.composer .primary { padding: 10px 12px; }.bottom-nav { position: fixed; z-index: 5; bottom: 0; left: 0; right: 0; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr); background: #fffdf8ee; border-top: 1px solid var(--line); backdrop-filter: blur(14px); }.bottom-nav button { border: 0; color: #7c8984; background: transparent; font-size: .68rem; }.bottom-nav b, .bottom-nav span { display: block; }.bottom-nav b { margin: 0 auto 2px; font-size: .82rem; }.bottom-nav button.active { color: var(--orange); }.page { padding: 25px 16px; }.page-heading h1 { font-size: 2.2rem; }.status { font-size: .68rem; }.inline-form { grid-template-columns: 1fr; }.split-cards,.settings-grid { grid-template-columns: 1fr; }.data-row { align-items: flex-start; flex-wrap: wrap; }.state-stack { text-align: left; }.approval-row { grid-template-columns: 1fr auto; }.approval-row footer { grid-column: 1/-1; }.profit-hero strong { font-size: 2.8rem; }
}

.desktop-shell { min-height: 100vh; padding: 38px clamp(22px,4vw,64px); background: #ede9df; }
.desktop-hero { display: flex; align-items: end; justify-content: space-between; gap: 25px; padding: 32px; color: white; background: linear-gradient(130deg,#122e2a,#315c50); border-radius: 24px; }
.desktop-hero small { color: #f1c858; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; }.desktop-hero h1 { margin: 8px 0; font-size: clamp(2.2rem,4vw,4.5rem); letter-spacing: -.05em; }.desktop-hero p { max-width: 750px; margin: 0; color: #b9cec7; }
.desktop-health { min-width: 220px; padding: 13px 16px; border: 1px solid #ffffff2c; border-radius: 13px; background: #ffffff0d; }.desktop-health i { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #5ed598; }.desktop-health strong { display: block; margin: 5px 0 0 18px; }
.desktop-controls { margin: 20px 0; display: grid; grid-template-columns: minmax(300px,.8fr) minmax(430px,1.2fr); gap: 14px; }.desktop-controls label { display: grid; gap: 6px; color: #64706c; font-size: .75rem; }.desktop-controls form { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-self: end; }.desktop-controls input,.slot input { min-width: 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); outline: none; }
.desktop-notice { position: fixed; z-index: 9; top: 18px; left: 50%; transform: translateX(-50%); padding: 9px 16px; color: white; background: #28594c; border-radius: 20px; box-shadow: 0 10px 35px #142d2670; }
.instance-grid { display: grid; gap: 20px; }.instance-card { padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); box-shadow: 0 14px 40px #182d2511; }.instance-card > header,.instance-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.instance-card > header small { color: var(--orange); text-transform: uppercase; font-weight: 700; }.instance-card h2 { margin: 3px 0 0; }.instance-card > header > span { padding: 6px 11px; border-radius: 20px; font-size: .75rem; }.instance-card .running { color: #25634d; background: #d5eae0; }.instance-card .stopped { color: #7d7771; background: #e9e5dc; }
.instance-card .attention { color: #9a3e27; background: #f8ddd4; }
.instance-identity { margin: 16px 0; display: flex; align-items: center; gap: 9px; }.instance-identity code { overflow: hidden; color: #64726c; text-overflow: ellipsis; }.instance-identity button { border: 0; color: #356b5c; background: transparent; white-space: nowrap; }
.slot-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin: 18px 0; }.slot { min-width: 0; padding: 14px; border: 1px solid #dcd8cd; border-radius: 15px; background: #f6f3eb; }.slot.configured { border-color: #9dc9b8; background: #edf7f2; }.slot > header,.slot > footer,.slot > div { display: flex; gap: 7px; }.slot > header { justify-content: space-between; margin-bottom: 12px; }.slot > header span { color: #7a8782; font-size: .62rem; }.slot label { min-width: 0; flex: 1; display: grid; gap: 4px; color: #697670; font-size: .65rem; }.slot input { width: 100%; padding: 8px; font-size: .72rem; }.slot > footer { margin-top: 10px; }.slot > footer button { flex: 1; padding: 7px; font-size: .68rem; }
.slot.attention { border-color: #e89b88; background: #fff1ec; }.slot.attention > header span,.slot.attention > small { color: #a64028; }
.desktop-empty { padding: 70px; text-align: center; color: #74807b; border: 1px dashed #b9b6ad; border-radius: 22px; }.desktop-empty span { color: var(--orange); font-weight: 700; }.desktop-empty h2 { color: var(--ink); }
.media-form { margin: 32px 0 18px; display: grid; grid-template-columns: minmax(180px,.5fr) 110px minmax(300px,1.4fr) auto; gap: 10px; align-items: end; padding: 20px; border-radius: 17px; color: white; background: #173b35; }.media-form small { color: #f1c858; }.media-form h2 { margin: 5px 0 0; }.media-form select,.media-form textarea { min-height: 44px; padding: 10px; border: 1px solid #ffffff2b; border-radius: 10px; color: white; background: #ffffff10; }.media-form textarea { min-height: 65px; resize: vertical; }.media-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 13px; }.media-grid > article { overflow: hidden; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }.media-grid header,.media-grid footer { display: flex; align-items: center; justify-content: space-between; gap: 9px; }.media-grid img,.media-grid video { width: 100%; aspect-ratio: 1; margin-top: 12px; object-fit: cover; border-radius: 11px; background: #ddd; }.media-grid p { line-height: 1.6; }.media-grid footer { color: #7b8782; }.media-grid em { display: block; margin-top: 9px; color: #a64232; font-size: .75rem; }
.message-media img,.message-media video { display:block; max-width:min(480px,100%); max-height:420px; border-radius:12px; }.message-media audio { width:min(360px,100%); }.media-extracted { margin:8px 0 0; white-space:pre-wrap; color:#53645f; font-size:.86rem; }
.platform-search-results { display:grid; gap:8px; margin:12px 0; }
.platform-search-item { display:grid; grid-template-columns:72px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.platform-search-item>img { width:72px; height:72px; object-fit:cover; border-radius:9px; background:#f3f1eb; }.platform-search-item>div:nth-child(2) { display:grid; gap:4px; min-width:0; }.platform-search-item b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.platform-search-item span,.platform-search-item small { color:#72807b; }
.button-link { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.platform-item-detail { margin:18px 0; padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 12px 30px #173d3420; }.platform-item-detail>header,.platform-item-detail>footer { display:flex; align-items:center; justify-content:space-between; gap:14px; }.platform-item-detail>header>div { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }.platform-item-detail h3 { flex-basis:100%; margin:3px 0; }.platform-item-detail header strong { color:#ee6848; font-size:1.45rem; }.platform-item-detail del { color:#8a918e; }.platform-detail-images { display:flex; gap:8px; margin:14px 0; overflow-x:auto; scroll-snap-type:x mandatory; }.platform-detail-images img { width:min(260px,72vw); aspect-ratio:1; flex:0 0 auto; object-fit:cover; border-radius:12px; scroll-snap-align:start; }.platform-detail-metrics { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }.platform-detail-metrics span { padding:5px 9px; border-radius:999px; background:#f1eee5; color:#586560; }.platform-detail-description { white-space:pre-wrap; line-height:1.7; max-height:360px; overflow:auto; }.platform-detail-attributes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.platform-detail-attributes>div { padding:9px 11px; border-radius:9px; background:#f7f5ef; }.platform-detail-attributes dt { color:#71807a; font-size:.8rem; }.platform-detail-attributes dd { margin:3px 0 0; }.platform-item-detail>footer { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }.platform-item-detail>footer>img { width:46px; height:46px; border-radius:50%; object-fit:cover; }.platform-item-detail>footer>div { display:grid; gap:3px; flex:1; }.platform-item-detail>footer span { color:#71807a; }
@media (max-width: 700px) { .platform-search-item { grid-template-columns:58px minmax(0,1fr); }.platform-search-item>img { width:58px; height:58px; }.platform-search-item>.inline-actions { grid-column:1/-1; }.platform-detail-attributes { grid-template-columns:1fr; }.platform-item-detail>footer { align-items:flex-start; flex-wrap:wrap; } }
@media (max-width: 1200px) { .slot-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 900px) { .media-form { grid-template-columns: 1fr; } }
/* Product workflow: keep image selection and long command IDs usable at 360px. */
.listing-media-picker { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px; border:1px solid #d8d6cc; border-radius:12px; min-width:0; padding:12px; }
.listing-media-picker label { display:flex; flex-direction:column; gap:6px; min-width:0; cursor:pointer; }
.listing-media-picker img { width:100%; height:100px; object-fit:cover; border-radius:8px; }
.listing-media-picker input { width:20px; height:20px; }
.listing-media-picker span { overflow-wrap:anywhere; font-size:12px; }
.entity-card .banner { overflow-wrap:anywhere; }
.entity-card .banner small { display:block; margin-top:8px; }
.entity-card .inline-actions { flex-wrap:wrap; }
.entity-card .stack-form { min-width:0; }