/* ─────────────────────────────────────────────────────────────── SEO Image Suite — stylesheet (plain CSS, no framework) Token system ported from the original (HSL custom properties). Light is default; .dark on flips the palette. ─────────────────────────────────────────────────────────────── */ :root { --background: 0 0% 100%; --foreground: 0 0% 9%; --border: 0 0% 89%; --card: 0 0% 98%; --card-foreground: 0 0% 9%; --card-border: 0 0% 94%; --popover: 0 0% 100%; --popover-foreground: 0 0% 9%; --popover-border: 0 0% 88%; --primary: 215 90% 55%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 90%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 92%; --muted-foreground: 0 0% 40%; --accent: 258 12% 94%; --accent-foreground: 0 0% 9%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 98%; --input: 0 0% 80%; --ring: 215 90% 55%; --success: 142 71% 38%; --radius: .5rem; --font-sans: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 12px rgba(0,0,0,.08); --shadow-lg: 0 10px 30px rgba(0,0,0,.12); --header-h: 64px; } .dark { --background: 0 0% 7%; --foreground: 0 0% 98%; --border: 0 0% 16%; --card: 0 0% 9%; --card-foreground: 0 0% 98%; --card-border: 0 0% 13%; --popover: 0 0% 11%; --popover-foreground: 0 0% 98%; --popover-border: 0 0% 18%; --primary: 215 90% 55%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 18%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 16%; --muted-foreground: 0 0% 65%; --accent: 258 8% 15%; --accent-foreground: 0 0% 98%; --destructive: 0 72% 51%; --destructive-foreground: 0 0% 98%; --input: 0 0% 28%; --ring: 215 90% 55%; --success: 142 60% 45%; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); background: hsl(var(--background)); color: hsl(var(--foreground)); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: inherit; } img { max-width: 100%; display: block; } h1, h2, h3 { line-height: 1.25; margin: 0; } .container { width: 100%; max-width: 1152px; margin: 0 auto; padding: 0 16px; } .muted { color: hsl(var(--muted-foreground)); } .text-xs { font-size: 12px; } .text-sm { font-size: 13px; } .center { text-align: center; } .hidden { display: none !important; } .sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; } /* ---- Header --------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--background) / .92); backdrop-filter: saturate(180%) blur(8px); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .brand img { width: 40px; height: 40px; border-radius: 10px; } .brand h1 { font-size: 18px; font-weight: 700; } .brand h1 span { font-weight: 400; color: hsl(var(--muted-foreground)); } .brand p { margin: 0; font-size: 12px; color: hsl(var(--muted-foreground)); } .header-actions { display: flex; align-items: center; gap: 8px; } @media (max-width: 640px) { .brand .brand-text { display: none; } } /* ---- Buttons -------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, opacity .15s, color .15s; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn svg { width: 16px; height: 16px; } .btn-sm { padding: 6px 10px; font-size: 13px; } .btn-icon { padding: 8px; } .btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .btn-primary:hover:not(:disabled) { background: hsl(var(--primary) / .9); } .btn-outline { background: hsl(var(--background)); color: hsl(var(--foreground)); border-color: hsl(var(--input)); } .btn-outline:hover:not(:disabled) { background: hsl(var(--muted)); } .btn-ghost { background: transparent; color: hsl(var(--foreground)); } .btn-ghost:hover:not(:disabled) { background: hsl(var(--muted)); } .btn-destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); } .btn-destructive:hover:not(:disabled) { background: hsl(var(--destructive) / .9); } .btn-block { width: 100%; } /* ---- Cards ---------------------------------------------------------- */ .card { background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--card-border)); border-radius: 12px; } .card-pad { padding: 16px; } @media (min-width: 768px) { .card-pad { padding: 20px; } } /* ---- Form controls -------------------------------------------------- */ .label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; } .label-row { display: flex; align-items: center; gap: 8px; } .input, .select { width: 100%; font: inherit; font-size: 14px; padding: 9px 12px; border-radius: var(--radius); border: 1px solid hsl(var(--input)); background: hsl(var(--background)); color: hsl(var(--foreground)); } .input:focus, .select:focus { outline: 2px solid hsl(var(--ring) / .5); outline-offset: 1px; border-color: hsl(var(--ring)); } .input-px { position: relative; } .input-px .unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: hsl(var(--muted-foreground)); } .field-hint { font-size: 12px; color: hsl(var(--muted-foreground)); margin: 6px 0 0; } .checkrow { display: flex; align-items: center; gap: 8px; } .checkrow input[type=checkbox] { width: 16px; height: 16px; accent-color: hsl(var(--primary)); } .checkrow label { font-size: 13px; cursor: pointer; } /* Segmented format / prefix toggle */ .seg { display: inline-flex; flex-wrap: wrap; gap: 6px; } .seg button { font: inherit; font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: var(--radius); border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); cursor: pointer; } .seg button[aria-pressed="true"] { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); } .seg button:disabled { opacity: .5; cursor: not-allowed; } /* ---- Dropzone ------------------------------------------------------- */ .dropzone { border: 2px dashed hsl(var(--primary) / .4); border-radius: 12px; padding: 48px 24px; text-align: center; cursor: pointer; background: hsl(var(--card) / .4); transition: border-color .15s, background .15s; } .dropzone:hover, .dropzone.dragover { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .05); } .dropzone .dz-icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 999px; background: hsl(var(--muted)); display: flex; align-items: center; justify-content: center; } .dropzone .dz-icon svg { width: 26px; height: 26px; color: hsl(var(--muted-foreground)); } .dropzone h3 { font-size: 17px; font-weight: 600; } .dropzone p { margin: 6px 0 0; font-size: 13px; color: hsl(var(--muted-foreground)); } /* ---- Settings grid -------------------------------------------------- */ .settings-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 768px) { .settings-grid { grid-template-columns: 1fr 1fr; gap: 22px; } } /* ---- Stack helper --------------------------------------------------- */ .stack > * + * { margin-top: 16px; } .stack-sm > * + * { margin-top: 8px; } .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .between { display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* ---- Badges --------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid hsl(var(--border)); } .badge-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border-color: transparent; } .badge-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: transparent; } .badge-destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); border-color: transparent; } .badge-success { color: hsl(var(--success)); border-color: hsl(var(--success)); } .badge-ai { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); border-color: transparent; } /* ---- Empty state ---------------------------------------------------- */ .empty { text-align: center; padding: 48px 16px; } .empty .empty-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 999px; background: hsl(var(--muted)); display: flex; align-items: center; justify-content: center; } .empty .empty-icon svg { width: 30px; height: 30px; color: hsl(var(--muted-foreground)); } .empty h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; } .empty p { max-width: 460px; margin: 0 auto; font-size: 13px; color: hsl(var(--muted-foreground)); } /* ---- Image gallery rows -------------------------------------------- */ .gallery { display: flex; flex-direction: column; gap: 10px; } .img-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px; border: 1px solid hsl(var(--card-border)); border-radius: 12px; background: hsl(var(--card)); } .img-row.dragging { opacity: .5; } .img-row .grip { cursor: grab; color: hsl(var(--muted-foreground)); padding-top: 22px; touch-action: none; } .img-row .grip svg { width: 18px; height: 18px; } .thumb { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; background: hsl(var(--muted)); flex-shrink: 0; cursor: zoom-in; border: 1px solid hsl(var(--card-border)); } .img-main { flex: 1; min-width: 0; } .img-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 10px; } .spinner { width: 16px; height: 16px; border: 2px solid hsl(var(--muted-foreground) / .3); border-top-color: hsl(var(--primary)); border-radius: 999px; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .switch { position: relative; width: 36px; height: 20px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .switch .track { position: absolute; inset: 0; background: hsl(var(--input)); border-radius: 999px; transition: background .15s; cursor: pointer; } .switch .track::before { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; background: #fff; border-radius: 999px; transition: transform .15s; } .switch input:checked + .track { background: hsl(var(--primary)); } .switch input:checked + .track::before { transform: translateX(16px); } /* ---- Download / action panel --------------------------------------- */ .panel { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .panel .grow { flex: 1; min-width: 0; } .progress { height: 6px; border-radius: 999px; background: hsl(var(--muted)); overflow: hidden; } .progress > span { display: block; height: 100%; background: hsl(var(--primary)); width: 0; transition: width .2s; } /* ---- Marketing section --------------------------------------------- */ .section { border-top: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .3); } .section .container { padding-top: 48px; padding-bottom: 48px; } .section h2 { font-size: 26px; font-weight: 800; text-align: center; } .section .lead { max-width: 720px; margin: 14px auto 0; text-align: center; color: hsl(var(--muted-foreground)); font-size: 16px; } .compare { display: grid; grid-template-columns: 1fr; gap: 22px; max-width: 880px; margin: 32px auto 0; } @media (min-width: 768px) { .compare { grid-template-columns: 1fr 1fr; } } .plan { border: 2px solid hsl(var(--card-border)); border-radius: 12px; padding: 22px; background: hsl(var(--card)); } .plan.premium { border-color: hsl(var(--primary) / .5); background: hsl(var(--primary) / .05); } .plan .plan-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .plan .plan-head h3 { font-size: 20px; font-weight: 700; } .plan .plan-sub { font-size: 13px; color: hsl(var(--muted-foreground)); margin: 0 0 16px; } .feat { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; } .feat .mark { flex-shrink: 0; margin-top: 1px; } .feat .mark.yes { color: hsl(var(--success)); } .feat .mark.no { color: hsl(var(--muted-foreground) / .5); } .feat .mark svg { width: 18px; height: 18px; } .feat .ftitle { font-size: 13px; font-weight: 600; } .feat.off .ftitle, .feat.off .fdesc { color: hsl(var(--muted-foreground) / .55); } .feat .fdesc { font-size: 12px; color: hsl(var(--muted-foreground)); } .why { max-width: 720px; margin: 40px auto 0; text-align: center; } .why h3 { font-size: 18px; font-weight: 700; } .why-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; } @media (min-width: 640px) { .why-grid { grid-template-columns: 1fr 1fr 1fr; } } .why-card { padding: 18px; border-radius: 12px; background: hsl(var(--muted) / .5); } .why-card svg { width: 24px; height: 24px; color: hsl(var(--primary)); margin: 0 auto 8px; } .why-card p.t { font-weight: 600; margin: 0; } .why-card p.d { font-size: 12px; color: hsl(var(--muted-foreground)); margin: 4px 0 0; } /* ---- Footer --------------------------------------------------------- */ .site-footer { border-top: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .3); } .site-footer .container { padding-top: 22px; padding-bottom: 22px; display: flex; flex-direction: column; gap: 14px; align-items: center; } @media (min-width: 768px) { .site-footer .container { flex-direction: row; justify-content: space-between; } } .site-footer nav { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; } .site-footer a, .site-footer span.copy { font-size: 13px; color: hsl(var(--muted-foreground)); text-decoration: none; } .site-footer nav a:hover { color: hsl(var(--foreground)); } /* ---- Modal / overlay ------------------------------------------------ */ .overlay { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.55); padding: 16px; } .overlay.open { display: flex; } .modal { background: hsl(var(--popover)); color: hsl(var(--popover-foreground)); border: 1px solid hsl(var(--popover-border)); border-radius: 14px; width: 100%; max-width: 420px; padding: 24px; box-shadow: var(--shadow-lg); } .modal h2 { font-size: 20px; font-weight: 700; } .modal p.sub { color: hsl(var(--muted-foreground)); font-size: 14px; margin: 6px 0 18px; } .modal .close { float: right; background: transparent; border: 0; cursor: pointer; color: hsl(var(--muted-foreground)); padding: 4px; } .modal .close svg { width: 20px; height: 20px; } /* Image preview lightbox */ .lightbox { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.8); } .lightbox.open { display: flex; } .lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 10px; box-shadow: var(--shadow-lg); } .lightbox .lb-close { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,.12); border: 0; border-radius: 999px; padding: 8px; cursor: pointer; } .lightbox .lb-close svg { width: 22px; height: 22px; color: #fff; } /* ---- Toasts --------------------------------------------------------- */ .toast-wrap { position: fixed; bottom: 16px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: 360px; } .toast { background: hsl(var(--popover)); color: hsl(var(--popover-foreground)); border: 1px solid hsl(var(--popover-border)); border-left: 4px solid hsl(var(--primary)); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow-md); animation: toast-in .2s ease; } .toast.error { border-left-color: hsl(var(--destructive)); } .toast.success { border-left-color: hsl(var(--success)); } .toast .tt { font-weight: 600; font-size: 14px; } .toast .td { font-size: 13px; color: hsl(var(--muted-foreground)); margin-top: 2px; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } } /* ---- Auth / content pages ------------------------------------------ */ .page-wrap { min-height: calc(100vh - var(--header-h)); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; } .auth-card { width: 100%; max-width: 440px; } .auth-card h2 { font-size: 22px; font-weight: 700; } .auth-card .sub { color: hsl(var(--muted-foreground)); font-size: 14px; margin: 6px 0 20px; } .form-field { margin-bottom: 16px; } .alt-link { font-size: 13px; color: hsl(var(--muted-foreground)); text-align: center; margin-top: 16px; } .alt-link a { color: hsl(var(--primary)); font-weight: 600; text-decoration: none; } .notice { padding: 12px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 16px; } .notice-error { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); border: 1px solid hsl(var(--destructive) / .3); } .notice-success { background: hsl(var(--success) / .12); color: hsl(var(--success)); border: 1px solid hsl(var(--success) / .3); } /* Legal / prose */ .prose { max-width: 800px; margin: 0 auto; padding: 40px 16px; } .prose h1 { font-size: 28px; font-weight: 800; margin-bottom: 8px; } .prose h2 { font-size: 19px; font-weight: 700; margin: 28px 0 8px; } .prose h3 { font-size: 15px; font-weight: 700; margin: 18px 0 6px; } .prose p, .prose li { color: hsl(var(--foreground)); } .prose ul { padding-left: 22px; } .prose li { margin: 4px 0; } .prose a { color: hsl(var(--primary)); } /* ---- Dropdown menu (user) ------------------------------------------ */ .menu { position: relative; } .menu-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: hsl(var(--popover)); border: 1px solid hsl(var(--popover-border)); border-radius: 10px; box-shadow: var(--shadow-md); padding: 6px; display: none; z-index: 60; } .menu-pop.open { display: block; } .menu-pop .mi { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 0; background: transparent; color: hsl(var(--foreground)); cursor: pointer; text-decoration: none; } .menu-pop .mi:hover { background: hsl(var(--muted)); } .menu-pop .mi.danger { color: hsl(var(--destructive)); } .menu-pop .mi svg { width: 16px; height: 16px; } .menu-pop .mhead { padding: 8px 10px; } .menu-pop .mhead .n { font-size: 13px; font-weight: 600; } .menu-pop .mhead .e { font-size: 12px; color: hsl(var(--muted-foreground)); } .menu-sep { height: 1px; background: hsl(var(--border)); margin: 6px 0; } .menu-stats { padding: 6px 10px; font-size: 12px; color: hsl(var(--muted-foreground)); } .menu-stats p { margin: 2px 0; } .bell { position: relative; } .bell .dot { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: hsl(var(--destructive)); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ---- Admin dashboard ------------------------------------------------ */ .admin-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; } .admin-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .admin-head h1 { font-size: 20px; font-weight: 700; } .admin-head .spacer { flex: 1; } .tablist { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 20px; } .tablist .tab { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; font-weight: 600; padding: 10px 14px; border: 0; background: transparent; color: hsl(var(--muted-foreground)); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tablist .tab svg { width: 16px; height: 16px; } .tablist .tab[aria-selected="true"] { color: hsl(var(--foreground)); border-bottom-color: hsl(var(--primary)); } .tablist .tab .pill { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); } .tabpanel { display: none; } .tabpanel.active { display: block; } .tabpanel .card + .card { margin-top: 18px; } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; } table.tbl th, table.tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; vertical-align: middle; } table.tbl th { font-weight: 600; color: hsl(var(--muted-foreground)); font-size: 12px; text-transform: uppercase; letter-spacing: .02em; } table.tbl tr:last-child td { border-bottom: 0; } table.tbl td.wrap { white-space: normal; min-width: 240px; } .row-actions { display: flex; flex-wrap: wrap; gap: 6px; } .muted { color: hsl(var(--muted-foreground)); } .card-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; } .card-title svg { width: 18px; height: 18px; color: hsl(var(--muted-foreground)); } .card-desc { font-size: 13px; color: hsl(var(--muted-foreground)); margin: 0 0 16px; } .inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .inline-form .input { width: auto; flex: 1; min-width: 200px; } .chip-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .chip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid hsl(var(--border)); border-radius: 10px; } .chip code { font-size: 13px; } .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .switch-row .lbl { font-weight: 600; font-size: 14px; } .switch-row .lbl + p { margin: 2px 0 0; } .mono { font-variant-numeric: tabular-nums; } .modal.modal-lg { max-width: 720px; max-height: 86vh; overflow-y: auto; } .shot-modal img { max-width: 100%; border-radius: 10px; border: 1px solid hsl(var(--border)); } .tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }