/* CUTS AI — vibrant purple + teal "mobile app" theme (3D, colorful, modern) */ /* Rounded, distinctive display font for the login (self-hosted variable font). */ @font-face { font-family: "Fredoka"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/Fredoka-Variable.woff2") format("woff2"); } :root { --font-round: "Fredoka", "Segoe UI", system-ui, sans-serif; /* ---- surfaces (light, app-like) ---- */ --bg: #eef0fb; --bg-grad-1: #eceefc; --bg-grad-2: #e6f7f4; --bg-elev: #ffffff; --bg-elev-2: #f4f5fd; --border: #e3e5f4; --border-strong: #d2d5ee; /* ---- text ---- */ --text: #1d1b35; --text-muted: #8a8aa6; /* ---- brand palette ---- */ --accent: #6c5ce7; /* roxo */ --accent-2: #8b7cff; /* roxo claro */ --accent-hover: #5a49d6; --accent-soft: rgba(108, 92, 231, 0.12); --teal: #16d6b4; /* verde-água */ --teal-2: #0fb89a; --teal-soft: rgba(22, 214, 180, 0.14); --pink: #ff7eb6; --amber: #ffb443; /* ---- gradients (the 3D / pop look) ---- */ --grad-brand: linear-gradient(135deg, #7b6cff 0%, #6c5ce7 45%, #16d6b4 130%); --grad-brand-soft: linear-gradient(135deg, #efe9ff 0%, #e4f7f3 100%); --grad-teal: linear-gradient(135deg, #2ee6c4 0%, #12bfa0 100%); --grad-purple: linear-gradient(135deg, #8b7cff 0%, #6c5ce7 100%); /* ---- semantic status ---- */ --success: #12bfa0; --success-soft: rgba(22, 214, 180, 0.16); --danger: #ff5b73; --danger-soft: rgba(255, 91, 115, 0.14); --warning: #f5a623; --warning-soft: rgba(245, 166, 35, 0.16); --info: #6c5ce7; --info-soft: rgba(108, 92, 231, 0.12); /* ---- shape & depth ---- */ --radius: 22px; --radius-sm: 14px; --radius-xs: 10px; --shadow: 0 18px 40px -18px rgba(76, 64, 160, 0.45); --shadow-sm: 0 8px 20px -10px rgba(76, 64, 160, 0.4); --shadow-pop: 0 14px 26px -10px rgba(108, 92, 231, 0.55); --shadow-teal: 0 14px 26px -10px rgba(22, 214, 180, 0.5); --shadow-inset: inset 0 2px 5px rgba(76, 64, 160, 0.08); --font: "Segoe UI", system-ui, -apple-system, sans-serif; --input-focus-bg: #ffffff; color-scheme: light; } /* ---- dark mode (toggled via ) ------------------- */ :root[data-theme="dark"] { --bg: #0d0c17; --bg-grad-1: #100e1f; --bg-grad-2: #0b1418; --bg-elev: #17162a; --bg-elev-2: #20203a; --border: #2c2b46; --border-strong: #3c3b60; --text: #f1eefb; --text-muted: #9c9ac4; --accent: #8b7cff; --accent-2: #a99bff; --accent-hover: #9a8bff; --accent-soft: rgba(139, 124, 255, 0.20); --teal: #2de0c0; --teal-2: #16d6b4; --teal-soft: rgba(45, 224, 192, 0.18); --grad-brand-soft: linear-gradient(135deg, #221f3e 0%, #15292f 100%); --success: #2de0c0; --success-soft: rgba(45, 224, 192, 0.18); --danger: #ff6b81; --danger-soft: rgba(255, 107, 129, 0.18); --warning: #ffb44d; --warning-soft: rgba(255, 180, 77, 0.18); --info: #9a8bff; --info-soft: rgba(139, 124, 255, 0.16); --shadow: 0 20px 46px -18px rgba(0, 0, 0, 0.78); --shadow-sm: 0 8px 22px -12px rgba(0, 0, 0, 0.72); --shadow-pop: 0 14px 28px -12px rgba(108, 92, 231, 0.7); --shadow-teal: 0 14px 28px -12px rgba(22, 214, 180, 0.55); --shadow-inset: inset 0 2px 5px rgba(0, 0, 0, 0.45); --input-focus-bg: #2a2950; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); background-image: radial-gradient(1100px 600px at 12% -8%, rgba(108, 92, 231, 0.18), transparent 60%), radial-gradient(1000px 560px at 100% 0%, rgba(22, 214, 180, 0.16), transparent 55%), linear-gradient(180deg, var(--bg-grad-1), var(--bg-grad-2)); background-attachment: fixed; color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.55; min-height: 100vh; } a { color: var(--accent); text-decoration: none; font-weight: 600; } a:hover { color: var(--accent-hover); text-decoration: none; } code { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; font-size: 0.85em; word-break: break-all; color: var(--accent-hover); } h1 { font-size: 1.55rem; margin: 0.4em 0; font-weight: 800; letter-spacing: -0.01em; } h2 { font-size: 1.18rem; margin: 0.4em 0 0.6em; font-weight: 750; letter-spacing: -0.01em; } .container { max-width: 1180px; margin: 0 auto; padding: 0 20px; } .muted { color: var(--text-muted); } .small { font-size: 0.82rem; } /* ---------------------------------------------------------------- topbar */ .topbar { background: rgba(255, 255, 255, 0.72); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 10px 30px -22px rgba(76, 64, 160, 0.5); position: sticky; top: 0; z-index: 50; } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 64px; } .brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.12rem; color: var(--text); letter-spacing: -0.01em; } .brand:hover { text-decoration: none; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 12px; background: var(--grad-brand); color: #fff; font-weight: 900; font-size: 1.1rem; line-height: 1; flex: 0 0 auto; box-shadow: var(--shadow-pop); } /* logo image used as the brand tile (replaces the "C" glyph) */ img.brand-mark { object-fit: cover; padding: 0; background: #000; } .brand-name { font-weight: 800; } .brand-ia { background: var(--grad-teal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; } .nav { display: flex; gap: 4px; flex-wrap: wrap; } .nav a { color: var(--text-muted); padding: 8px 15px; border-radius: 999px; font-weight: 650; font-size: 0.92rem; transition: color 0.15s, background 0.18s, box-shadow 0.18s, transform 0.08s; } .nav a:hover { color: var(--accent-hover); background: var(--accent-soft); text-decoration: none; transform: translateY(-1px); } .nav a.active { color: #fff; background: var(--grad-purple); box-shadow: var(--shadow-pop); } .footer { margin: 56px auto 28px; text-align: center; font-size: 0.82rem; } /* ---------------------------------------------------------------- cards */ .card { position: relative; background: var(--bg-elev); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; margin: 20px 0; } .empty-state { text-align: center; color: var(--text-muted); padding: 40px 20px; } /* ---------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-strong); border-radius: 999px; padding: 10px 18px; font-size: 0.9rem; font-weight: 700; cursor: pointer; text-decoration: none; box-shadow: 0 6px 14px -8px rgba(76, 64, 160, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: transform 0.08s ease, box-shadow 0.18s ease, background 0.18s ease, filter 0.18s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -10px rgba(76, 64, 160, 0.55); text-decoration: none; } .btn:active { transform: translateY(1px); box-shadow: 0 4px 10px -6px rgba(76, 64, 160, 0.5); } /* 3D gradient primary */ .btn-primary { background: var(--grad-purple); border: none; color: #fff; box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 18px 30px -10px rgba(108, 92, 231, 0.6); } .btn-primary:active { filter: brightness(0.98); } .btn-teal { background: var(--grad-teal); border: none; color: #04342c; box-shadow: var(--shadow-teal), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .btn-ghost { background: transparent; border-color: transparent; box-shadow: none; } .btn-ghost:hover { background: var(--accent-soft); box-shadow: none; color: var(--accent-hover); } .btn-danger-ghost { background: transparent; color: var(--danger); border-color: rgba(255, 91, 115, 0.4); box-shadow: none; } .btn-danger-ghost:hover { background: var(--danger-soft); border-color: var(--danger); } .btn-warn { background: linear-gradient(135deg, #ffc34d, #f5a623); border: none; color: #4a3000; box-shadow: 0 12px 22px -10px rgba(245, 166, 35, 0.6); } .btn-sm { padding: 7px 14px; font-size: 0.82rem; } .btn-lg { padding: 14px 30px; font-size: 1rem; } .btn-yt:hover { color: #ff3b3b; } .btn-ig:hover { color: #c4318a; } .btn-tt:hover { color: var(--teal-2); } /* ---------------------------------------------------------------- badges */ .badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; white-space: nowrap; letter-spacing: 0.01em; } .badge-queued { background: var(--info-soft); color: var(--info); } .badge-running { background: var(--accent-soft); color: var(--accent); } .badge-done { background: var(--success-soft); color: var(--success); } .badge-failed { background: var(--danger-soft); color: var(--danger); } .badge-canceled { background: var(--bg-elev-2); color: var(--text-muted); } .badge-acc-connected { background: var(--success-soft); color: var(--success); } .badge-acc-disconnected { background: var(--bg-elev-2); color: var(--text-muted); } .badge-acc-expired { background: var(--warning-soft); color: var(--warning); } .badge-acc-challenge { background: var(--warning-soft); color: var(--warning); } .badge-acc-pending_login { background: var(--info-soft); color: var(--info); } .badge-action { background: var(--grad-teal); color: #04342c; box-shadow: var(--shadow-teal); } /* ---------------------------------------------------------- pending actions */ .post-action-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .post-action-main { min-width: 0; } .post-action-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .post-action-clip { margin-top: 4px; } .post-action-msg { margin-top: 6px; font-size: 0.85rem; color: var(--warning); } .post-action-buttons { display: flex; gap: 8px; flex-shrink: 0; } /* ---------------------------------------------------------------- forms */ input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="file"], select, textarea { width: 100%; background: var(--bg-elev-2); color: var(--text); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px; font-size: 0.92rem; font-family: var(--font); outline: none; box-shadow: var(--shadow-inset); transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } input::placeholder, textarea::placeholder { color: var(--text-muted); } input:focus, select:focus, textarea:focus { border-color: var(--accent-2); background: var(--input-focus-bg); box-shadow: 0 0 0 4px var(--accent-soft); } input[readonly] { color: var(--text-muted); background: var(--bg-elev-2); } textarea { resize: vertical; } label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--text-muted); margin: 12px 0 6px; } .check-label { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; font-weight: 600; color: var(--text); margin: 8px 0; cursor: pointer; } .check-label input { width: auto; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 17px; height: 17px; } .radio-group { margin: 6px 0; } .field-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; } .field-row input { flex: 1; min-width: 220px; width: auto; } .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .hint { font-size: 0.78rem; color: var(--text-muted); margin: 5px 0 0; } .hint.ok { color: var(--success); } .ok { color: var(--success); } .err { color: var(--danger); } /* ---------------------------------------------------------------- hero */ .hero { text-align: center; padding: 44px 24px; background: radial-gradient(600px 200px at 50% -40%, rgba(108, 92, 231, 0.12), transparent 70%), var(--bg-elev); } .hero h1 { font-size: 1.9rem; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-form { display: flex; gap: 12px; max-width: 720px; margin: 18px auto 0; } .hero-input { flex: 1; font-size: 1rem; padding: 15px 18px; } @media (max-width: 600px) { .hero-form { flex-direction: column; } } .hero-form-wrap { max-width: 720px; margin: 18px auto 0; } .hero-form-wrap .hero-form { margin-top: 0; } .src-toggle { display: inline-flex; margin: 0 auto 16px; padding: 5px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow-inset); } .src-toggle button { padding: 9px 20px; background: none; border: none; border-radius: 999px; color: var(--text-muted); font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: color 0.15s, background 0.18s, box-shadow 0.18s; } .src-toggle button.active { background: var(--bg-elev); color: var(--accent); box-shadow: var(--shadow-sm); } .file-input-label { display: flex; align-items: center; background: var(--bg-elev-2); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; overflow: hidden; white-space: nowrap; } .file-input-label.has-file { color: var(--accent); border-style: solid; border-color: var(--accent-2); } .file-input-label input[type="file"] { display: none; } .file-input-label span { overflow: hidden; text-overflow: ellipsis; } .adv-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 14px auto 0; padding: 6px 14px; background: var(--accent-soft); border: none; border-radius: 999px; color: var(--accent); font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: background 0.15s; } .adv-toggle:hover { background: rgba(108, 92, 231, 0.2); } .adv-panel { text-align: left; margin-top: 12px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--grad-brand-soft); } .adv-panel .check-label { margin: 4px 0; } .adv-panel .check-label.is-disabled { opacity: 0.45; cursor: not-allowed; } .adv-input { width: 100%; font-size: 0.95rem; padding: 11px 14px; } .fit-zoom { margin: 4px 0 6px; padding: 10px 14px; border-left: 3px solid var(--accent-2); } .fit-range { width: 100%; accent-color: var(--accent); cursor: pointer; } [x-cloak] { display: none !important; } /* ---------------------------------------------------------------- tables */ .jobs-table { width: 100%; border-collapse: collapse; } .jobs-table th { text-align: left; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 9px 12px; border-bottom: 2px solid var(--border); } .jobs-table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } .jobs-table tbody tr { transition: background 0.15s; } .jobs-table tbody tr:hover { background: var(--accent-soft); } .jobs-table tr:last-child td { border-bottom: none; } .job-title-cell { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* On narrow screens wide tables scroll inside their card instead of pushing the whole page sideways (mobile-app feel, no horizontal page jiggle). */ @media (max-width: 720px) { .jobs-table, .pub-table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } .jobs-table thead, .pub-table thead, .jobs-table tbody, .pub-table tbody { display: table; width: 100%; min-width: 520px; } } /* ---------------------------------------------------------------- progress */ .progress-bar { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px; height: 14px; overflow: hidden; flex: 1; box-shadow: var(--shadow-inset); } .progress-bar.small { height: 8px; } .progress-bar.inline { display: inline-block; width: 110px; vertical-align: middle; margin-right: 8px; } .progress-fill { background: var(--grad-brand); height: 100%; border-radius: 999px; transition: width 0.4s ease; } .progress-top { display: flex; align-items: center; gap: 12px; } .progress-pct { font-weight: 800; font-size: 1rem; min-width: 44px; text-align: right; color: var(--accent); } .progress-message { color: var(--text-muted); margin: 10px 0 4px; min-height: 1.3em; } .steps { list-style: none; margin: 12px 0 0; padding: 0; } .step { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: var(--radius-xs); } .step .step-label { flex: 0 0 auto; } .step .progress-bar.small { max-width: 220px; } .step.done { color: var(--success); } .step.current { color: var(--accent); background: var(--accent-soft); padding: 9px 12px; } .step.pending { color: var(--text-muted); } .step-icon { width: 18px; text-align: center; } .step-icon.ok { color: var(--success); font-weight: 800; } /* spinner */ .spinner { width: 16px; height: 16px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: spin 0.8s linear infinite; flex: 0 0 auto; } .spinner.tiny { width: 11px; height: 11px; border-width: 2px; } @keyframes spin { to { transform: rotate(360deg); } } .htmx-indicator { opacity: 0; transition: opacity 0.2s; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } /* ---------------------------------------------------------------- job page */ .job-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .job-header-info h1 { margin: 0 0 4px; } .job-url { word-break: break-all; } .job-header-actions { display: flex; align-items: center; gap: 10px; } .error-box { background: var(--danger-soft); border: 1px solid rgba(255, 91, 115, 0.4); border-radius: var(--radius-sm); padding: 16px; color: var(--text); } .error-box h2 { color: var(--danger); margin-top: 0; } .error-box form { margin: 12px 0; } .warn-box { background: var(--warning-soft); border: 1px solid rgba(245, 166, 35, 0.4); border-radius: var(--radius-sm); padding: 16px; } .warn-box h2 { color: var(--warning); margin-top: 0; } .ok-box { background: var(--success-soft); border: 1px solid rgba(22, 214, 180, 0.4); color: var(--success-soft); font-weight: 600; } .ok-box, .ok-box * { color: var(--success); } .welcome-box { border-color: var(--accent-2); } .welcome-box h2 { margin-top: 0; } .error-box.inline, .warn-box.inline { margin-top: 14px; padding: 12px 14px; font-size: 0.88rem; } /* Failed-job technical log viewer (collapsible). */ .log-details { margin-top: 16px; } .log-details > summary { cursor: pointer; font-size: 0.88rem; color: var(--text-muted); user-select: none; } .log-details[open] > summary { margin-bottom: 10px; } .job-log { margin: 0; background: #16142a; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 12px 14px; max-height: 50vh; overflow: auto; font-family: "Cascadia Mono", Consolas, monospace; font-size: 0.78rem; line-height: 1.5; color: #d8d6f0; white-space: pre-wrap; word-break: break-word; box-shadow: var(--shadow-inset); } /* ---------------------------------------------------------------- clips */ .clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; margin: 18px 0; } .clip-card { margin: 0; display: flex; flex-direction: column; gap: 10px; transition: transform 0.18s, box-shadow 0.18s; } .clip-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); } .clip-video-wrap { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: #0d0b1a; } .clip-video-wrap video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: contain; background: #0d0b1a; } .viral-badge { position: absolute; top: 10px; left: 10px; padding: 5px 11px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; backdrop-filter: blur(4px); color: #fff; } .viral-badge.tier-high { background: var(--grad-teal); color: #04342c; } .viral-badge.tier-mid { background: var(--grad-purple); } .viral-badge.tier-low { background: rgba(40, 36, 70, 0.78); } .clip-info { display: flex; flex-direction: column; gap: 4px; } .clip-hook { margin: 2px 0; color: var(--text-muted); font-size: 0.9rem; } .clip-form label { margin-top: 8px; } .clip-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .alt-titles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 2px; } .chip { background: var(--accent-soft); color: var(--accent); border: 1px solid transparent; border-radius: 999px; padding: 5px 13px; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.08s; text-align: left; } .chip:hover { border-color: var(--accent-2); background: rgba(108, 92, 231, 0.2); transform: translateY(-1px); } .publish-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--border); padding-top: 12px; } /* ---------------------------------------------------------------- posts */ .post-status { display: flex; flex-direction: column; gap: 6px; } .post-status:empty { display: none; } .post-chip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 0.83rem; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 8px 12px; } .post-platform { font-weight: 800; } .chip-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-weight: 700; } .chip-status.gray { background: var(--bg-elev-2); color: var(--text-muted); } .chip-status.blue { background: var(--info-soft); color: var(--info); } .chip-status.green { background: var(--success-soft); color: var(--success); } .chip-status.orange { background: var(--warning-soft); color: var(--warning); } .chip-status.red { background: var(--danger-soft); color: var(--danger); } a.chip-status.green:hover { text-decoration: underline; } /* ---------------------------------------------------------------- accounts */ .accounts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 18px 0; } .account-card { margin: 0; display: flex; flex-direction: column; gap: 8px; transition: transform 0.18s, box-shadow 0.18s; } .account-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); } .account-head { display: flex; align-items: center; gap: 10px; } .account-icon { font-size: 1.4rem; } .account-name { font-weight: 800; font-size: 1.05rem; flex: 1; } .account-user { margin: 0; font-weight: 700; color: var(--accent); } .account-notes { margin: 0; } .account-form { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .account-actions { display: flex; gap: 8px; margin-top: 6px; } .account-pending { display: flex; align-items: center; gap: 10px; color: var(--info); font-weight: 700; margin-top: 6px; } /* ---------------------------------------------------------------- settings */ .settings-form { max-width: 760px; } .settings-section h2 { border-bottom: 2px solid var(--border); padding-bottom: 8px; } .settings-save { margin: 24px 0 40px; } /* thumbnail (capa) template editor */ .thumb-editor { display: grid; grid-template-columns: 1fr 210px; gap: 18px; margin-top: 12px; align-items: start; } .thumb-controls { min-width: 0; } .thumb-preview-pane { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 6px; } .thumb-preview-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; } .thumb-preview-frame { width: 100%; aspect-ratio: 9 / 16; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; display: flex; align-items: center; justify-content: center; } .thumb-preview-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* per-clip inline cover editor (clip card) */ .thumb-inline-editor { display: grid; grid-template-columns: 120px 1fr; gap: 12px; margin-top: 10px; padding: 10px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); align-items: start; } .thumb-inline-preview { aspect-ratio: 9 / 16; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); } .thumb-inline-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .thumb-inline-controls { min-width: 0; } .thumb-inline-controls .clip-actions { margin-top: 8px; } input[type="color"] { width: 100%; height: 40px; padding: 3px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; box-shadow: var(--shadow-inset); } @media (max-width: 640px) { .thumb-editor { grid-template-columns: 1fr; } .thumb-preview-pane { position: static; max-width: 240px; } } /* ---------------------------------------------------------------- toasts */ #toast-area { position: fixed; top: 78px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; } .toast { display: flex; align-items: center; gap: 12px; background: var(--bg-elev); border: 1px solid var(--border); border-left: 5px solid var(--accent); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 13px 16px; max-width: 380px; font-size: 0.9rem; font-weight: 600; animation: toast-in 0.25s ease; } .toast.ok { border-left-color: var(--success); } .toast.err { border-left-color: var(--danger); } .toast-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; padding: 2px; } .toast-close:hover { color: var(--text); } @keyframes toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } .toast-inline { border-radius: var(--radius-xs); padding: 9px 12px; font-size: 0.85rem; font-weight: 700; } .toast-inline.err { background: var(--danger-soft); color: var(--danger); } /* ---------------------------------------------------------------- publications */ .pub-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .pub-header-actions { display: inline-flex; align-items: center; gap: 10px; } .pub-filters { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0 4px; } .pub-filters label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted); margin: 0; } .pub-filters select { width: auto; min-width: 150px; } .pub-note { border-radius: var(--radius-xs); padding: 9px 12px; margin: 10px 0; font-size: 0.85rem; font-weight: 600; } .pub-note.ok { background: var(--success-soft); color: var(--success); } .pub-note.err { background: var(--danger-soft); color: var(--danger); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 16px 0; } .stat-card { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow-sm); } .stat-card.accent { border-color: transparent; background: var(--grad-brand-soft); box-shadow: var(--shadow-sm); } .stat-title { font-weight: 800; } .stat-metrics { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-weight: 700; font-size: 0.95rem; } .pub-table .num { text-align: right; white-space: nowrap; } .pub-clip-cell { display: flex; align-items: center; gap: 10px; max-width: 320px; } .pub-thumb { width: 34px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); flex-shrink: 0; } .pub-clip-info { display: flex; flex-direction: column; min-width: 0; } .pub-clip-info a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; } .pub-actions { white-space: nowrap; text-align: right; } .pub-actions .btn + .btn, .pub-actions .btn + span { margin-left: 6px; } /* ---------------------------------------------------------------- scheduling */ .chip-status.purple { background: var(--accent-soft); color: var(--accent); } .toast-inline.ok { background: var(--success-soft); color: var(--success); } .save-ind { font-size: 0.8rem; color: var(--text-muted); } .save-ind.ok { color: var(--success); } .schedule-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0 4px; border-top: 1px dashed var(--border-strong); margin-top: 4px; } .sched-input { background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-xs); padding: 7px 10px; font-family: var(--font); font-size: 0.85rem; } .sched-input.sm { padding: 5px 8px; font-size: 0.8rem; } .btn-sched { background: var(--accent-soft); color: var(--accent); border: 1px solid transparent; box-shadow: none; } .btn-sched:hover { background: var(--grad-purple); color: #fff; } .num-input { width: 64px; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-xs); padding: 7px 10px; font-family: var(--font); } /* ---- batch panel ---- */ .batch-panel { margin-bottom: 18px; } .batch-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; } .batch-fields { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; } .batch-fields label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; margin: 0; } /* ---- agenda page ---- */ .page-head { margin: 8px 0 16px; } .info-box { background: var(--info-soft); border-color: var(--accent-2); margin-bottom: 16px; } .agenda-table { padding: 6px 10px; } .agenda-row { display: grid; grid-template-columns: 56px 1fr auto auto auto; align-items: center; gap: 14px; padding: 12px 6px; border-bottom: 1px solid var(--border); } .agenda-row:last-child { border-bottom: none; } .agenda-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-xs); display: block; } .agenda-main { display: flex; flex-direction: column; min-width: 0; } .agenda-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; } .agenda-platform { display: inline-flex; gap: 6px; white-space: nowrap; } .agenda-when { white-space: nowrap; } .agenda-actions { display: flex; align-items: center; gap: 6px; } .reschedule-form { display: inline-flex; align-items: center; gap: 4px; } @media (max-width: 760px) { .agenda-row { grid-template-columns: 48px 1fr; row-gap: 6px; } .agenda-platform, .agenda-when, .agenda-actions { grid-column: 2; } } /* ---------------------------------------------------------------- console */ .console-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .console-status { display: inline-flex; align-items: center; gap: 8px; padding-top: 10px; } .console-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); display: inline-block; } .console-dot.on { background: var(--success); box-shadow: 0 0 8px var(--success); } .console-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0; font-size: 0.85rem; } .console-filter { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); cursor: pointer; user-select: none; } .console-filter input { accent-color: var(--accent); } .console-controls-right { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; } .console-view { background: #16142a; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); height: 64vh; overflow-y: auto; padding: 12px 14px; font-family: "Cascadia Mono", Consolas, monospace; font-size: 0.8rem; line-height: 1.45; color: #d8d6f0; box-shadow: var(--shadow-inset); } .cline { display: flex; gap: 10px; white-space: pre-wrap; word-break: break-word; } .cline-ts { color: #7d79a8; flex-shrink: 0; } .cline-src { color: var(--teal); flex-shrink: 0; min-width: 78px; } .cline-msg { flex: 1; } .cline.lvl-WARNING .cline-msg { color: var(--warning); } .cline.lvl-ERROR .cline-msg, .cline.lvl-CRITICAL .cline-msg { color: var(--danger); } .console-view.hide-http .cline.src-http, .console-view.hide-servidor .cline.src-servidor, .console-view.hide-pipeline .cline.src-pipeline, .console-view.hide-publicacao .cline.src-publicacao, .console-view.hide-sistema .cline.src-sistema { display: none; } /* ---------------------------------------------------------------- profiles */ .profile-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); background: var(--bg-elev); font-size: 0.85rem; font-weight: 600; max-width: 220px; box-shadow: var(--shadow-sm); } .profile-chip:hover { text-decoration: none; border-color: var(--accent-2); transform: translateY(-1px); } .profile-chip.active { border-color: var(--accent-2); } .profile-chip-emoji { font-size: 1rem; line-height: 1; } .profile-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile-chip-caret { color: var(--text-muted); font-size: 0.7rem; } .profiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; margin-top: 18px; } .profile-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 16px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: var(--radius); background: var(--bg-elev); text-align: center; box-shadow: var(--shadow); transition: transform 0.18s, box-shadow 0.18s; } .profile-card:hover { transform: translateY(-4px); } .profile-card.is-active { border-color: transparent; box-shadow: var(--shadow-pop); } .profile-avatar { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 26px; background: var(--grad-brand-soft); font-size: 2.6rem; line-height: 1; box-shadow: var(--shadow-sm); } .profile-card.is-active .profile-avatar { background: var(--grad-brand); } .profile-name { font-weight: 800; font-size: 1rem; word-break: break-word; } .profile-active-badge { margin-top: 2px; } .profile-manage { width: 100%; margin-top: 4px; } .profile-manage > summary { cursor: pointer; list-style: none; text-align: center; color: var(--text-muted); font-weight: 600; } .profile-manage > summary::-webkit-details-marker { display: none; } .profile-edit-form { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; width: 100%; } /* name input fills the rest of the first row; never forces overflow */ .profile-edit-form input[name="name"] { flex: 1 1 70px; min-width: 0; width: auto; } /* Salvar drops to its own full-width line so it can't spill out of the card */ .profile-edit-form .btn { flex: 1 1 100%; } .emoji-input { width: 46px; text-align: center; flex: 0 0 46px; } .profile-card-new { justify-content: center; } .profile-add { width: 88px; height: 88px; border-radius: 26px; border: 2px dashed var(--border-strong); background: transparent; color: var(--text-muted); font-size: 2.4rem; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .profile-add:hover { color: var(--accent); border-color: var(--accent-2); } .profile-new-form { display: flex; flex-direction: column; gap: 8px; width: 100%; } .profile-new-form > input[name="emoji"] { align-self: center; } .profile-new-actions { display: flex; gap: 8px; justify-content: center; } /* scope tags (global vs per-profile settings) */ .scope-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle; } .scope-global { background: var(--accent-soft); color: var(--accent); } .scope-profile { background: var(--teal-soft); color: var(--teal-2); } .scope-legend { font-size: 0.85rem; color: var(--text-muted); } /* per-account login memo */ .account-creds { margin: 6px 0 10px; } .account-creds > summary { cursor: pointer; color: var(--text-muted); font-size: 0.85rem; } /* ---------------------------------------------------------------- login (3D "cut") */ .login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; font-family: var(--font-round); overflow: hidden; } /* moving aurora behind the card */ .login-body::before { content: ""; position: fixed; inset: -25%; z-index: -1; background: radial-gradient(420px 420px at 28% 30%, rgba(123, 108, 255, 0.40), transparent 60%), radial-gradient(460px 460px at 74% 72%, rgba(22, 214, 180, 0.34), transparent 62%); filter: blur(6px); animation: auroraDrift 16s ease-in-out infinite alternate; } @keyframes auroraDrift { from { transform: translate3d(-3%, -2%, 0) scale(1.04); } to { transform: translate3d(3%, 2%, 0) scale(1.12); } } /* perspective stage — gives the card real 3D depth */ .login-stage { width: 100%; max-width: 392px; perspective: 1200px; } .login-card, .login-card input, .login-card .btn { font-family: var(--font-round); } /* the 3D card itself: tilts toward the pointer (vars set by inline JS) */ .login-card { position: relative; width: 100%; border-radius: 30px; background: var(--bg-elev); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 44px 90px -34px rgba(38, 22, 90, 0.7), 0 10px 0 rgba(255, 255, 255, 0.55) inset; overflow: hidden; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.3s ease; } /* gentle float lives on the inner wrapper so it never fights the tilt */ .login-card-inner { transform-style: preserve-3d; animation: cardFloat 6s ease-in-out infinite; } @keyframes cardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* dark "film" panel that the logo (black bg) blends seamlessly into */ .login-top { position: relative; background: #000; padding: 30px 24px 26px; text-align: center; overflow: hidden; } .login-top::before { content: ""; position: absolute; inset: -30% -10% auto -10%; height: 150%; background: radial-gradient(closest-side, rgba(123, 108, 255, 0.55), transparent 70%); mix-blend-mode: screen; animation: glowPulse 4.5s ease-in-out infinite; pointer-events: none; } @keyframes glowPulse { 0%, 100% { opacity: 0.5; transform: scale(0.92); } 50% { opacity: 0.95; transform: scale(1.08); } } .login-logo { position: relative; width: 82%; max-width: 250px; height: auto; display: block; margin: 0 auto; transform: translateZ(46px); /* pops out as the card tilts */ filter: drop-shadow(0 10px 22px rgba(123, 108, 255, 0.5)); /* fade the PNG's square black edges so it melts into the dark panel */ -webkit-mask-image: radial-gradient(78% 82% at 50% 47%, #000 66%, transparent 95%); mask-image: radial-gradient(78% 82% at 50% 47%, #000 66%, transparent 95%); } /* the "cut": a dashed line on the seam with scissors gliding across it */ .cut-line { position: relative; height: 0; margin: 0 18px; border-top: 2px dashed #c9ccec; transform: translateZ(24px); z-index: 3; } .cut-scissors { position: absolute; top: 50%; left: 4%; font-size: 1.15rem; line-height: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); animation: snip 7s ease-in-out infinite; } @keyframes snip { 0% { left: 4%; transform: translate(-50%, -50%) rotate(0deg); } 48% { left: 92%; transform: translate(-50%, -50%) rotate(-8deg); } 52% { left: 92%; transform: translate(-50%, -50%) rotate(6deg) scaleX(-1); } 100% { left: 4%; transform: translate(-50%, -50%) rotate(0deg) scaleX(-1); } } /* white form pane */ .login-pane { position: relative; padding: 30px 30px 34px; transform: translateZ(14px); } .login-card h1 { text-align: center; font-size: 1.55rem; margin: 4px 0 6px; letter-spacing: 0.005em; } .login-subtitle { text-align: center; color: var(--text-muted); font-size: 0.88rem; margin: 0 0 30px; } .login-form { display: flex; flex-direction: column; } .login-form label { margin: 14px 0 6px; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); } .login-form input { padding: 13px 16px; border-radius: var(--radius-sm); font-size: 0.95rem; } .login-form .toast { margin-bottom: 6px; } /* 3D button with a recurring shine sweep */ .login-form .btn { margin-top: 28px; width: 100%; position: relative; overflow: hidden; } .login-form .btn::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-20deg); animation: btnShine 4.5s ease-in-out infinite; } @keyframes btnShine { 0%, 55% { left: -70%; } 100% { left: 140%; } } @media (prefers-reduced-motion: reduce) { .login-body::before, .login-card-inner, .login-top::before, .cut-scissors, .login-form .btn::after { animation: none; } .login-card { transition: none; } } @media (max-width: 760px) { .topbar-inner { height: auto; flex-wrap: wrap; padding: 10px 0; } .nav { width: 100%; order: 3; justify-content: flex-start; } } /* ---------------------------------------------------------------- theme toggle */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; padding: 0; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text); cursor: pointer; font-size: 1.05rem; line-height: 1; box-shadow: var(--shadow-sm); transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease; } .theme-toggle:hover { transform: translateY(-2px) rotate(-14deg); box-shadow: var(--shadow-pop); } .theme-toggle:active { transform: translateY(0); } .theme-toggle .theme-ico { pointer-events: none; } /* ---------------------------------------------------------------- dark overrides */ /* A few base rules hardcode light-only colours (white borders, the glass topbar); restate them for dark so cards/edges read correctly. Higher specificity than the base selectors, so order-independent. */ [data-theme="dark"] .topbar { background: rgba(18, 17, 32, 0.72); border-bottom: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 12px 30px -22px rgba(0, 0, 0, 0.8); } [data-theme="dark"] .card, [data-theme="dark"] .profile-card, [data-theme="dark"] .login-card { border-color: var(--border); } [data-theme="dark"] .btn { box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06); } [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-teal { box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255, 255, 255, 0.18); } [data-theme="dark"] .cut-line { border-top-color: var(--border-strong); } [data-theme="dark"] .src-toggle button.active { background: var(--bg-elev); color: var(--accent); } [data-theme="dark"] .pub-thumb, [data-theme="dark"] .agenda-thumb img { filter: brightness(0.95); } /* ---------------------------------------------------------------- system monitoring (admin) */ .metric-section-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 6px; } .metric-section-head h1, .metric-section-head h2 { margin: 0; flex: 1; } .metric-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 6px 0 18px; } .metric-card { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; } .metric-head { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 800; display: flex; align-items: center; gap: 7px; margin-bottom: 8px; } .metric-icon { font-size: 1rem; } .metric-big { font-size: 1.45rem; font-weight: 800; color: var(--text); line-height: 1.1; } .metric-big .muted { font-size: 0.95rem; font-weight: 600; } .metric-sub { margin-top: 5px; font-size: 0.82rem; } .metric-sub.small { font-size: 0.72rem; word-break: break-all; } .metric-bar { margin-top: 9px; height: 9px; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--border); overflow: hidden; } .metric-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--grad-brand); transition: width 0.5s ease; } .metric-totals { margin: 0 0 18px; } .metric-totals strong { color: var(--text); } /* horizontal scroll for the wide per-account table on narrow screens */ .table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .metrics-table { width: 100%; border-collapse: collapse; min-width: 760px; } .metrics-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 9px 12px; border-bottom: 2px solid var(--border); white-space: nowrap; } .metrics-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } .metrics-table th.num, .metrics-table td.num { text-align: right; white-space: nowrap; } .metrics-table .acct-row td { border-top: 2px solid var(--border); } .metrics-table .acct-row:first-child td { border-top: none; } .metrics-table .prof-row td { background: var(--bg-elev-2); font-size: 0.85rem; } .metrics-table .prof-name { color: var(--text-muted); padding-left: 22px; } .pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle; margin-left: 4px; } .pill-admin { background: var(--accent-soft); color: var(--accent); } .pill-off { background: var(--danger-soft); color: var(--danger); }