/* * renderlay — Global Design System * Shared across all views. Loaded via in every standalone page. */ /* ───────────────────────────────────────────────────────── Scrollbars ───────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 4px; } ::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 3px; } ::-webkit-scrollbar-thumb { background: rgba(22,242,142,.22); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(22,242,142,.45); } ::-webkit-scrollbar-corner { background: transparent; } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: rgba(22,242,142,.22) rgba(255,255,255,.04); } /* Hide scrollbar (keep scroll) */ .hide-scrollbar::-webkit-scrollbar { display: none; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ───────────────────────────────────────────────────────── Focus rings ───────────────────────────────────────────────────────── */ *:focus { outline: none; } *:focus-visible { outline: 2px solid rgba(22,242,142,.45); outline-offset: 2px; border-radius: 6px; } /* ───────────────────────────────────────────────────────── Buttons — base reset ───────────────────────────────────────────────────────── */ button, [role="button"] { cursor: pointer; font-family: inherit; } button { user-select: none; -webkit-user-select: none; } /* ───────────────────────────────────────────────────────── Inputs, Textarea — Global dark style Uses .dark prefix (all pages have ) to win over Tailwind utility classes without !important. ───────────────────────────────────────────────────────── */ .dark input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=reset]):not([type=button]):not([type=color]), .dark textarea { background: rgba(15,30,24,.82); border: 1px solid rgba(255,255,255,.09); color: #cbd5e1; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; } .dark input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=reset]):not([type=button]):not([type=color]):focus, .dark textarea:focus { border-color: rgba(22,242,142,.45); box-shadow: 0 0 0 3px rgba(22,242,142,.07); outline: none; } .dark input::placeholder, .dark textarea::placeholder { color: #475569; } /* Disabled state */ .dark input:disabled, .dark textarea:disabled { opacity: .45; cursor: not-allowed; } /* ───────────────────────────────────────────────────────── Select — Global dark style ───────────────────────────────────────────────────────── */ .dark select, select { -webkit-appearance: none; appearance: none; cursor: pointer; font-family: inherit; background-color: rgba(15,30,24,.82); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; border: 1px solid rgba(255,255,255,.09); color: #94a3b8; padding-right: 32px !important; transition: border-color .2s, box-shadow .2s; } .dark select:focus, select:focus { border-color: rgba(22,242,142,.45); box-shadow: 0 0 0 3px rgba(22,242,142,.07); outline: none; } /* ───────────────────────────────────────────────────────── Button utilities — .btn-primary / .btn-ghost / .btn-danger ───────────────────────────────────────────────────────── */ .btn-primary, .btn-ghost, .btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 600; border-radius: 12px; padding: 9px 20px; font-size: 14px; line-height: 1; cursor: pointer; border: none; user-select: none; -webkit-user-select: none; transition: all .2s; text-decoration: none; white-space: nowrap; } .btn-primary { background: #16f28e; color: #060d0a; border: 1px solid transparent; } .btn-primary:hover { background: #0dd77a; box-shadow: 0 0 28px rgba(22,242,142,.4); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-ghost { background: transparent; color: #94a3b8; border: 1px solid rgba(255,255,255,.1); } .btn-ghost:hover { border-color: rgba(255,255,255,.2); color: #e2e8f0; background: rgba(255,255,255,.05); } .btn-danger { background: rgba(239,68,68,.09); color: #f87171; border: 1px solid rgba(239,68,68,.2); } .btn-danger:hover { background: rgba(239,68,68,.17); border-color: rgba(239,68,68,.4); box-shadow: 0 0 22px rgba(239,68,68,.18); } /* ───────────────────────────────────────────────────────── Text selection ───────────────────────────────────────────────────────── */ ::selection { background: rgba(22,242,142,.25); color: #e2faf0; } /* ───────────────────────────────────────────────────────── Smooth scroll ───────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } /* ───────────────────────────────────────────────────────── Number input: hide spin arrows ───────────────────────────────────────────────────────── */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } /* ───────────────────────────────────────────────────────── Checkbox / Radio — custom branded ───────────────────────────────────────────────────────── */ .dark input[type=checkbox]:not(.toggle-input), .dark input[type=radio] { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border: 1px solid rgba(255,255,255,.15); border-radius: 4px; background: rgba(15,30,24,.85); cursor: pointer; transition: background .15s, border-color .15s; flex-shrink: 0; position: relative; } .dark input[type=radio] { border-radius: 50%; } .dark input[type=checkbox]:not(.toggle-input):checked, .dark input[type=radio]:checked { background: #16f28e; border-color: #16f28e; } .dark input[type=checkbox]:not(.toggle-input):checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: 2px solid #060d0a; border-top: none; border-left: none; transform: rotate(45deg); } .dark input[type=radio]:checked::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; background: #060d0a; border-radius: 50%; transform: translate(-50%,-50%); } /* ───────────────────────────────────────────────────────── Utility: line-clamp (for older Safari) ───────────────────────────────────────────────────────── */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }