:root{ --bg:#F7F5F2; --surface:#FFFFFF; --surface-2:#F6F1EA; --surface-3:#EFE8DD; --border:#E8E1D5; --border-strong:#D9CFBD; --ink:#241C12; --ink-dim:#7A6E5C; --ink-faint:#A79C87; --accent:#F2760C; --accent-ink:#FFFFFF; --accent-soft:#FDEEDF; --accent-strong:#D9640A; --pos:#1C7A4E; --pos-soft:#E4F5EB; --neg:#C0392B; --neg-soft:#FBEAE7; --warn:#9A6B12; --warn-soft:#FBF1DD; --radius:16px; --radius-sm:10px; --shadow:0 1px 2px rgba(36,28,18,.04), 0 8px 20px -12px rgba(36,28,18,.12); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#171310; --surface:#211B15; --surface-2:#2A231B; --surface-3:#342C21; --border:#3A3225; --border-strong:#4A402F; --ink:#F5EFE4; --ink-dim:#B8AA93; --ink-faint:#8A7B63; --accent:#FF9640; --accent-ink:#221200; --accent-soft:#3A2A16; --accent-strong:#FFAD66; --pos:#4FD79A; --pos-soft:#173229; --neg:#FF8A7A; --neg-soft:#3A1E1E; --warn:#E7B454; --warn-soft:#332A14; --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 20px -12px rgba(0,0,0,.5); } } /* Manual override via the theme toggle (persisted in localStorage as data-theme on ) */ :root[data-theme="dark"]{ --bg:#171310; --surface:#211B15; --surface-2:#2A231B; --surface-3:#342C21; --border:#3A3225; --border-strong:#4A402F; --ink:#F5EFE4; --ink-dim:#B8AA93; --ink-faint:#8A7B63; --accent:#FF9640; --accent-ink:#221200; --accent-soft:#3A2A16; --accent-strong:#FFAD66; --pos:#4FD79A; --pos-soft:#173229; --neg:#FF8A7A; --neg-soft:#3A1E1E; --warn:#E7B454; --warn-soft:#332A14; --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 20px -12px rgba(0,0,0,.5); } :root[data-theme="light"]{ --bg:#F7F5F2; --surface:#FFFFFF; --surface-2:#F6F1EA; --surface-3:#EFE8DD; --border:#E8E1D5; --border-strong:#D9CFBD; --ink:#241C12; --ink-dim:#7A6E5C; --ink-faint:#A79C87; --accent:#F2760C; --accent-ink:#FFFFFF; --accent-soft:#FDEEDF; --accent-strong:#D9640A; --pos:#1C7A4E; --pos-soft:#E4F5EB; --neg:#C0392B; --neg-soft:#FBEAE7; --warn:#9A6B12; --warn-soft:#FBF1DD; --shadow:0 1px 2px rgba(36,28,18,.04), 0 8px 20px -12px rgba(36,28,18,.12); } *{ box-sizing:border-box; } body{ margin:0; background:var(--bg); color:var(--ink); font:500 14.5px/1.5 "Manrope",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; } h1,h2,h3{ margin:0; text-wrap:balance; letter-spacing:-.02em; font-family:"Manrope",sans-serif; } h1{ font-size:24px; font-weight:800; } h2{ font-size:15.5px; font-weight:700; } .brand{ font-family:"Manrope",sans-serif; font-weight:800; } button{ font:inherit; } img{ max-width:100%; } .hidden{ display:none !important; } select, .btn, .input, textarea{ border:1.5px solid var(--border-strong); background:var(--surface); color:var(--ink); border-radius:var(--radius-sm); padding:9px 12px; font-size:13.5px; transition:border-color .12s ease, box-shadow .12s ease; } .input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .input, textarea{ width:100%; font-family:inherit; } textarea{ resize:vertical; min-height:64px; } .btn{ cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-weight:700; white-space:nowrap; border-radius:999px; padding:9px 16px; } .btn:hover{ border-color:var(--ink-faint); } .btn:disabled{ opacity:.5; cursor:not-allowed; } .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow); } .btn-primary:hover{ background:var(--accent-strong); border-color:var(--accent-strong); } .btn-ghost{ background:transparent; border-color:transparent; } .btn-ghost:hover{ background:var(--surface-2); } .btn-danger{ color:var(--neg); } .btn-sm{ padding:5px 11px; font-size:12px; } .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); } .field{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; } .field label{ font-size:11.5px; font-weight:700; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.03em; } .hint{ font-size:11px; color:var(--ink-faint); } .row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; } @media (max-width:760px){ .grid2, .grid3{ grid-template-columns:1fr; } } .notice{ font-size:12.5px; padding:9px 12px; border-radius:var(--radius-sm); margin-top:9px; font-weight:600; } .notice.warn{ background:var(--warn-soft); color:var(--warn); } .notice.neg{ background:var(--neg-soft); color:var(--neg); } .notice.pos{ background:var(--pos-soft); color:var(--pos); } .notice.dim{ background:var(--surface-3); color:var(--ink-dim); font-weight:500; } /* app shell */ #loginScreen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:radial-gradient(circle at 50% -10%, var(--accent-soft), var(--bg) 60%); } .login-card{ width:100%; max-width:360px; padding:26px; } .brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:18px; margin-bottom:18px; letter-spacing:-.01em; } .brand .dot{ width:11px; height:11px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); } #app{ display:flex; flex-direction:column; min-height:100vh; } .topbar{ display:flex; align-items:center; gap:12px; padding:12px 20px; background:var(--surface); border-bottom:1px solid var(--border); flex-wrap:wrap; } .topbar .brand{ margin:0 auto 0 0; } .shell{ display:flex; flex:1; min-height:0; } .rail{ flex:none; width:190px; padding:16px 10px; display:flex; flex-direction:column; gap:3px; border-right:1px solid var(--border); background:var(--surface); } .rail button{ display:block; width:100%; text-align:left; padding:9px 12px; border-radius:var(--radius-sm); border:1px solid transparent; background:none; color:var(--ink-dim); cursor:pointer; font-size:13.5px; font-weight:600; } .rail button:hover{ background:var(--surface-2); color:var(--ink); } .rail button.active{ background:var(--accent-soft); color:var(--accent-strong); font-weight:700; } .main{ flex:1; min-width:0; overflow-y:auto; padding:26px 26px 60px; } .view{ max-width:840px; margin:0 auto; display:flex; flex-direction:column; gap:16px; } .view.hidden{ display:none; } .page-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:2px; } .page-sub{ color:var(--ink-dim); font-size:12.5px; margin-top:3px; } @media (max-width:760px){ .rail{ display:none; } .shell{ flex-direction:column; } .main{ padding:18px 16px 50px; } } .list{ display:flex; flex-direction:column; gap:9px; } .item{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px 14px; background:var(--surface); box-shadow:var(--shadow); } .item-head{ display:flex; justify-content:space-between; gap:10px; } .item-title{ font-weight:700; font-size:13.5px; } .item-meta{ font-size:11px; color:var(--ink-faint); margin-top:2px; } .item-body{ margin-top:7px; font-size:12.5px; color:var(--ink-dim); white-space:pre-wrap; } .tag-chip{ font-size:11px; background:var(--surface-3); border:1px solid var(--border); border-radius:999px; padding:3px 9px; margin:2px 4px 0 0; display:inline-block; font-weight:600; } .chip{ font-size:12px; font-weight:700; padding:6px 13px; border-radius:999px; border:1.5px solid var(--border-strong); background:var(--surface); color:var(--ink-dim); cursor:pointer; } .chip:hover{ border-color:var(--ink-faint); color:var(--ink); } .chip.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } .chip.chip-banned{ border-color:var(--neg); color:var(--neg); background:var(--neg-soft); } .chip.chip-banned.active{ background:var(--neg); border-color:var(--neg); color:#fff; } .group-head{ font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin:14px 0 2px; } .group-head:first-child{ margin-top:0; } .store-row{ display:flex; align-items:center; gap:10px; padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); cursor:pointer; box-shadow:var(--shadow); } .store-row:hover{ border-color:var(--accent); } .store-row.banned{ background:var(--neg-soft); border-color:var(--neg-soft); } .store-row .st-name{ font-weight:700; flex:1; } .store-row .st-niche{ font-size:12px; color:var(--ink-faint); } .badge-banned{ font-size:10px; font-weight:800; text-transform:uppercase; color:var(--neg); border:1px solid var(--neg); border-radius:999px; padding:2px 8px; } .tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .tile{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); } .tile-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-dim); font-weight:700; } .tile-num{ font-size:28px; font-weight:800; margin-top:4px; color:var(--accent-strong); font-family:"Manrope",sans-serif; } @media (max-width:600px){ .tiles{ grid-template-columns:1fr; } } .dropzone{ border:2px dashed var(--border-strong); border-radius:var(--radius-sm); padding:18px; text-align:center; cursor:pointer; background:var(--surface-2); } .dropzone.drag{ border-color:var(--accent); background:var(--accent-soft); } .dropzone img{ max-height:120px; border-radius:8px; margin-top:8px; } .thumbs{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .thumbs:empty{ display:none; } .thumb{ position:relative; margin-top:10px; } .thumb img{ width:84px; height:84px; object-fit:cover; margin:0; border:1px solid var(--border); } .thumb button{ position:absolute; top:-7px; right:-7px; width:22px; height:22px; border-radius:50%; border:none; background:var(--ink); color:var(--bg); cursor:pointer; font-size:13px; line-height:22px; padding:0; } .draft-head{ display:flex; gap:12px; align-items:center; margin-bottom:10px; } .draft-head img{ width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--border); } .spinner{ width:14px; height:14px; border-radius:50%; border:2px solid var(--border-strong); border-top-color:var(--accent); animation:spin .7s linear infinite; display:inline-block; } @keyframes spin{ to{ transform:rotate(360deg); } } .thinking{ display:flex; align-items:center; gap:8px; color:var(--ink-dim); } table{ width:100%; border-collapse:collapse; font-size:12.5px; } th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); padding:7px 9px; border-bottom:1px solid var(--border); font-weight:700; } td{ padding:8px 9px; border-bottom:1px solid var(--border); } .modal-back{ position:fixed; inset:0; background:rgba(36,28,18,.45); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px; } .modal{ background:var(--surface); border-radius:var(--radius); width:100%; max-width:480px; max-height:88vh; overflow-y:auto; padding:20px; border:1px solid var(--border); box-shadow:0 20px 60px -20px rgba(36,28,18,.35); } .modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; } .name-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; margin-top:12px; } .name-grid:empty{ display:none; } .name-item{ display:flex; align-items:center; gap:4px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 6px 6px 12px; background:var(--surface-2); } .name-item .nm{ flex:1; font-weight:700; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; } .name-item .len{ font-size:10.5px; color:var(--ink-faint); margin-right:2px; } .name-item a{ font-size:11.5px; font-weight:700; color:var(--ink-dim); text-decoration:none; padding:4px 6px; border-radius:6px; } .name-item a:hover, .name-item button:hover{ background:var(--surface-3); color:var(--ink); } .name-item button{ border:none; background:none; cursor:pointer; font:inherit; font-size:11.5px; font-weight:700; color:var(--accent-strong); padding:4px 6px; border-radius:6px; } /* ---- profit ---- */ .table-scroll{ overflow-x:auto; } .pf-table th.num, .pf-table td.num{ text-align:right; } .pf-table td{ white-space:nowrap; } .pf-table input{ width:110px; text-align:right; padding:6px 8px; } .pf-table input.orders{ width:72px; } .pf-table tfoot td{ font-weight:800; border-bottom:none; border-top:1.5px solid var(--border-strong); } .pf-table .neg{ color:var(--neg); } .pf-table .pos{ color:var(--pos); } .pf-table tr.clickable{ cursor:pointer; } .pf-table tr.clickable:hover td{ background:var(--surface-2); } .pf-table tr.current td{ background:var(--accent-soft); } .clip-btn{ border:none; background:none; cursor:pointer; font-size:15px; padding:2px 4px; border-radius:6px; } .clip-btn:hover{ background:var(--surface-3); } .sx-files{ max-height:300px; overflow:auto; margin-top:10px; } .sx-files td{ font-size:12px; } .modal.wide{ max-width:760px; } /* ---- chart (series colors validated for light + dark) ---- */ :root{ --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --series-4:#eda100; --series-5:#e87ba4; --series-6:#008300; --series-7:#4a3aa7; --series-8:#e34948; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500; --series-5:#d55181; --series-6:#008300; --series-7:#9085e9; --series-8:#e66767; } } :root[data-theme="dark"]{ --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-4:#c98500; --series-5:#d55181; --series-6:#008300; --series-7:#9085e9; --series-8:#e66767; } .chart-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:12px 0 4px; font-size:12px; color:var(--ink-dim); font-weight:600; } .chart-legend span{ display:inline-flex; align-items:center; gap:6px; } .chart-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; } .chart-wrap{ position:relative; } .chart-wrap svg{ display:block; width:100%; height:auto; overflow:visible; } .chart-wrap .axis{ font-size:11px; fill:var(--ink-faint); } .chart-wrap .total{ font-size:11px; font-weight:700; fill:var(--ink-dim); } .chart-wrap .grid{ stroke:var(--border); stroke-width:1; } .chart-wrap .zero{ stroke:var(--border-strong); stroke-width:1; } .chart-wrap .hit{ fill:transparent; cursor:default; } .chart-wrap .hit:hover{ fill:var(--surface-2); } .chart-tip{ position:absolute; pointer-events:none; background:var(--surface); border:1px solid var(--border-strong); border-radius:10px; box-shadow:var(--shadow); padding:8px 10px; font-size:12px; min-width:170px; z-index:5; } .chart-tip .r{ display:flex; justify-content:space-between; gap:14px; } .chart-tip .r i{ width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:6px; } .chart-tip .t{ font-weight:800; border-top:1px solid var(--border); margin-top:4px; padding-top:4px; } .login-box .row .input{ flex:1; } /* ---- pricing ---- */ .pr-table input{ width:84px; text-align:right; padding:6px 8px; } .pr-table input.lbl{ width:180px; text-align:left; } .pr-table td{ white-space:nowrap; vertical-align:middle; } .pr-table .sugg{ font-weight:800; color:var(--accent-strong); } .pr-table .muted{ color:var(--ink-faint); font-size:11px; display:block; } .pr-settings{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; margin-bottom:12px; } .pr-settings .field{ margin:0; } .pr-settings input[type=number]{ width:90px; } .view[data-view="pricing"], .view[data-view="profit"]{ max-width:1060px; } .pr-table input{ width:74px; } /* ---- image folders ---- */ .img-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; } .img-card img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; display:block; border:1px solid var(--border); background:var(--surface-2); } .img-card .row{ margin-top:4px; gap:2px; } .img-card select{ padding:4px 6px; font-size:11.5px; max-width:100%; } .folder-card{ border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2); cursor:pointer; overflow:hidden; text-align:left; padding:0; font:inherit; color:inherit; } .folder-card:hover{ border-color:var(--accent); } .folder-card .cover{ display:grid; grid-template-columns:1fr 1fr; gap:2px; aspect-ratio:1; background:var(--surface-3); } .folder-card .cover img{ width:100%; height:100%; object-fit:cover; display:block; } .folder-card .cover .one{ grid-column:1 / span 2; grid-row:1 / span 2; } .folder-card .meta{ padding:8px 10px; } .folder-card .meta b{ display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ---- worker permissions ---- */ .perm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:4px 16px; } .perm-grid label{ display:flex; gap:8px; align-items:center; font-size:13px; font-weight:600; color:var(--ink); text-transform:none; letter-spacing:0; cursor:pointer; padding:3px 0; } .perm-grid input{ width:16px; height:16px; accent-color:var(--accent); }