:root { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; color: #202638; background: #f7f8fb; }
* { box-sizing: border-box; }
body { margin: 0; }
button,input,textarea { font: inherit; }
button { cursor: pointer; border: 0; }
a { color: inherit; }
.hidden { display: none !important; }
[hidden] { display:none !important; }
#toast { position: fixed; top: 20px; right: 20px; z-index: 20; max-width: min(420px, calc(100vw - 40px)); padding: 13px 17px; border-radius: 12px; background: #1e2b42; color: #fff; box-shadow: 0 10px 35px #18244533; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: .2s; }
#toast.visible { opacity: 1; transform: translateY(0); }
#toast.error { background: #b93c4a; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 49%) 1fr; background: #fff; }
.login-card { width: min(430px, calc(100% - 60px)); margin: auto; padding: 60px 0; }
.logo,.brand-mark { display: grid; place-items: center; background: #2e66cf; color: #fff; border-radius: 15px; font-weight: 900; }
.logo { width: 54px; height: 54px; font-size: 34px; margin-bottom: 42px; }
.eyebrow,.topbar-kicker { font-size: 11px; letter-spacing: .2em; font-weight: 800; color: #2e66cf; }
.login-card h1 { font-size: clamp(30px, 3vw, 47px); line-height: 1.25; margin: 13px 0; letter-spacing: -.04em; }
.login-card p,.intro-card p,.helper { color: #778194; line-height: 1.65; }
.login-card form { margin-top: 40px; display: grid; gap: 20px; }
label { display: grid; gap: 9px; font-size: 13px; font-weight: 700; color: #3a4557; }
input,textarea { width: 100%; border: 1px solid #dfe4ed; background: #fff; padding: 13px 15px; border-radius: 11px; outline: none; color: #1f2b3d; }
input:focus,textarea:focus { border-color: #2e66cf; box-shadow: 0 0 0 3px #2e66cf22; }
textarea { resize: vertical; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.primary,.secondary { padding: 13px 20px; border-radius: 11px; font-weight: 800; }
.primary { background: #2e66cf; color: #fff; }
.primary:hover { background: #2058bf; }
.primary:disabled { opacity: .55; cursor: wait; }
.secondary { background: #e8eefb; color: #2e66cf; }
.danger-link { background: transparent; color: #bb4050; padding: 10px 0; margin-top: 13px; font-size: 12px; font-weight: 700; }
.login-card .primary { display: flex; justify-content: space-between; margin-top: 12px; }
.login-art { background: #2e66cf; position: relative; overflow: hidden; display: grid; place-items: center; }
.login-art::before,.login-art::after { content: ''; position: absolute; border: 1px solid #ffffff35; border-radius: 50%; width: 560px; height: 560px; }
.login-art::after { width: 850px; height: 850px; }
.face { position: absolute; background: #fff; border-radius: 35px; box-shadow: 0 25px 50px #173d9c55; display: grid; place-items: center; }
.face-one { width: 220px; height: 220px; font-size: 130px; transform: rotate(-13deg) translate(-80px,-20px); }
.face-two { width: 155px; height: 155px; font-size: 85px; transform: rotate(14deg) translate(145px,105px); }
.art-copy { position: absolute; bottom: 48px; color: #dceaff; letter-spacing: .2em; font-size: 14px; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 238px 1fr; }
.sidebar { background: #fff; border-right: 1px solid #e9edf3; display: flex; flex-direction: column; min-height: 100vh; padding: 25px 16px; }
.brand { display: flex; gap: 10px; align-items: center; padding: 4px 10px 34px; font-size: 18px; font-weight: 900; }
.brand-mark { width: 38px; height: 38px; font-size: 25px; border-radius: 10px; }
.brand small { display: block; font-size: 9px; color: #9ba6b7; letter-spacing: .12em; margin-top: 3px; }
#main-nav { display: grid; gap: 5px; }
#main-nav button { text-align: left; width: 100%; padding: 13px 15px; background: transparent; border-radius: 10px; color: #667187; font-size: 14px; font-weight: 700; }
#main-nav button.active { background: #e9effd; color: #2e66cf; }
.sidebar-footer { margin-top: auto; padding: 15px 10px 0; border-top: 1px solid #edf0f4; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: #697588; }
.sidebar-footer button { background: none; color: #2e66cf; font-size: 12px; white-space: nowrap; }
.main-column { min-width: 0; }
.topbar { height: 112px; display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid #e9edf3; padding: 0 39px; }
.topbar h2 { margin: 7px 0 0; font-size: 24px; }
.topbar-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.list-read-state { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; background:#edf4ff; color:#35609b; border-radius:10px; font-size:13px; overflow-wrap:anywhere; }
.list-read-state[hidden] { display:none; }
.list-read-state.error { background:#fff3ef; color:#9b3d28; }
.list-read-state button { flex-shrink:0; }
@media (max-width:720px) { .topbar-actions { gap:6px; max-width:48%; } .topbar-actions button { padding:6px 10px; font-size:12px; } .topbar-actions .badge { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }
.badge { border-radius: 20px; background: #eaf1fd; color: #2e66cf; padding: 8px 14px; font-size: 12px; font-weight: 700; }
.content { max-width: 1400px; margin: 0 auto; padding: 33px 39px 70px; }
.intro-card { display: flex; align-items: center; justify-content: space-between; gap: 25px; background: #e9f1ff; border-radius: 18px; padding: 28px 33px; margin-bottom: 24px; }
.intro-card h3 { margin: 9px 0 4px; font-size: 26px; }
.intro-card p { margin: 0; font-size: 13px; }
.intro-emoji { font-size: 72px; }
.two-columns { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr); gap: 22px; align-items: start; }
.panel { background: #fff; border: 1px solid #e8ecf3; box-shadow: 0 7px 24px #283b6210; border-radius: 18px; padding: 25px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid #edf0f4; margin-bottom: 24px; padding-bottom: 18px; }
.panel-heading h3 { margin: 0; font-size: 18px; }
.panel-heading span { color: #9ba5b4; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.form-stack { display: grid; gap: 18px; }
.tenant-list,.release-list { display: grid; gap: 10px; }
.tenant-item,.release-item { border: 1px solid #edf0f4; border-radius: 12px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
#tenant-list .tenant-item { flex-wrap: wrap; gap: 8px; }
#tenant-list .tenant-item > div { flex: 1 1 100%; }
#tenant-list .tenant-action { display: inline-flex; align-items: center; text-decoration: none; }
.tenant-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:22px; }
.summary-card { display:grid; gap:9px; padding:18px 20px; border:1px solid #e8ecf3; background:#fff; border-radius:15px; }
.summary-card span { color:#778194; font-size:12px; }
.summary-card strong { color:#253752; font-size:23px; }
#tenant-list .tenant-item { position:relative; align-items:center; }
#tenant-list .tenant-item > div { flex:1 1 100%; }
#tenant-list .tenant-more { margin-left:auto; position:relative; }
#tenant-list .tenant-more summary { cursor:pointer; list-style:none; padding:8px 12px; border:1px solid #d5dfef; border-radius:9px; color:#365784; font-size:12px; }
#tenant-list .tenant-more summary::-webkit-details-marker { display:none; }
#tenant-list .tenant-more[open] { z-index:4; }
#tenant-list .tenant-more[open] > :not(summary) { display:block; width:100%; padding:9px 11px; border-radius:6px; background:#fff; color:#365784; text-align:left; font-size:12px; }
#tenant-list .tenant-more[open] > :not(summary):hover { background:#edf3ff; }
#tenant-list .tenant-more[open] { min-width:160px; }
.home-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-bottom:20px; }
.home-step { display:flex; flex-direction:column; gap:10px; padding:20px; border:1px solid #e5eaf3; background:#fff; border-radius:16px; }
.home-step strong { font-size:16px; }
.home-step p { color:#778194; font-size:13px; line-height:1.5; flex:1; }
.home-step-badge { width:max-content; padding:5px 9px; background:#fff3df; color:#95651d; border-radius:20px; font-size:11px; }
.home-step-badge.done { background:#e9f8ef; color:#168450; }
.home-step-badge.optional,.home-step-badge.external { background:#eaf0ff; color:#315eb5; }
.list-pagination { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:18px; font-size:13px; color:#718095; }
.list-pagination button { padding:8px 12px; }
@media (max-width:720px) { .tenant-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.tenant-item strong,.release-item strong { display: block; font-size: 14px; margin-bottom: 4px; }
.tenant-item small,.release-item small { color: #9ba5b4; font-size: 11px; }
.tenant-item em,.release-item em { font-style: normal; color: #2e66cf; background: #e9effd; border-radius: 20px; padding: 5px 9px; font-size: 11px; white-space: nowrap; }
.design-layout { display: grid; grid-template-columns: minmax(350px, 1.1fr) minmax(330px, .9fr); gap: 22px; align-items: start; }
.color-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
input[type=color] { width: 100%; height: 47px; padding: 4px; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.checkboxes { display: flex; flex-wrap: wrap; gap: 8px; }
.checkboxes label { display: flex; align-items: center; gap: 5px; background: #f5f7fb; border-radius: 20px; padding: 9px 13px; font-size: 12px; }
.checkboxes input { width: auto; }
.button-row { display: flex; gap: 10px; margin-top: 5px; }
.preview-section { background: #fff; border: 1px solid #e8ecf3; border-radius: 18px; padding: 23px; }
.preview-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 17px; font-weight: 800; margin-bottom: 20px; }
.preview-heading small { color: #a2aab6; font-size: 10px; font-weight: 400; }
.phone { width: 275px; margin: auto; border: 8px solid #293346; border-radius: 33px; overflow: hidden; box-shadow: 0 16px 35px #1b315326; }
.phone-head { background: #2e66cf; color: #fff; padding: 20px 11px 0; }
.phone-status { display: block; font-size: 11px; margin-bottom: 27px; }
.phone-head strong { font-size: 15px; }
.phone-square { width: 170px; height: 170px; margin: 23px auto; border: 6px solid #b2c6e9; background: #fff; color: #758093; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 12px; line-height: 1.7; }
.phone-tabs { white-space: nowrap; font-size: 9px; padding-bottom: 12px; text-align: center; }
.phone-body { background: #f5f6fb; min-height: 215px; padding: 12px 7px; }
.phone-categories { display: flex; gap: 6px; overflow: hidden; white-space: nowrap; font-size: 10px; background: #e9ebf2; border-radius: 15px; padding: 6px; }
.phone-categories span:first-child { background: white; border-radius: 14px; }
.phone-categories span { padding: 3px 7px; }
.phone-grid { display: flex; gap: 6px; margin-top: 13px; }
.phone-grid span { width: 55px; height: 55px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; font-size: 27px; }
.phone-grid small { font-size: 9px; }
.bottom-nav-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.phone-bottom-nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); background:#fff; border-top:1px solid #e7ebf3; padding:9px 2px; text-align:center; gap:2px; }
.phone-bottom-nav span { min-width:0; font-size:9px; color:#728096; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.phone-bottom-nav span:first-child { color:#2e66cf; font-weight:700; }
.release-steps { display: grid; gap: 13px; margin-bottom: 25px; }
.release-steps div { display: flex; align-items: center; gap: 10px; color: #566377; font-size: 13px; }
.release-steps b { width: 24px; height: 24px; border-radius: 50%; background: #e9effd; color: #2e66cf; display: grid; place-items: center; }
.upload-form { display: flex; align-items: end; gap: 10px; }
.upload-form label { flex: 1; }
.upload-form button { white-space: nowrap; }
.platform-links { margin-top: 22px; padding: 15px; background: #f5f7fb; border-radius: 11px; font-size: 13px; font-weight: 700; color: #2e66cf; }
.helper { font-size: 12px; }
.release-panel { margin-top: 22px; }
.narrow { max-width: 520px; }
@media (max-width: 1000px) { .two-columns,.design-layout { grid-template-columns: 1fr; } .preview-section { max-width: 450px; } }
@media (max-width: 720px) { .login-shell { grid-template-columns: 1fr; } .login-art { display: none; } .shell { display: block; } .sidebar { min-height: auto; padding: 15px; } .brand { padding-bottom: 15px; } #main-nav { display: flex; overflow-x: auto; } #main-nav button { width: auto; white-space: nowrap; } .sidebar-footer { margin-top: 12px; } .topbar { height: 90px; padding: 0 20px; } .content { padding: 20px 15px 55px; } .intro-card { padding: 20px; } .intro-emoji { font-size: 45px; } .panel { padding: 18px; } }
.tenant-action { border: 1px solid #d7dfec; background: #fff; color: #36578e; border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.catalog-list { display: grid; grid-template-columns:minmax(0,1fr); gap: 12px; max-height: 560px; overflow: auto; }
.catalog-item { display: flex; min-width:0; align-items: center; gap: 14px; padding: 10px; border: 1px solid #edf0f5; border-radius: 12px; }
.catalog-item img { width: 64px; height: 64px; object-fit: contain; background: #f7f8fb; border-radius: 8px; }
.catalog-item > div { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 0; }
.catalog-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-item small { color: #8994a4; }
.feedback-list { display: grid; gap: 12px; }
.feedback-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 16px; border: 1px solid #edf0f5; border-radius: 12px; }
.feedback-item > div { min-width: 0; }
.feedback-item p { margin: 0 0 9px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-item small { color: #8994a4; }

dialog { border:0; border-radius:20px; padding:30px; width:min(440px,90vw); box-shadow:0 20px 80px #17254440; }
dialog::backdrop { background:#17254488; }
#audit-list small { display:block; margin-top:8px; color:#78849b; }

.recommended-tool-editor { display:grid; gap:12px; padding:18px; border:1px solid #e0e6ef; border-radius:14px; margin-bottom:14px; }
.tool-enabled { display:flex !important; align-items:center; gap:8px; }
.tool-enabled input { width:auto; }

.design-save-state { margin:0; padding:12px 14px; background:#eff5ff; border-radius:10px; color:#466a9f; font-size:13px; line-height:1.6; }
.design-save-state.unsaved { background:#fff4df; color:#956522; }

.asset-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.asset-filters input { flex:1 1 140px; min-width:0; }
.asset-filters select { flex:1 1 120px; min-width:0; }
.asset-filters input,.asset-filters select { padding:10px; border:1px solid #dce4ef; border-radius:9px; background:#fff; }
.file-preview { padding:14px; border:1px solid #e0e8f2; border-radius:12px; background:repeating-conic-gradient(#f0f3f7 0% 25%,#fff 0% 50%) 0 0 / 20px 20px; }
.file-preview img { display:block; width:100%; height:180px; object-fit:contain; }
.file-preview img[hidden] { display:none; }
.file-preview p { background:#fff; margin:10px 0 0; padding:8px; border-radius:8px; }
.asset-preview-trigger { cursor:zoom-in; }
.asset-preview-trigger:focus-visible { outline:3px solid #3976d9; outline-offset:3px; }
#asset-preview-dialog { width:min(540px,calc(100vw - 40px)); }
#asset-preview-image { display:block; width:100%; max-height:65vh; object-fit:contain; background:repeating-conic-gradient(#eef1f5 0% 25%,#fff 0% 50%) 0 0 / 20px 20px; border-radius:12px; }

/* Keep account names and actions readable on small screens. */
.tenant-item > div,.release-item > div { min-width:0; flex:1; overflow-wrap:anywhere; }
.tenant-action { white-space:nowrap; flex-shrink:0; }
@media (max-width:720px) {
  .tenant-item { display:grid; grid-template-columns:1fr auto auto; gap:12px 8px; padding:14px; }
  .tenant-item > div { grid-column:1 / -1; }
  .tenant-item em { justify-self:start; }
  .release-item { flex-wrap:wrap; gap:10px; }
  .release-item > div { flex-basis:100%; }
  .feedback-item { flex-direction:column; gap:12px; }
  .feedback-item .tenant-action { align-self:flex-end; }
  .list-read-state { flex-wrap:wrap; }
  .list-read-state button { margin-left:auto; }
}
@media (max-width:720px) {
  .catalog-item strong { white-space:normal; overflow-wrap:anywhere; }
  .catalog-item img { flex-shrink:0; }
  .catalog-item { align-items:flex-start; gap:10px; }
}
.panel-heading > button { flex-shrink:0; white-space:nowrap; }
.panel-heading > h3 { min-width:0; overflow-wrap:anywhere; }

.asset-batch-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0;font-size:13px;color:#69768c}.asset-batch-bar button{padding:8px 12px;font-size:13px}.catalog-item .asset-select{width:18px;height:18px;flex:none;accent-color:#2d64d8}

.catalog-item>div.asset-row-actions{flex:none;display:flex;flex-direction:column;align-items:stretch;gap:5px;}.asset-row-actions button{font-size:12px;padding:6px 9px;}.asset-upload-state{padding:14px;background:#f3f6fd;border-radius:12px;margin-top:12px;font-size:13px;line-height:1.6;overflow-wrap:anywhere;}.asset-upload-state ul{padding-left:18px;max-height:180px;overflow:auto;}.asset-upload-state button{font-size:13px;padding:8px 12px;margin:4px;}

select { font:inherit; max-width:100%; }
.tenant-create-panel { margin-bottom:22px; }
.tenant-create-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 22px; }
.tenant-create-grid label[hidden] { display:none; }
.tenant-create-grid select,.tenant-filters select { width:100%; min-height:47px; padding:10px 13px; border:1px solid #dfe4ed; border-radius:11px; background:#fff; color:#1f2b3d; }
.field-action { display:flex; align-items:center; gap:8px; min-width:0; }
.field-action input { min-width:0; flex:1; }
.field-action button { flex:none; padding:13px 12px; }
.field-action select { flex:1; min-width:0; }
.field-action span { flex:none; color:#738199; font-size:12px; }
.tenant-create-footer { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:4px; }
.tenant-create-footer .helper { margin:0; max-width:610px; }
.tenant-create-footer button { min-width:180px; }
.tenant-filters { display:flex; gap:12px; align-items:end; margin-bottom:18px; }
.tenant-filters>input { flex:1; }
.tenant-filters label { width:180px; flex:none; }
.tenant-credentials { padding:15px; border:1px solid #dfe5ef; border-radius:10px; background:#f6f8fc; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.8; user-select:all; }
#tenant-created-dialog { width:min(520px,calc(100vw - 30px)); }
@media (max-width:720px) { .tenant-create-grid { grid-template-columns:1fr; } .tenant-create-footer,.tenant-filters { flex-direction:column; align-items:stretch; } .tenant-create-footer button,.tenant-filters label { width:100%; } }
.catalog-item img.asset-loading { background:linear-gradient(110deg,#edf1f7,#f9fbff,#edf1f7); }
.catalog-item img.asset-failed { border:1px dashed #c36a67; color:#974a47; font-size:10px; }
.panel,.preview-section,.form-stack,label,fieldset { min-width:0; }
.asset-empty { padding:22px 14px; text-align:center; background:#f7f9fd; border-radius:12px; color:#69768c; font-size:13px; line-height:1.7; }
.asset-empty p { margin:0 0 12px; }
.file-preview p,#asset-preview-title { overflow-wrap:anywhere; }
#asset-preview-image[hidden] { display:none; }
button:focus-visible { outline:3px solid #3976d9; outline-offset:2px; }
@media (max-width:480px) {
  input,textarea,select { font-size:16px; }
  .topbar { height:auto; min-height:100px; gap:10px; padding:16px; flex-wrap:wrap; }
  .topbar-actions { max-width:100%; justify-content:flex-start; }
  .intro-card { gap:12px; padding:16px; }
  .intro-card h3 { font-size:22px; }
  .intro-emoji { font-size:32px; flex-shrink:0; }
  .panel,.preview-section { padding:14px; }
  .phone { width:min(275px,100%); }
  .button-row,.upload-form { flex-wrap:wrap; }
  .upload-form label { flex-basis:100%; }
  .button-row button { flex:1 1 110px; }
  .asset-row-actions button { min-height:36px; }
  .catalog-item { flex-wrap:wrap; }
  .catalog-item>div.asset-row-actions { flex-basis:100%; flex-direction:row; justify-content:flex-end; }
  .catalog-item>div:not(.asset-row-actions) { flex:1 1 100px; }
  .preview-heading { flex-wrap:wrap; }
  dialog { padding:18px; max-height:85vh; overflow:auto; }
}