/* ============================================
   Prototype Workspace - Professional Theme
   Blue & Red Color Scheme
   ============================================ */

:root {
    --primary: #1a56db;
    --primary-dark: #1344b0;
    --primary-light: #e8effd;
    --secondary: #dc2626;
    --secondary-dark: #b91c1c;
    --secondary-light: #fee2e2;
    
    --bg-dark: #0f172a;
    --bg-sidebar: #1e293b;
    --bg-main: #f1f5f9;
    --bg-card: #ffffff;
    
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-light: #94a3b8;
    --text-white: #ffffff;
    
    --border: #e2e8f0;
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.15);
    
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    
    --sidebar-width: 280px;
    --header-height: 64px;
    
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-main);
    color: var(--text-primary);
    line-height: 1.6;
    overflow: hidden;
    height: 100vh;
}

#root {
    height: 100vh;
}

/* ============================================
   LOGIN PAGE
   ============================================ */

.login-page {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-dark) 0%, #1a237e 50%, #1e293b 100%);
    position: relative;
    overflow: hidden;
}

.login-page::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 50%, rgba(26,86,219,0.15) 0%, transparent 50%),
                radial-gradient(circle at 70% 50%, rgba(220,38,38,0.1) 0%, transparent 50%);
    animation: bgFloat 20s ease-in-out infinite;
}

@keyframes bgFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -30px) rotate(1deg); }
    66% { transform: translate(-20px, 20px) rotate(-1deg); }
}

.login-container {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 48px 40px;
    width: 420px;
    max-width: 90vw;
    box-shadow: var(--shadow-xl);
    animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.login-logo {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo .icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 28px;
    color: white;
    box-shadow: 0 8px 24px rgba(26,86,219,0.3);
}

.login-logo h1 {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.login-logo p {
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 4px;
}

.login-form .form-group {
    margin-bottom: 20px;
}

.login-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.login-form .input-wrapper {
    position: relative;
}

.login-form .input-wrapper i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 16px;
    transition: var(--transition);
}

.login-form input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-family: inherit;
    transition: var(--transition);
    background: var(--bg-main);
    color: var(--text-primary);
}

.login-form input:focus {
    outline: none;
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 4px rgba(26,86,219,0.1);
}

.login-form input:focus + i,
.login-form .input-wrapper:focus-within i {
    color: var(--primary);
}

.login-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    color: white;
    cursor: pointer;
    transition: var(--transition);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    position: relative;
    overflow: hidden;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26,86,219,0.4);
}

.login-btn:active {
    transform: translateY(0);
}

.login-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.login-btn .spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.login-error {
    background: var(--secondary-light);
    color: var(--secondary-dark);
    padding: 10px 14px;
    border-radius: var(--radius-xs);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-error i {
    font-size: 14px;
}

/* ============================================
   MAIN LAYOUT
   ============================================ */

.app-layout {
    display: flex;
    height: 100vh;
    background: var(--bg-main);
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    transition: var(--transition);
    box-shadow: 2px 0 20px rgba(0,0,0,0.1);
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-logo-window {
    width: 150px;
    height: 42px;
    flex: 0 0 auto;
    display: block;
    overflow: hidden;
    border-radius: 5px;
    background: #fff;
}

.sidebar-logo-window img {
    width: 150px;
    height: auto;
    display: block;
    transform: translateY(-14px);
}

.sidebar-header .logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    flex-shrink: 0;
}

.sidebar-header .logo-text h2 {
    font-size: 16px;
    font-weight: 700;
    color: white;
    letter-spacing: -0.3px;
}

.sidebar-header .logo-text span {
    font-size: 11px;
    color: var(--text-light);
    font-weight: 500;
}

.sidebar-search {
    padding: 16px 20px;
}

.sidebar-search .search-wrapper {
    position: relative;
}

.sidebar-search input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-xs);
    background: rgba(255,255,255,0.06);
    color: white;
    font-size: 13px;
    font-family: inherit;
    transition: var(--transition);
}

.sidebar-search input::placeholder {
    color: rgba(255,255,255,0.4);
}

.sidebar-search input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(255,255,255,0.1);
}

.sidebar-search .search-wrapper i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.3);
    font-size: 13px;
}

.sidebar-section-label {
    padding: 16px 20px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.35);
}

.sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 12px;
}

.sidebar-list::-webkit-scrollbar {
    width: 4px;
}

.sidebar-list::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    font-weight: 500;
    position: relative;
    margin-bottom: 2px;
}

.sidebar-item:hover {
    background: rgba(255,255,255,0.08);
    color: white;
}

.sidebar-item.active {
    background: rgba(26,86,219,0.2);
    color: white;
}

.sidebar-item.active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: var(--primary);
    border-radius: 0 4px 4px 0;
}

.sidebar-item .item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
    color: var(--primary-light);
}

.sidebar-item.active .item-icon {
    background: var(--primary);
    color: white;
}

.sidebar-item .item-info {
    flex: 1;
    min-width: 0;
}

.sidebar-item .item-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-item .item-status {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sidebar-item .item-status.show {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,0.5);
}

.sidebar-item .item-status.hide {
    background: var(--text-light);
}

.sidebar-item .item-actions {
    display: none;
    gap: 4px;
}

.sidebar-item:hover .item-actions {
    display: flex;
}

.sidebar-item .item-actions button {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 4px;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-size: 11px;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-item .item-actions button:hover {
    background: rgba(255,255,255,0.2);
    color: white;
}

.sidebar-item .item-actions .delete-btn:hover {
    background: rgba(220,38,38,0.3);
    color: #fca5a5;
}

.sidebar-empty {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255,255,255,0.4);
}

.sidebar-empty i {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.sidebar-empty p {
    font-size: 13px;
}

/* ============================================
   HEADER
   ============================================ */

.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.header {
    height: var(--header-height);
    background: white;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    box-shadow: var(--shadow);
    position: relative;
    z-index: 10;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-left h1 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.header-left .breadcrumb {
    font-size: 13px;
    color: var(--text-secondary);
}

.header-left .breadcrumb span {
    color: var(--primary);
    font-weight: 500;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-btn {
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-xs);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-btn.primary-btn {
    background: var(--primary);
    color: white;
}

.header-btn.primary-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26,86,219,0.3);
}

.header-btn.secondary-btn {
    background: var(--bg-main);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.header-btn.secondary-btn:hover {
    background: var(--border);
}

.header-btn.danger-btn {
    background: transparent;
    color: var(--secondary);
}

.header-btn.danger-btn:hover {
    background: var(--secondary-light);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.user-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(26,86,219,0.3);
}

/* ============================================
   CANVAS AREA
   ============================================ */

.canvas-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #f8fafc;
}

.canvas-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-light);
}

.canvas-placeholder i {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.canvas-placeholder h3 {
    font-size: 20px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 8px;
}

.canvas-placeholder p {
    font-size: 14px;
    color: var(--text-light);
}

.canvas-iframe-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.canvas-iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: white;
}

.canvas-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.9);
    z-index: 5;
}

.canvas-loading .loader {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.canvas-iframe-container .url-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 6px 16px;
    background: #f1f5f9;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-light);
    font-family: 'SF Mono', 'Fira Code', monospace;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.canvas-iframe-container .url-bar i {
    color: var(--primary);
    font-size: 12px;
}

.canvas-iframe-container .url-bar .url-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.canvas-iframe-container .url-bar .url-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,0.5);
}

/* ============================================
   SETTINGS MODAL
   ============================================ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal {
    background: white;
    border-radius: 16px;
    width: 520px;
    max-width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: modalSlide 0.3s ease-out;
}

@keyframes modalSlide {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
    padding: 24px 28px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.modal-header .close-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: var(--bg-main);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-header .close-btn:hover {
    background: var(--secondary-light);
    color: var(--secondary);
}

.modal-body {
    padding: 24px 28px;
}

.modal-footer {
    padding: 16px 28px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid var(--border);
}

.form-group {
    margin-bottom: 20px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.form-group .hint {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 4px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius-xs);
    font-size: 14px;
    font-family: inherit;
    transition: var(--transition);
    background: var(--bg-main);
    color: var(--text-primary);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 4px rgba(26,86,219,0.1);
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-xs);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-secondary {
    background: var(--bg-main);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--border);
}

.btn-danger {
    background: var(--secondary);
    color: white;
}

.btn-danger:hover {
    background: var(--secondary-dark);
}

/* ============================================
   NOTIFICATION
   ============================================ */

.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 14px 20px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-lg);
    animation: notifSlide 0.3s ease-out;
    max-width: 380px;
}

@keyframes notifSlide {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

.notification.success {
    background: #f0fdf4;
    color: #166534;
    border-left: 4px solid #22c55e;
}

.notification.error {
    background: var(--secondary-light);
    color: var(--secondary-dark);
    border-left: 4px solid var(--secondary);
}

.notification.info {
    background: var(--primary-light);
    color: var(--primary-dark);
    border-left: 4px solid var(--primary);
}

/* ============================================
   CONFIRM DIALOG
   ============================================ */

.confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.confirm-dialog {
    background: white;
    border-radius: 12px;
    padding: 28px;
    width: 380px;
    max-width: 90vw;
    box-shadow: var(--shadow-xl);
    text-align: center;
}

.confirm-dialog i {
    font-size: 40px;
    color: var(--secondary);
    margin-bottom: 12px;
}

.confirm-dialog h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.confirm-dialog p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.confirm-dialog .confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* ============================================
   SCROLLBAR
   ============================================ */

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0;
    }
    
    .header {
        padding: 0 16px;
    }
    
    .modal {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}

/* ============================================
   VIEWS UI REFRESH
   Presentation-only overrides
   ============================================ */

:root {
    --primary: #176baf;
    --primary-dark: #12558c;
    --primary-light: #e9f3fb;
    --secondary: #e45b55;
    --secondary-dark: #c5423d;
    --secondary-light: #fff0ef;
    --accent: #f59e0b;

    --bg-dark: #102a43;
    --bg-sidebar: #ffffff;
    --bg-main: #f3f6fa;
    --bg-card: #ffffff;

    --text-primary: #172b3f;
    --text-secondary: #61758a;
    --text-light: #94a3b8;

    --border: #dce5ee;
    --shadow: 0 1px 2px rgba(15, 42, 67, 0.04), 0 8px 24px rgba(15, 42, 67, 0.06);
    --shadow-lg: 0 16px 40px rgba(15, 42, 67, 0.10);
    --shadow-xl: 0 24px 64px rgba(15, 42, 67, 0.18);

    --radius: 14px;
    --radius-sm: 10px;
    --radius-xs: 8px;
    --sidebar-width: 264px;
    --header-height: 78px;
    --transition: all 0.2s ease;
}

body {
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 14px;
}

button,
input,
select {
    font: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(23, 107, 175, 0.22);
    outline-offset: 2px;
}

/* Workspace shell */
.app-layout {
    background: var(--bg-main);
}

.sidebar {
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    box-shadow: none;
}

.sidebar-header {
    min-height: var(--header-height);
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    gap: 12px;
}

.sidebar-header .logo-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #fff7e6;
    color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.18);
}

.sidebar-header .logo-text h2 {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 750;
    letter-spacing: -0.2px;
}

.sidebar-header .logo-text span {
    display: block;
    margin-top: 1px;
    color: var(--text-light);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sidebar-toggle {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    color: #71869b;
    cursor: pointer;
    font-size: 10px;
    box-shadow: 0 2px 7px rgba(15, 42, 67, 0.05);
    transition: var(--transition);
}

.sidebar-toggle:hover {
    border-color: #b9d5e9;
    background: var(--primary-light);
    color: var(--primary);
    transform: translateX(-1px);
}

.app-layout:has(.sidebar.collapsed) {
    --sidebar-width: 82px;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding-inline: 12px;
}

.sidebar.collapsed .sidebar-logo-window {
    width: 42px;
}

.sidebar.collapsed .sidebar-logo-window img {
    max-width: none;
    transform: translate(-17px, -14px);
}

.sidebar.collapsed .sidebar-toggle {
    position: absolute;
    top: 24px;
    right: -13px;
    z-index: 2;
    margin: 0;
    border-radius: 50%;
}

.sidebar.collapsed .sidebar-toggle:hover {
    transform: translateX(1px);
}

.sidebar.collapsed .logo-text,
.sidebar.collapsed .sidebar-search,
.sidebar.collapsed .sidebar-category-header span,
.sidebar.collapsed .sidebar-section-label,
.sidebar.collapsed .sidebar-item .item-info,
.sidebar.collapsed .sidebar-item .item-status,
.sidebar.collapsed .sidebar-item .item-actions {
    display: none;
}

.sidebar.collapsed .sidebar-list {
    padding: 14px 12px;
}

.sidebar.collapsed .sidebar-category-header {
    justify-content: center;
    padding: 8px;
}

.sidebar.collapsed .sidebar-category-header i {
    color: #b1bfcb;
}

.sidebar.collapsed .sidebar-item {
    justify-content: center;
    padding: 7px;
}

.sidebar.collapsed .sidebar-item.active::before {
    left: -13px;
}

.sidebar-search {
    padding: 18px 16px 12px;
}

.sidebar-search input {
    height: 40px;
    padding: 9px 12px 9px 38px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f8fafc;
    color: var(--text-primary);
}

.sidebar-search input::placeholder {
    color: var(--text-light);
}

.sidebar-search input:focus {
    border-color: #87b8dc;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(23, 107, 175, 0.10);
}

.sidebar-search .search-wrapper i {
    left: 14px;
    color: #8497aa;
}

.sidebar-list {
    padding: 2px 12px 20px;
}

.sidebar-actions {
    padding: 0 12px 8px;
    border-bottom: 1px solid var(--border);
}

.sidebar-actions .sidebar-section-label {
    padding: 8px 10px 7px;
}

.sidebar-action-item {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    padding: 6px 9px;
    color: #586d82;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}

.sidebar-action-item:hover {
    color: var(--text-primary);
    border-color: #e8eef4;
    background: #f5f8fb;
}

.sidebar-action-item.active {
    color: var(--primary-dark);
    border-color: #d3e7f6;
    background: var(--primary-light);
}

.sidebar-action-item:disabled {
    opacity: .48;
    cursor: not-allowed;
}

.sidebar-action-item:disabled:hover {
    color: #586d82;
    border-color: transparent;
    background: transparent;
}

.sidebar-action-item .item-icon {
    width: 31px;
    height: 31px;
    display: grid;
    flex: 0 0 31px;
    place-items: center;
    border-radius: 8px;
    font-size: 11px;
}

.sidebar-action-item .item-icon.inbox {
    color: #9a610b;
    background: #fff1d1;
}

.sidebar-action-item .item-icon.review {
    color: #207359;
    background: #e6f4ed;
}

.sidebar-action-item .item-icon.feedback {
    color: #9a610b;
    background: #fff1d1;
}

.sidebar-action-item .item-icon.decision {
    color: #207359;
    background: #e6f4ed;
}

.sidebar-action-item .item-info {
    min-width: 0;
    flex: 1;
}

.sidebar-action-item .item-name {
    font-size: 12.5px;
    font-weight: 650;
}

.sidebar-action-item .item-review-count {
    display: grid;
    min-width: 20px;
    height: 20px;
    place-items: center;
    padding: 0 5px;
    color: #8a5708;
    border-radius: 20px;
    background: #ffedc6;
    font-size: 8px;
    font-weight: 800;
}

.sidebar.collapsed .sidebar-actions {
    padding: 14px 12px 10px;
}

.sidebar.collapsed .sidebar-action-item {
    justify-content: center;
    padding: 6px;
}

.sidebar.collapsed .sidebar-action-item .item-info,
.sidebar.collapsed .sidebar-action-item .item-review-count {
    display: none;
}

.sidebar-category {
    margin: 4px 0 12px;
}

.sidebar-category-header,
.sidebar-section-label {
    padding: 12px 10px 7px;
    color: #8a9aac;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.08em;
}

.sidebar-category-header {
    display: flex;
    align-items: center;
    gap: 7px;
    text-transform: uppercase;
}

.sidebar-category-header i {
    color: #a7b4c1;
    width: 14px;
    text-align: center;
}

.sidebar-category-header .category-count {
    min-width: 19px;
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 999px;
    background: #edf2f7;
    color: #708399;
    text-align: center;
}

.sidebar-item {
    min-height: 46px;
    margin-bottom: 4px;
    padding: 7px 9px;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #586d82;
}

.sidebar-item:hover {
    background: #f5f8fb;
    border-color: #e8eef4;
    color: var(--text-primary);
}

.sidebar-item.active {
    background: var(--primary-light);
    border-color: #d3e7f6;
    color: var(--primary-dark);
}

.sidebar-item.active::before {
    left: -13px;
    width: 3px;
    height: 28px;
    background: var(--primary);
}

.sidebar-item .item-icon {
    width: 31px;
    height: 31px;
    background: #eef3f7;
    color: #71869b;
}

.sidebar-item.active .item-icon {
    background: #ffffff;
    color: var(--primary);
    box-shadow: 0 1px 4px rgba(23, 107, 175, 0.12);
}

.sidebar-item .item-name {
    font-size: 12.5px;
    font-weight: 650;
}

.sidebar-item .item-status {
    width: 7px;
    height: 7px;
}

.sidebar-item .item-status.show {
    background: #34b27b;
    box-shadow: 0 0 0 3px rgba(52, 178, 123, 0.11);
}

.sidebar-item .item-actions button {
    background: #ffffff;
    color: #71869b;
    border: 1px solid #dce5ee;
}

.sidebar-item .item-actions button:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.sidebar-item .item-actions .delete-btn:hover {
    background: var(--secondary-light);
    border-color: #ffd5d2;
    color: var(--secondary);
}

.sidebar-empty {
    margin: 8px 2px;
    padding: 36px 18px;
    border: 1px dashed #d7e1eb;
    border-radius: 12px;
    background: #f9fbfd;
    color: var(--text-light);
}

.sidebar-empty i {
    color: #b9c6d2;
}

/* Header */
.main-content {
    background: var(--bg-main);
}

.header {
    min-height: var(--header-height);
    padding: 0 28px;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
}

.header-left .breadcrumb {
    display: flex;
    align-items: center;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 760;
    letter-spacing: -0.35px;
}

.header-left .breadcrumb .main-header-logo {
    width: 102px;
    height: 30px;
    display: block;
    overflow: hidden;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.main-header-logo img {
    width: 102px;
    height: auto;
    display: block;
    transform: translateY(-8px);
}

.header-left .breadcrumb > i {
    font-size: 9px !important;
    color: #a2b1bf;
}

.header-left .breadcrumb span {
    padding: 5px 9px;
    border-radius: 7px;
    background: #f2f6f9;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 650;
    vertical-align: middle;
}

.header-right {
    gap: 9px;
}

.header-btn {
    min-height: 38px;
    padding: 9px 14px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
}

.header-btn.primary-btn {
    background: var(--primary);
    box-shadow: 0 5px 12px rgba(23, 107, 175, 0.16);
}

.header-btn.primary-btn:hover {
    background: var(--primary-dark);
    box-shadow: 0 7px 16px rgba(23, 107, 175, 0.22);
}

.header-btn.danger-btn {
    width: 38px;
    padding: 0;
    justify-content: center;
    border: 1px solid var(--border);
    background: #ffffff;
    color: #7b8da0;
}

.header-btn.danger-btn:hover {
    border-color: #ffd5d2;
    background: var(--secondary-light);
    color: var(--secondary);
}

.user-avatar {
    width: 38px;
    height: 38px;
    border: 3px solid #ffffff;
    background: linear-gradient(145deg, #244f73, #176baf);
    box-shadow: 0 0 0 1px var(--border);
}

/* Overview cards */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(170px, 210px));
    gap: 10px;
    justify-content: start;
    padding: 12px 22px 0;
    background: transparent;
    border: 0;
}

.stat-card {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 42, 67, 0.03);
}

.stat-card::after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: -25px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.045;
}

.stat-card:hover {
    transform: translateY(-2px);
    border-color: #cddae6;
    box-shadow: var(--shadow);
}

.stat-card .stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 13px;
}

.stat-total {
    color: var(--primary);
}

.stat-total .stat-icon {
    background: #e9f3fb;
    color: var(--primary);
}

.stat-active {
    color: #208864;
}

.stat-active .stat-icon {
    background: #e7f7f0;
    color: #208864;
}

.stat-hidden {
    color: #b7791f;
}

.stat-hidden .stat-icon {
    background: #fff5dc;
    color: #b7791f;
}

.stat-card .stat-info {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

.stat-card .stat-number {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 780;
    line-height: 1;
    letter-spacing: -0.35px;
}

.stat-card .stat-label {
    margin-top: 0;
    color: var(--text-secondary);
    font-size: 8.5px;
    font-weight: 720;
    line-height: 1.2;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

/* Preview canvas */
.canvas-area {
    margin: 12px 22px 22px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: var(--shadow);
}

.canvas-area::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 18px;
    z-index: 3;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f5a6a1;
    box-shadow: 14px 0 0 #f3ca72, 28px 0 0 #88d0ac;
    pointer-events: none;
}

.canvas-iframe-container {
    padding-top: 42px;
    background: #ffffff;
}

.canvas-iframe-container::before {
    content: "Review preview";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #e7edf3;
    background: #fbfcfd;
    color: #7b8da0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.canvas-content-badge {
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    color: #526c7e;
    border: 1px solid #d5e0e7;
    border-radius: 20px;
    background: #fff;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.canvas-content-badge i { color: #e99a18; }

.canvas-iframe-container iframe {
    border-radius: 0 0 13px 13px;
}

.canvas-placeholder {
    margin: 72px auto;
    width: min(520px, calc(100% - 40px));
    height: calc(100% - 144px);
    min-height: 250px;
    padding: 36px;
    border: 1px dashed #cddae6;
    border-radius: 16px;
    background:
        radial-gradient(circle at 50% 20%, rgba(23, 107, 175, 0.07), transparent 35%),
        #fbfcfe;
}

.canvas-placeholder i {
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 18px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 28px;
    opacity: 1;
}

.canvas-placeholder h3 {
    margin-bottom: 6px;
    color: var(--text-primary);
    font-size: 19px;
    font-weight: 760;
}

.canvas-placeholder p {
    color: var(--text-secondary);
    text-align: center;
}

.canvas-loading {
    top: 42px;
    border-radius: 0 0 13px 13px;
    background: rgba(255, 255, 255, 0.94);
}

.canvas-loading .loader,
.loader {
    border-color: #dce5ee;
    border-top-color: var(--primary);
}

.canvas-blocked {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 30px;
    text-align: center;
    border-radius: 0 0 13px 13px;
    background: #ffffff;
}

.canvas-blocked .blocked-icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 18px;
    font-size: 28px;
    background: #fff6f5;
    color: var(--secondary);
}

.canvas-blocked h3 {
    margin-bottom: 7px;
    color: var(--text-primary);
    font-size: 19px;
}

.canvas-blocked p {
    max-width: 460px;
    margin-bottom: 22px;
    color: var(--text-secondary);
}

.canvas-blocked .blocked-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Dialogs and controls */
.modal-overlay,
.popup-overlay,
.confirm-overlay {
    background: rgba(16, 42, 67, 0.52);
    backdrop-filter: blur(8px);
}

.modal,
.popup-modal,
.confirm-dialog {
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
}

.popup-modal {
    width: 92vw;
    height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
}

.popup-header {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: #fbfcfd;
}

.popup-title,
.popup-actions {
    display: flex;
    align-items: center;
}

.popup-title {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
}

.popup-actions {
    gap: 7px;
}

.popup-ext-link,
.popup-close-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text-secondary);
    text-decoration: none;
}

.popup-close-btn {
    cursor: pointer;
}

.popup-body {
    flex: 1;
    overflow: hidden;
}

.popup-iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.modal-header {
    padding: 24px 26px 18px;
    border-bottom: 1px solid var(--border);
}

.modal-header h2 {
    font-size: 18px;
    font-weight: 760;
}

.modal-header .close-btn {
    border: 1px solid var(--border);
    background: #ffffff;
}

.modal-body {
    padding: 22px 26px;
}

.modal-footer {
    padding: 17px 26px 22px;
    background: #fbfcfd;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 700;
}

.form-group input,
.form-group select {
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #ffffff;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #87b8dc;
    box-shadow: 0 0 0 3px rgba(23, 107, 175, 0.10);
}

.btn {
    min-height: 40px;
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.btn-primary {
    background: var(--primary);
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-secondary {
    background: #ffffff;
}

.notification {
    top: 18px;
    right: 18px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-left-width: 4px;
    border-radius: 10px;
}

/* Polished sign-in surface */
.login-page {
    background:
        radial-gradient(circle at 14% 20%, rgba(245, 158, 11, 0.18), transparent 25%),
        radial-gradient(circle at 82% 74%, rgba(23, 107, 175, 0.22), transparent 34%),
        linear-gradient(145deg, #f5f8fb, #eaf1f7);
}

.login-page::before {
    background:
        linear-gradient(rgba(255,255,255,0.26) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.26) 1px, transparent 1px);
    background-size: 44px 44px;
    animation: none;
}

.login-container {
    width: 430px;
    padding: 42px 40px;
    border: 1px solid rgba(255,255,255,0.86);
    border-radius: 22px;
    box-shadow: 0 28px 80px rgba(34, 63, 88, 0.15);
}

.login-logo .icon {
    background: #fff7e6;
    color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.18);
}

.login-logo h1 {
    font-size: 25px;
    font-weight: 780;
}

.login-form input {
    border-width: 1px;
    background: #f8fafc;
    padding-left: 42px;
}

.login-btn {
    background: var(--primary);
    box-shadow: 0 8px 18px rgba(23, 107, 175, 0.18);
}

.login-btn:hover {
    background: var(--primary-dark);
    box-shadow: 0 10px 24px rgba(23, 107, 175, 0.25);
}

/* Responsive icon rail keeps every prototype reachable */
@media (max-width: 900px) {
    :root {
        --sidebar-width: 82px;
    }

    .sidebar-header {
        justify-content: center;
        padding-inline: 12px;
    }

    .sidebar-logo-window { width: 42px; }
    .sidebar-logo-window img { max-width: none; transform: translate(-17px, -14px); }

    .sidebar-header .logo-text,
    .sidebar-toggle,
    .sidebar-search,
    .sidebar-category-header span:not(.category-count),
    .sidebar-category-header .category-count,
    .sidebar-section-label,
    .sidebar-action-item .item-info,
    .sidebar-action-item .item-review-count,
    .sidebar-item .item-info,
    .sidebar-item .item-status,
    .sidebar-item .item-actions {
        display: none;
    }

    .sidebar-actions {
        padding: 14px 12px 10px;
    }

    .sidebar-action-item {
        justify-content: center;
        padding: 6px;
    }

    .sidebar-list {
        padding: 14px 12px;
    }

    .sidebar-category-header {
        justify-content: center;
        padding: 8px;
    }

    .sidebar-category-header i {
        color: #b1bfcb;
    }

    .sidebar-item {
        justify-content: center;
        padding: 7px;
    }

    .sidebar-item.active::before {
        left: -13px;
    }

    .header {
        padding-inline: 18px;
    }

    .dashboard-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        padding: 10px 16px 0;
    }

    .stat-card {
        padding: 8px 10px;
    }

    .canvas-area {
        margin: 14px 16px 16px;
    }
}

@media (max-width: 620px) {
    :root {
        --sidebar-width: 68px;
        --header-height: 68px;
    }

    .app-layout:has(.sidebar.collapsed) {
        --sidebar-width: 68px;
    }

    .sidebar {
        width: var(--sidebar-width);
        transform: none;
    }

    .main-content {
        margin-left: var(--sidebar-width);
    }

    .sidebar-header .logo-icon {
        width: 36px;
        height: 36px;
    }

    .header-left .breadcrumb {
        font-size: 16px;
    }

    .header-left .breadcrumb > i,
    .header-left .breadcrumb span:not(.main-header-logo),
    .header-btn.primary-btn span {
        display: none;
    }

    .header-btn.primary-btn {
        width: 38px;
        padding: 0;
        justify-content: center;
        font-size: 0;
    }

    .header-btn.primary-btn i {
        font-size: 12px;
    }

    .user-avatar {
        display: none;
    }

    .dashboard-stats {
        grid-template-columns: repeat(3, 1fr);
        padding: 10px 10px 0;
    }

    .stat-card {
        min-height: 66px;
        justify-content: center;
        padding: 8px;
    }

    .stat-card .stat-icon {
        display: none;
    }

    .stat-card .stat-info {
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .stat-card .stat-number {
        font-size: 19px;
    }

    .stat-card .stat-label {
        font-size: 8px;
        text-align: center;
    }

    .canvas-area {
        margin: 10px;
    }

    .canvas-placeholder {
        margin: 48px auto;
        height: calc(100% - 96px);
        min-height: 220px;
        padding: 24px 18px;
    }

    .canvas-placeholder p {
        font-size: 12px;
    }

    .modal {
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
        height: auto;
        max-height: calc(100% - 24px);
        border-radius: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   LOGIN PAGE — SWISS GRID / ENTERPRISE PALETTE
   Approved direction: C structure + B colours
   ============================================ */

.login-page {
    min-height: 100vh;
    height: 100dvh;
    padding: 28px 32px;
    display: grid;
    place-items: center;
    background: #eaf0f6;
    color: #162235;
    position: relative;
    overflow: auto;
}

.login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(111, 134, 157, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(111, 134, 157, .10) 1px, transparent 1px);
    background-size: 114px 94px;
    animation: none;
    pointer-events: none;
}

.login-shell {
    --login-blue: #176baf;
    --login-blue-dark: #0e4f82;
    --login-orange: #f59e0b;
    --login-ink: #162235;
    --login-muted: #63758b;
    --login-line: #cbd6e1;
    width: min(100%, 1376px);
    height: min(844px, calc(100dvh - 56px));
    min-height: 680px;
    display: grid;
    grid-template-rows: 94px 280px minmax(0, 1fr) 92px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid #9cadbd;
    background: rgba(250, 252, 254, .98);
    box-shadow: 0 24px 70px rgba(34, 63, 88, .16);
    animation: swissLoginIn .55s cubic-bezier(.2, .75, .25, 1) both;
}

@keyframes swissLoginIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.login-masthead {
    display: grid;
    grid-template-columns: 1fr 1.2fr .8fr;
    align-items: stretch;
    border-bottom: 1px solid var(--login-line);
}

.login-brand,
.login-masthead-label,
.login-access-status {
    min-width: 0;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--login-line);
}

.login-brand { gap: 17px; padding: 0 20px; }

.login-logo-window {
    width: 170px;
    height: 52px;
    display: block;
    overflow: hidden;
}

.login-logo-window img {
    width: 170px;
    height: auto;
    display: block;
    transform: translateY(-12px);
}

.login-brand-mark {
    align-self: stretch;
    width: 62px;
    display: grid;
    place-items: center;
    background: var(--login-blue-dark);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.04em;
}

.login-brand-name {
    color: var(--login-ink);
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.02em;
}

.login-masthead-label,
.login-access-status {
    margin: 0;
    padding: 0 24px;
    color: #66778a;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.login-access-status {
    justify-content: space-between;
    border-right: 0;
    color: var(--login-ink);
}

.login-access-status span {
    order: 2;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--login-orange);
    box-shadow: 0 0 0 6px rgba(245, 158, 11, .14);
}

.login-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #91a3b5;
    background: rgba(255, 255, 255, .60);
}

.login-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(111, 134, 157, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(111, 134, 157, .13) 1px, transparent 1px);
    background-size: 114px 94px;
    pointer-events: none;
}

.login-section-number,
.login-hero > p,
.login-hero h1 { position: absolute; z-index: 1; }

.login-section-number {
    left: 0;
    bottom: 88px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--login-ink);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.login-section-number span {
    width: 36px;
    height: 3px;
    background: var(--login-orange);
}

.login-hero > p {
    left: 0;
    bottom: 24px;
    width: 230px;
    margin: 0;
    color: var(--login-ink);
    font-size: 18px;
    font-weight: 650;
    line-height: 1.35;
    text-wrap: pretty;
}

.login-hero h1 {
    left: 24%;
    bottom: -25px;
    margin: 0;
    color: var(--login-ink);
    font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(124px, 14vw, 206px);
    font-weight: 900;
    line-height: .82;
    letter-spacing: -.095em;
    text-transform: uppercase;
    white-space: nowrap;
}

.login-hero h1 span { color: var(--login-orange); }

.login-entry {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.login-context-panel {
    min-width: 0;
    position: relative;
    padding: 34px 56px 34px 106px;
    border-right: 1px solid #9cadbd;
    background: var(--login-blue-dark);
    color: #fff;
}

.login-context-rail {
    position: absolute;
    left: 20px;
    top: 38px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: rgba(255, 255, 255, .58);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.login-context-frame {
    height: 100%;
    min-height: 205px;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: 1fr 1fr;
    position: relative;
    border: 1px solid rgba(255, 255, 255, .62);
}

.login-context-frame::before,
.login-context-frame::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, .20);
}

.login-context-frame::before { left: 0; right: 0; top: 50%; height: 1px; }
.login-context-frame::after { top: 0; bottom: 0; left: 58%; width: 1px; }

.login-context-frame h2 {
    margin: 0;
    padding: 22px 24px;
    color: #fff;
    font-size: clamp(24px, 2.1vw, 34px);
    font-weight: 760;
    line-height: 1.05;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.login-context-frame h2::after {
    content: '';
    position: absolute;
    right: -1px;
    top: -1px;
    width: 17px;
    height: 62px;
    background: var(--login-orange);
}

.login-context-frame p {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    margin: 0;
    padding: 18px 20px;
    color: rgba(255, 255, 255, .75);
    font-size: 12px;
    line-height: 1.55;
    text-wrap: pretty;
}

.login-form-panel {
    min-width: 0;
    display: grid;
    grid-template-rows: 88px minmax(0, 1fr);
    background: rgba(250, 252, 254, .97);
}

.login-form-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    border-bottom: 1px solid var(--login-line);
}

.login-form-heading h2,
.login-form-heading p { margin: 0; padding: 0 20px; }

.login-form-heading h2 {
    color: var(--login-ink);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.045em;
}

.login-form-heading p {
    color: #66778a;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.login-shell .login-form {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.login-shell .login-form .form-group {
    min-height: 78px;
    margin: 0;
    display: grid;
    grid-template-columns: 32% 68%;
    align-items: stretch;
    border-bottom: 1px solid var(--login-line);
}

.login-shell .login-form label {
    margin: 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
    color: var(--login-ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.login-shell .login-form .input-wrapper { display: flex; min-width: 0; }

.login-shell .login-form input {
    width: 100%;
    min-height: 54px;
    margin: 12px 17px 12px 0;
    padding: 0 14px;
    border: 0;
    border-bottom: 1px solid #7d8fa1;
    border-radius: 0;
    outline: 0;
    background: rgba(236, 243, 249, .78);
    color: var(--login-ink);
    font-size: 14px;
    box-shadow: none;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.login-shell .login-form input::placeholder { color: #7a8b9d; }

.login-shell .login-form input:focus {
    border-color: var(--login-blue);
    background: #f7fbff;
    box-shadow: inset 3px 0 0 var(--login-orange), 0 0 0 2px rgba(23, 107, 175, .15);
}

.login-shell .login-error {
    min-height: 48px;
    margin: 0;
    padding: 10px 20px;
    border-bottom: 1px solid #f0c1bc;
    border-radius: 0;
    background: #fff3f1;
    color: #a2382c;
}

.login-submit-row {
    min-height: 96px;
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.login-submit-row > p {
    margin: 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
    color: #66778a;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.login-shell .login-btn {
    min-height: 68px;
    margin: 14px 0 0;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-left: 1px solid var(--login-blue-dark);
    border-radius: 0;
    background: var(--login-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    box-shadow: none;
}

.login-shell .login-btn:hover {
    transform: none;
    background: var(--login-blue-dark);
    box-shadow: none;
}

.login-shell .login-btn:focus-visible {
    outline: 3px solid rgba(245, 158, 11, .72);
    outline-offset: -5px;
}

.login-shell .login-btn:disabled { background: #7d9bb5; opacity: .78; }
.login-submit-arrow { font-size: 24px; font-weight: 400; line-height: 1; }

.login-shell .login-btn .spinner {
    width: 20px;
    height: 20px;
    margin: auto;
}

.login-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: end;
    border-top: 1px solid #9cadbd;
    background: #f5f8fb;
}

.login-footer span {
    padding: 0 0 14px;
    color: #68798b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.login-footer span:nth-child(2) { text-align: center; }
.login-footer span:last-child { text-align: right; }

@media (max-width: 900px) {
    .login-page { padding: 18px; }
    .login-shell {
        height: calc(100dvh - 36px);
        min-height: 640px;
        grid-template-rows: 76px 230px minmax(0, 1fr) 72px;
    }
    .login-masthead { grid-template-columns: 1fr 1fr; }
    .login-masthead-label { display: none; }
    .login-hero h1 { left: 20%; font-size: clamp(104px, 18vw, 158px); }
    .login-context-panel { padding: 28px 32px 28px 72px; }
    .login-context-frame h2 { font-size: 25px; }
}

@media (max-height: 820px) and (min-width: 681px) {
    .login-page { padding: 16px; }
    .login-shell {
        height: calc(100dvh - 32px);
        min-height: 640px;
        grid-template-rows: 76px 200px minmax(304px, 1fr) 60px;
    }
    .login-context-panel { padding: 22px 40px 22px 86px; }
    .login-context-frame { min-height: 250px; }
    .login-form-panel { grid-template-rows: 72px minmax(0, 1fr); }
    .login-hero h1 { bottom: -20px; font-size: clamp(112px, 14vw, 176px); }
    .login-section-number { bottom: 80px; }
    .login-hero > p { bottom: 18px; }
    .login-footer span { padding-bottom: 8px; }
}

@media (max-width: 680px) {
    .login-page {
        height: 100dvh;
        min-height: 640px;
        padding: 16px;
        align-items: start;
    }
    .login-shell {
        width: 100%;
        height: auto;
        min-height: calc(100dvh - 32px);
        grid-template-rows: 58px 220px auto 72px;
        overflow: visible;
    }
    .login-masthead { grid-template-columns: 1fr auto; }
    .login-brand { padding: 0 12px; border-right: 0; }
    .login-logo-window { width: 148px; height: 46px; }
    .login-logo-window img { width: 148px; transform: translateY(-11px); }
    .login-brand-mark { width: 44px; }
    .login-brand-name { padding-left: 12px; }
    .login-access-status { width: 48px; padding: 0 17px; font-size: 0; }
    .login-hero h1 {
        left: 0;
        bottom: 12px;
        font-size: clamp(68px, 23vw, 94px);
        letter-spacing: -.09em;
    }
    .login-section-number { bottom: 148px; }
    .login-hero > p { bottom: 96px; width: 92%; font-size: 16px; }
    .login-entry { grid-template-columns: 1fr; }
    .login-context-panel { display: none; }
    .login-form-panel { grid-template-rows: 84px auto; }
    .login-form-heading { grid-template-columns: 1.2fr .8fr; }
    .login-form-heading h2 { font-size: 28px; }
    .login-shell .login-form .form-group {
        min-height: 102px;
        grid-template-columns: 1fr;
        grid-template-rows: 36px 1fr;
    }
    .login-shell .login-form label { padding: 10px 16px 0; align-items: flex-start; }
    .login-shell .login-form input { min-height: 52px; margin: 0 16px 12px; }
    .login-submit-row { min-height: 128px; grid-template-columns: 1fr; }
    .login-submit-row > p { min-height: 62px; padding: 0 16px; }
    .login-shell .login-btn { min-height: 62px; margin: 0; }
    .login-footer { grid-template-columns: 1fr 1fr; }
    .login-footer span { padding: 0 0 11px; font-size: 9px; }
    .login-footer span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .login-shell { animation: none; }
}

/* ============================================
   FREE / SOLO PRODUCT EXPERIENCE
   ============================================ */

.login-mode-switch {
    border: 0;
    padding: 2px 0;
    color: #1f6fae;
    background: transparent;
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.login-shell:has(#login-email) .login-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.login-shell:has(#login-email) .login-error,
.login-shell:has(#login-email) .login-submit-row { grid-column: 1 / -1; }
.login-shell:has(#login-email) .login-form .form-group { min-height: 76px; }
.login-shell:has(#login-email) .login-form label { padding-left: 16px; font-size: 10px; }
.login-shell:has(#login-email) .login-form input { min-height: 42px; margin: 6px 11px 6px 0; }
.login-shell:has(#login-email) .login-submit-row { min-height: 72px; }
.login-shell:has(#login-email) .login-btn { min-height: 58px; margin-top: 7px; }

.plan-chip {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 5px 10px;
    border: 1px solid #bed1e2;
    border-radius: 8px;
    color: #24577c;
    background: #eef6fc;
    cursor: pointer;
}

.plan-chip span { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.plan-chip small { color: #668095; font-size: 10px; }
.review-btn { color: #185c88; background: #edf7fe; border-color: #b8d8ee; }
.inbox-btn { position: relative; color: #4c6070; background: #f8fafb; border-color: #d3dce3; }
.inbox-btn b { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; color: #fff; border: 2px solid #fff; border-radius: 20px; background: #e9950c; font-size: 9px; }
.account-menu { position: relative; }
.account-menu-trigger {
    min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 3px 9px 3px 4px;
    color: #29495e; border: 1px solid #ccd9e1; border-radius: 10px; background: #fff;
    font: inherit; text-align: left; cursor: pointer; transition: var(--transition);
}
.account-menu-trigger:hover, .account-menu-trigger.active { border-color: #97b6c9; background: #f7fafc; box-shadow: 0 4px 13px rgba(29,65,88,.08); }
.account-menu-trigger .user-avatar { width: 32px; height: 32px; flex: 0 0 32px; border: 0; box-shadow: none; font-size: 11px; cursor: inherit; }
.account-menu-trigger:hover .user-avatar { transform: none; box-shadow: none; }
.account-menu-identity { min-width: 84px; display: flex; flex-direction: column; line-height: 1.2; }
.account-menu-identity strong { max-width: 130px; overflow: hidden; color: #24465d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-identity small { color: #82949e; font-size: 8px; font-weight: 700; }
.account-attention { display: grid; min-width: 20px; height: 20px; place-items: center; padding: 0 5px; color: #fff; border-radius: 20px; background: #e9950c; font-size: 8px; }
.account-chevron { color: #8b9ba4; font-size: 8px; }
.account-dropdown {
    width: 310px; position: absolute; z-index: 1200; top: calc(100% + 10px); right: 0; overflow: hidden;
    border: 1px solid #bdcdd7; border-radius: 10px; background: #fff; box-shadow: 0 20px 45px rgba(20,50,70,.18);
    animation: accountMenuIn .16s ease-out;
}
@keyframes accountMenuIn { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
.account-dropdown-head { min-height: 66px; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; color: #fff; background: linear-gradient(120deg,#153f5d,#1c6689); }
.account-dropdown-head > span { display: grid; width: 34px; height: 34px; place-items: center; color: #183f5a; border-radius: 50%; background: #f0a62e; font-size: 11px; font-weight: 900; }
.account-dropdown-head > div { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.account-dropdown-head strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.account-dropdown-head small { overflow: hidden; color: #b5d0de; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.account-dropdown-head em { padding: 4px 7px; color: #5e430d; border-radius: 20px; background: #ffd477; font-size: 7px; font-style: normal; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.account-dropdown > button { width: 100%; min-height: 62px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 10px 14px; color: #355568; border: 0; border-bottom: 1px solid #e4eaee; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.account-dropdown > button:last-child { border-bottom: 0; }
.account-dropdown > button:hover { background: #f5f9fb; }
.account-dropdown > button:disabled { opacity: .48; background: #fafbfc; cursor: not-allowed; }
.account-dropdown > button > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.account-dropdown > button strong { color: #294b61; font-size: 10px; }
.account-dropdown > button small { overflow: hidden; color: #84969f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.account-dropdown > button > b { display: grid; min-width: 20px; height: 20px; place-items: center; padding: 0 5px; color: #8a5708; border-radius: 20px; background: #ffedc6; font-size: 8px; }
.account-dropdown > button > i:last-child { color: #a0afb7; font-size: 8px; }
.account-action-icon { display: grid; width: 32px; height: 32px; place-items: center; color: #276789; background: #e8f3f8; font-size: 10px; }
.account-action-icon.inbox { color: #9a610b; background: #fff1d1; }
.account-action-icon.review { color: #207359; background: #e6f4ed; }
.account-action-icon.plan { color: #7751a1; background: #f0eafa; }
.item-review-count { min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 5px; color: #8a5a0c; border-radius: 20px; background: #fff0cd; font-size: 9px; font-weight: 900; }
.item-approved { color: #3a9a72; font-size: 12px; }
.stat-action { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.stat-action:hover { border-color: #efb34b; box-shadow: 0 5px 18px rgba(36, 67, 89, .10); }
.eyebrow { color: #1f6fae; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.plan-overlay { z-index: 1400; }
.plan-modal {
    width: min(880px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 30px;
    overflow: auto;
    border: 1px solid #b9cada;
    border-radius: 4px;
    background: #f8fbfd;
    box-shadow: 0 28px 80px rgba(20, 52, 76, .28);
}

.plan-heading { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; margin-bottom: 20px; }
.plan-heading h2 { margin-top: 5px; color: #172a39; font-size: clamp(26px, 4vw, 42px); letter-spacing: -.05em; line-height: 1.05; }
.usage-card { display: grid; grid-template-columns: 260px 1fr; align-items: center; gap: 24px; padding: 16px; border: 1px solid #ccdae5; background: #fff; }
.usage-card > div:first-child { display: flex; flex-direction: column; }
.usage-card strong { color: #233f54; font-size: 14px; }
.usage-card span { color: #748696; font-size: 12px; }
.usage-track { height: 8px; overflow: hidden; border-radius: 99px; background: #e8eff4; }
.usage-track span { display: block; height: 100%; border-radius: inherit; background: #f5a623; }
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.price-card { min-height: 330px; padding: 24px; border: 1px solid #c8d6e1; background: #fff; }
.price-card.featured { color: #f6fbff; border-color: #1e668f; background: #174b6c; }
.price-card.current { box-shadow: inset 0 4px 0 #f5a623; }
.price-title { display: flex; justify-content: space-between; align-items: center; }
.price-title span { font-size: 20px; font-weight: 800; }
.price-title em { padding: 3px 7px; color: #174b6c; border-radius: 99px; background: #f8c668; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.price { margin: 20px 0; color: #698093; }
.featured .price { color: #bad2e2; }
.price strong { color: inherit; font-size: 38px; letter-spacing: -.05em; }
.price-card ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.price-card li::before { content: '✓'; margin-right: 9px; color: #f5a623; font-weight: 900; }
.plan-action { width: 100%; margin-top: 26px; background: #f2a11b; }
.demo-note { margin-top: 14px; color: #6e8190; font-size: 11px; }
.demo-note i { margin-right: 7px; color: #f2a11b; }
.brand-kit { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 12px; align-items: end; margin-top: 14px; padding: 18px; border: 1px solid #c7d6e0; background: #fff; }
.brand-kit-copy { grid-column: 1 / -1; }
.brand-kit-copy h3 { margin: 3px 0; color: #233e51; font-size: 17px; }
.brand-kit-copy p { color: #768894; font-size: 11px; }
.brand-field { display: grid; gap: 5px; }
.brand-field label { color: #566e7e; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.brand-field input { width: 100%; min-height: 39px; padding: 8px 10px; color: #2d485a; border: 1px solid #c7d5df; border-radius: 4px; background: #f9fbfc; font: inherit; font-size: 11px; }
.color-field > div { display: grid; grid-template-columns: 42px 1fr; gap: 5px; }
.color-field input[type="color"] { padding: 3px; }

.review-workspace-page { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) var(--owner-review-panel-width, 390px); overflow: hidden; color: #253a4a; background: #e8eef2; }
.main-content:has(.review-workspace-page) { min-width: 0; }
.owner-review-preview { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px; }
.owner-review-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 17px; border: 1px solid #c7d4dd; background: #fff; }
.owner-review-preview-head > div { min-width: 0; }
.owner-review-preview-head h1 { overflow: hidden; margin: 3px 0 1px; color: #203b4e; font-size: 18px; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.owner-review-preview-head p { color: #7b8d99; font-size: 10px; }
.owner-review-preview-head a { min-height: 35px; display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 0 11px; color: #21688f; border: 1px solid #bad0de; background: #f4f9fc; font-size: 10px; font-weight: 800; text-decoration: none; }
.owner-review-stage { min-height: 0; flex: 1; position: relative; overflow: hidden; border: 1px solid #aebfc9; background: #fff; box-shadow: 0 12px 30px rgba(29, 60, 81, .12); }
.owner-review-stage iframe { width: 100%; height: 100%; display: block; border: 0; background: #fff; }
.owner-comment-pin { position: absolute; z-index: 3; width: 28px; height: 28px; display: grid; place-items: center; transform: translate(-50%, -50%); color: #fff; border: 2px solid #fff; border-radius: 50% 50% 50% 4px; background: #e8950c; box-shadow: 0 2px 9px rgba(0,0,0,.28); font: inherit; font-size: 9px; font-weight: 900; cursor: pointer; }
.owner-comment-pin.resolved { background: #8495a1; }
.owner-comment-pin.selected { z-index: 4; box-shadow: 0 0 0 4px rgba(38, 118, 167, .28), 0 3px 10px rgba(0,0,0,.3); transform: translate(-50%, -50%) scale(1.15); }
.owner-annotation-layer, .review-annotation-layer { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.feedback-annotation { fill: rgba(225, 70, 70, .12); stroke: #e14646; stroke-width: .55; vector-effect: non-scaling-stroke; }
.feedback-annotation.resolved { fill: rgba(112, 135, 149, .08); stroke: #718894; }
.feedback-arrow { fill: none; stroke: #e14646; stroke-width: 1.05; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.feedback-arrow.resolved { stroke: #718894; }
.feedback-highlight { stroke: none; fill: #ffe066; fill-opacity: .38; mix-blend-mode: multiply; }
.feedback-highlight.resolved { fill-opacity: .18; }
.review-annotation-layer marker path, .screenshot-draw-layer marker path { fill: context-stroke; }
.review-annotation-layer.draft .feedback-annotation { fill: rgba(38, 118, 167, .12); stroke: #2676a7; stroke-dasharray: 1.4 1; }
.review-annotation-layer.draft .feedback-arrow { stroke: #2676a7; stroke-dasharray: 1.4 1; }
.review-annotation-layer.draft .feedback-highlight { fill-opacity: .42; }
.owner-review-sidepanel { min-width: 0; min-height: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; border-left: 1px solid #bdccd7; background: #f8fafb; }
.owner-panel-resizer { position: absolute; top: 0; left: 0; z-index: 30; width: 14px; height: 100%; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: ew-resize; touch-action: none; }
.owner-panel-resizer::before { content: ""; position: absolute; inset: 0 5px; background: transparent; transition: background .15s ease; }
.owner-panel-resizer > span { position: sticky; top: calc(50% - 30px); z-index: 1; width: 5px; height: 60px; border: 1px solid #aebfca; border-radius: 6px; background: #fff; box-shadow: 0 2px 8px rgba(28,57,76,.18); }
.owner-panel-resizer:hover::before, .owner-panel-resizer:focus-visible::before { background: rgba(38,118,167,.3); }
.owner-panel-resizer:hover > span, .owner-panel-resizer:focus-visible > span { border-color: #2676a7; background: #eaf5fb; }
.owner-panel-resizer:focus-visible { outline: 0; }
body.resizing-owner-panel, body.resizing-owner-panel * { cursor: ew-resize !important; user-select: none !important; }
.owner-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 16px 17px 20px; border-bottom: 1px solid #d1dce3; background: #fff; }
.owner-panel-head > div:first-child { min-width: 0; }
.owner-panel-size-controls { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.owner-panel-size-controls button { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; color: #285d7d; border: 1px solid #bfd0da; border-radius: 4px; background: #f6fafc; font: inherit; font-size: 8px; font-weight: 800; cursor: pointer; }
.owner-panel-size-controls button:hover:not(:disabled), .owner-panel-size-controls button:focus-visible { border-color: #2676a7; background: #eaf5fb; }
.owner-panel-size-controls button:disabled { opacity: .4; cursor: default; }
.owner-panel-size-controls em { min-width: 42px; color: #718692; font-size: 8px; font-style: normal; text-align: center; }
.owner-panel-head h2 { margin: 4px 0 2px; color: #203b4e; font-size: 22px; letter-spacing: -.04em; }
.owner-panel-head p { color: #768a97; font-size: 10px; }
.owner-panel-filters { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 16px; border-bottom: 1px solid #d5dfe5; background: #fff; }
.owner-panel-filters button { padding: 13px 4px 10px; color: #7b8d99; border: 0; border-bottom: 3px solid transparent; background: none; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.owner-panel-filters button.active { color: #1e638d; border-color: #f2a11b; }
.owner-feedback-list, .owner-decision-list { min-height: 0; flex: 1; overflow: auto; padding: 14px; }
.owner-feedback-card { margin-bottom: 9px; padding: 13px; border: 1px solid #d5dfe5; border-left: 3px solid #e5a32d; background: #fff; cursor: pointer; transition: var(--transition); }
.owner-feedback-card:hover, .owner-feedback-card.selected { border-color: #e3b65f; background: #fffcf6; box-shadow: 0 5px 15px rgba(46, 68, 83, .07); }
.owner-feedback-card.resolved { opacity: .68; border-left-color: #8ba0ae; }
.owner-feedback-card.priority-urgent { border-left-color: #d63c3c; }
.owner-feedback-card.priority-high { border-left-color: #e47726; }
.owner-feedback-meta { display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; gap: 9px; align-items: start; }
.owner-feedback-number { display: grid; width: 25px; height: 25px; place-items: center; color: #98620e; background: #fff0ce; font-size: 9px; font-weight: 900; }
.owner-feedback-meta > div { min-width: 0; display: flex; flex-direction: column; }
.owner-feedback-meta strong { overflow: hidden; color: #29485c; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.owner-feedback-meta time, .owner-feedback-card > button { color: #82939e; font-size: 8px; }
.owner-feedback-meta em { color: #9b6715; font-size: 8px; font-style: normal; font-weight: 850; text-transform: uppercase; }
.owner-feedback-card.resolved .owner-feedback-meta em { color: #718691; }
.owner-feedback-card > p { margin: 10px 0; color: #435e6f; font-size: 11px; line-height: 1.55; }
.owner-feedback-card > button { padding: 0; color: #1f6d99; border: 0; background: none; font: inherit; font-size: 9px; font-weight: 850; cursor: pointer; }
.feedback-badges, .client-feedback-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.feedback-badges span, .client-feedback-badges span { padding: 3px 6px; color: #607481; border-radius: 20px; background: #eef3f6; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.feedback-badges .priority.urgent, .client-feedback-badges .urgent { color: #a72f2f; background: #ffe4e4; }
.feedback-badges .priority.high, .client-feedback-badges .high { color: #9c511d; background: #fff0df; }
.feedback-badges .internal { color: #684f9c; background: #eee9f8; }
.feedback-attachment { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 9px; color: #1f6d99; font-size: 9px; font-weight: 800; text-decoration: none; }
.annotation-preview { position: relative; margin: 9px 0; overflow: hidden; border: 1px solid #cad7df; background: #e8eef2; }
.annotation-preview img { width: 100%; display: block; }
.annotation-preview .review-annotation-layer { z-index: 1; }
.annotation-preview.viewport-reference { height: 120px; background: linear-gradient(rgba(65,92,108,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(65,92,108,.08) 1px, transparent 1px), #eef3f6; background-size: 20px 20px; }
.annotation-preview.viewport-reference > span { position: absolute; left: 8px; bottom: 6px; z-index: 2; color: #71838f; font-size: 7px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.feedback-context { margin: 0 0 10px; padding: 7px 8px; color: #657986; border: 1px dashed #cad6dd; background: #f8fafb; font-size: 8px; }
.feedback-context summary { cursor: pointer; font-weight: 850; }
.feedback-context span, .feedback-context small { display: block; margin-top: 5px; overflow-wrap: anywhere; }
.feedback-details { margin: 10px 0; padding: 9px; border: 1px solid #dbe4e9; background: #f8fafb; }
.feedback-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.feedback-details label { display: grid; gap: 4px; color: #71848f; font-size: 7px; font-weight: 850; text-transform: uppercase; }
.feedback-details select, .feedback-details input, .owner-reply-form select, .owner-reply-form input, .owner-reply-form textarea { width: 100%; min-width: 0; padding: 6px; color: #405b6c; border: 1px solid #cbd8df; background: #fff; font: inherit; font-size: 9px; }
.feedback-attachment-field { margin-top: 7px; }
.feedback-save { margin-top: 7px; padding: 5px 7px; color: #fff; border: 0; background: #2676a7; font: inherit; font-size: 8px; font-weight: 850; cursor: pointer; }
.feedback-card-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.feedback-card-actions > button { padding: 0; color: #1f6d99; border: 0; background: none; font: inherit; font-size: 9px; font-weight: 850; cursor: pointer; }
.feedback-thread { margin-top: 11px; padding-left: 10px; border-left: 2px solid #dbe4e9; }
.feedback-reply { margin-top: 7px; padding: 8px; background: #f5f8fa; }
.feedback-reply.internal { border: 1px solid #ddd5ef; background: #f7f4fc; }
.feedback-reply > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.feedback-reply strong { color: #35566a; font-size: 9px; }
.feedback-reply span, .feedback-reply em { color: #80919b; font-size: 7px; font-style: normal; }
.feedback-reply em { color: #684f9c; font-weight: 850; text-transform: uppercase; }
.feedback-reply p { margin: 5px 0; font-size: 9px; }
.feedback-reply a { color: #1f6d99; font-size: 8px; }
.owner-reply-form { display: grid; gap: 7px; margin-top: 10px; padding: 9px; border: 1px solid #cbdbe5; background: #f5f9fc; }
.owner-reply-form > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.owner-reply-form > div > button { border: 0; background: none; color: #71848f; cursor: pointer; }
.owner-reply-form textarea { min-height: 62px; resize: vertical; }
.owner-reply-form .btn { width: auto; min-height: 30px; padding: 6px 10px; font-size: 9px; }
.owner-latest-decision { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 11px; margin: 14px 14px 0; padding: 15px; color: #8b5d10; border: 1px solid #edd399; background: #fff6df; }
.owner-latest-decision.approved { color: #256c4e; border-color: #b9ddca; background: #e9f7f0; }
.owner-latest-decision > i { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.7); }
.owner-latest-decision > div { min-width: 0; display: flex; flex-direction: column; }
.owner-latest-decision span { font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.owner-latest-decision strong { margin-top: 1px; font-size: 14px; }
.owner-latest-decision p { margin-top: 4px; color: #536b79; font-size: 10px; }
.owner-decision-card { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 10px; margin-bottom: 8px; padding: 13px; border: 1px solid #d6e0e6; background: #fff; }
.owner-decision-card > i { display: grid; width: 29px; height: 29px; place-items: center; color: #9a6611; border-radius: 50%; background: #fff1d3; font-size: 10px; }
.owner-decision-card.approved > i { color: #267353; background: #e3f4eb; }
.owner-decision-card > div { min-width: 0; display: flex; flex-direction: column; }
.owner-decision-card strong { color: #29485c; font-size: 11px; }
.owner-decision-card span { margin-top: 1px; color: #6f8290; font-size: 9px; font-weight: 800; }
.owner-decision-card p { margin: 7px 0; color: #465f6f; font-size: 10px; line-height: 1.45; }
.owner-decision-card time { color: #8999a3; font-size: 8px; }
.owner-panel-empty { min-height: 240px; display: grid; place-items: center; align-content: center; padding: 30px; color: #7c8f9c; text-align: center; }
.owner-panel-empty i { margin-bottom: 10px; color: #66a98b; font-size: 30px; }
.owner-panel-empty h3 { color: #29475a; font-size: 14px; }
.owner-panel-empty p { max-width: 250px; margin-top: 4px; font-size: 10px; line-height: 1.5; }

.review-overlay { position: fixed; inset: 0; z-index: 1300; display: flex; justify-content: flex-end; background: rgba(14, 30, 43, .35); backdrop-filter: blur(2px); }
.review-drawer { width: min(560px, 100vw); height: 100%; overflow: auto; color: #253a4a; border-left: 1px solid #b9cada; background: #f5f8fa; box-shadow: -18px 0 50px rgba(19, 48, 69, .18); }
.review-drawer-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 26px 28px 20px; border-bottom: 1px solid #cdd9e2; background: #fff; }
.review-drawer-head h2 { max-width: 420px; margin: 3px 0; font-size: 24px; letter-spacing: -.035em; }
.review-drawer-head p { color: #7a8c99; font-size: 12px; }
.review-head-actions { display: flex; gap: 8px; align-items: center; }
.report-button { min-height: 34px; padding: 0 11px; color: #1d648f; border: 1px solid #bad0de; border-radius: 4px; background: #f1f8fc; font-size: 10px; font-weight: 800; cursor: pointer; }
.report-button i { margin-right: 6px; }
.review-tabs { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 28px; border-bottom: 1px solid #cdd9e2; background: #fff; }
.review-tabs button { padding: 15px 4px 12px; border: 0; border-bottom: 3px solid transparent; color: #7a8995; background: none; font-weight: 700; cursor: pointer; }
.review-tabs button.active { color: #1e638d; border-color: #f2a11b; }
.review-content { padding: 18px; }
.panel-loading { display: grid; min-height: 300px; place-items: center; }
.panel-section { margin-bottom: 14px; padding: 20px; border: 1px solid #d4dfe7; background: #fff; }
.panel-section h3 { color: #213b4e; font-size: 14px; }
.panel-section > p, .section-title p { margin-top: 2px; color: #7b8d9a; font-size: 11px; }
.section-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 17px; }
.field-label { display: flex; justify-content: space-between; margin-bottom: 6px; color: #536b7c; font-size: 11px; font-weight: 700; }
.field-label span { color: #a06b18; }
.expiry-label { margin-top: 13px; }
.expiry-select { width: 100%; min-height: 38px; padding: 8px 10px; color: #304b5e; border: 1px solid #cbd8e2; border-radius: 5px; background: #fbfdfe; font: inherit; font-size: 12px; }
.link-personalization { display: grid; grid-template-columns: 1.2fr .8fr; gap: 9px; margin-bottom: 12px; }
.link-personalization input, .welcome-input { width: 100%; min-height: 39px; padding: 9px 11px; color: #304b5e; border: 1px solid #cbd8e2; border-radius: 5px; background: #fbfdfe; font: inherit; font-size: 12px; }
.message-label { margin-top: 3px; }
.welcome-input { min-height: 67px; margin-bottom: 12px; resize: vertical; }
.review-field-row, .share-result { display: flex; gap: 7px; }
.review-field-row input, .share-result input, .version-form > input { width: 100%; min-height: 39px; padding: 9px 11px; border: 1px solid #cbd8e2; border-radius: 5px; color: #203a4d; background: #fbfdfe; font: inherit; font-size: 12px; }
.mini-upgrade { padding: 0 12px; border: 1px solid #ecad45; border-radius: 5px; color: #8a590c; background: #fff5dc; font-size: 11px; font-weight: 800; cursor: pointer; }
.share-result { margin-top: 10px; padding: 8px; background: #eef7fc; }
.share-result input { border: 0; background: transparent; }
.share-result button, .share-row button, .feedback-item button, .version-list button { border: 0; color: #1e6b9b; background: none; font-size: 11px; font-weight: 800; cursor: pointer; }
.share-row { display: flex; justify-content: space-between; margin-top: 8px; padding: 9px 10px; color: #637887; background: #f5f8fa; font-size: 11px; }
.feedback-list { display: grid; gap: 8px; }
.feedback-item { padding: 12px; border-left: 3px solid #e5a32d; background: #f8fafb; }
.feedback-item.resolved { opacity: .65; border-color: #8ba0ae; }
.feedback-meta { display: flex; justify-content: space-between; }
.feedback-meta strong { font-size: 12px; }
.feedback-meta span { color: #83939f; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.feedback-item p { margin: 5px 0 7px; color: #445d6d; font-size: 12px; }
.empty-compact { padding: 18px; color: #8696a2; border: 1px dashed #cbd8e1; text-align: center; font-size: 12px; }
.decision-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; padding: 11px; color: #755516; background: #fff7e6; }
.decision-row.approved { color: #267255; background: #e9f7f0; }
.decision-row div { display: flex; flex-direction: column; }
.decision-row strong { font-size: 12px; }
.decision-row span { font-size: 10px; }
.version-form { display: grid; gap: 11px; }
.version-form small { color: #7d8e9a; }
.version-list article { display: flex; justify-content: space-between; align-items: center; padding: 13px 2px; border-bottom: 1px solid #e1e8ed; }
.version-list article > div { display: flex; flex-direction: column; }
.version-list strong { font-size: 12px; }
.version-list span { color: #8695a0; font-size: 10px; }
.version-list em { padding: 3px 8px; color: #216647; border-radius: 20px; background: #e1f4e9; font-size: 9px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.insight-hero { padding: 25px; color: #fff; background: #174b6c; }
.insights-locked { min-height: 360px; display: grid; place-items: center; align-content: center; padding: 34px; color: #6d8190; border: 1px solid #d2dde5; background: #fff; text-align: center; }
.insights-locked > i { display: grid; width: 58px; height: 58px; margin-bottom: 14px; place-items: center; color: #a36b10; border-radius: 50%; background: #fff1d3; font-size: 22px; }
.insights-locked h3 { margin: 5px 0; color: #233f52; font-size: 22px; letter-spacing: -.035em; }
.insights-locked p { max-width: 300px; margin-bottom: 18px; font-size: 11px; }
.insight-hero .eyebrow { color: #f0b34a; }
.insight-hero h3 { margin: 4px 0; font-size: 30px; letter-spacing: -.045em; }
.insight-hero p { color: #c4d7e3; font-size: 11px; }
.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-bottom: 14px; border: 1px solid #d3dee6; background: #d3dee6; }
.insight-grid > div { display: flex; flex-direction: column; padding: 16px; background: #fff; }
.insight-grid strong { color: #225c80; font-size: 23px; }
.insight-grid span { color: #7b8d99; font-size: 9px; text-transform: uppercase; }
.insight-links article { padding: 13px 0; border-bottom: 1px solid #dce4e9; }
.insight-links article > div:first-child { display: flex; justify-content: space-between; gap: 10px; }
.insight-links article strong { font-size: 12px; }
.insight-links article > div:first-child span { color: #7b8c97; font-size: 9px; }
.link-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 9px; }
.link-metrics span { display: flex; flex-direction: column; padding: 8px; color: #7c8d98; background: #f5f8fa; font-size: 8px; text-transform: uppercase; }
.link-metrics b { color: #31546b; font-size: 12px; text-transform: none; }

.inbox-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border-bottom: 1px solid #cad7df; background: #cad7df; }
.inbox-summary > div { display: flex; flex-direction: column; padding: 16px 12px; background: #fff; }
.inbox-summary strong { color: #203d51; font-size: 22px; letter-spacing: -.04em; }
.inbox-summary span { color: #7a8d9b; font-size: 9px; line-height: 1.25; text-transform: uppercase; }
.inbox-tabs { grid-template-columns: repeat(3, 1fr); padding-inline: 18px; }
.inbox-list { padding: 14px; }
.activity-row { width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px; align-items: start; margin-bottom: 8px; padding: 13px; color: #334d5e; border: 1px solid #d4dee5; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.activity-row:hover { border-color: #e2a539; background: #fffcf5; }
.activity-icon { width: 34px; height: 34px; display: grid; place-items: center; color: #1e6a98; border-radius: 50%; background: #e8f3f9; font-size: 11px; }
.activity-icon.approved { color: #277351; background: #e3f4eb; }
.activity-icon.changes_requested { color: #9a6713; background: #fff1d3; }
.activity-copy { min-width: 0; display: flex; flex-direction: column; }
.activity-copy strong { font-size: 12px; }
.activity-copy > span { color: #6f8290; font-size: 10px; }
.activity-copy p { margin-top: 5px; overflow: hidden; color: #425d6e; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.activity-row time { color: #82939e; font-size: 9px; }
.inbox-empty { display: grid; min-height: 260px; place-items: center; align-content: center; color: #7d909e; text-align: center; }
.inbox-empty i { margin-bottom: 10px; color: #51a27f; font-size: 34px; }
.inbox-empty h3 { color: #294659; }
.inbox-empty p { font-size: 11px; }

.report-overlay { z-index: 1500; overflow: auto; padding: 18px; align-items: flex-start; }
.report-shell { width: min(920px, 100%); margin: auto; background: #e8eef2; box-shadow: 0 24px 70px rgba(20, 43, 59, .3); }
.report-toolbar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #bccbd5; background: rgba(248, 251, 253, .96); backdrop-filter: blur(12px); }
.report-toolbar > div { display: flex; gap: 8px; align-items: center; }
.report-toolbar > div:first-child { align-items: flex-start; flex-direction: column; gap: 0; }
.report-toolbar strong { color: #263f50; font-size: 13px; }
.client-report { width: 820px; min-height: 1060px; margin: 28px auto; padding: 54px; color: #213847; background: #fff; box-shadow: 0 7px 24px rgba(25, 50, 68, .13); }
.client-report > header { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding-bottom: 30px; border-bottom: 2px solid #173f5b; }
.report-brand { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; background: #e99a18; font-weight: 900; }
.client-report header span { color: #48738f; font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.client-report h1 { margin: 3px 0; font-size: 30px; letter-spacing: -.045em; }
.client-report header p { color: #788b97; font-size: 10px; }
.report-status { padding: 7px 10px; color: #875a0c; border-radius: 2px; background: #fff1d3; font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.report-status.approved { color: #216849; background: #e3f4eb; }
.report-status.changes_requested { color: #873d35; background: #fbe8e5; }
.report-metrics { display: grid; grid-template-columns: repeat(4, 1fr); margin: 26px 0; border: 1px solid #cbd7df; }
.report-metrics > div { display: flex; flex-direction: column; padding: 15px; border-right: 1px solid #cbd7df; }
.report-metrics > div:last-child { border: 0; }
.report-metrics strong { color: #1e536f; font-size: 22px; }
.report-metrics span { color: #7d8d98; font-size: 8px; text-transform: uppercase; }
.report-section { padding: 22px 0; border-bottom: 1px solid #d9e1e6; }
.report-section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.report-section-title h2 { font-size: 16px; }
.report-section-title span { color: #7d8e99; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.report-lead { max-width: 650px; color: #455f6f; font-size: 14px; line-height: 1.7; }
.report-feedback, .report-decisions { display: grid; gap: 7px; }
.report-feedback > div { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; padding: 10px; background: #f5f8fa; }
.report-feedback > div > span { color: #e39211; font-size: 10px; font-weight: 900; }
.report-feedback strong, .report-decisions strong { font-size: 10px; }
.report-feedback p, .report-decisions p { margin-top: 2px; color: #556c7b; font-size: 10px; }
.report-feedback em { color: #758994; font-size: 8px; font-style: normal; text-transform: uppercase; }
.report-decisions > div { display: grid; grid-template-columns: 24px 1fr auto; align-items: start; padding: 10px 0; border-bottom: 1px solid #e1e7eb; }
.report-decisions i { color: #3d9670; }
.report-decisions time { color: #7d8e99; font-size: 8px; }
.report-muted { color: #81919b; font-size: 11px; }
.client-report > footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 25px; color: #8797a1; font-size: 8px; text-transform: uppercase; }
.client-report > footer span:last-child { max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; }

.public-review { height: 100dvh; overflow: hidden; color: #1d3547; background: #dfe8ee; }
.public-header { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid #bdccd7; background: #fff; }
.public-brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.public-brand > span { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; background: var(--client-accent, #f2a11b); font-size: 10px; font-weight: 900; }
.public-brand > div { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.public-brand small { color: #7d8e99; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.public-brand strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.public-brand em { padding-left: 13px; color: #7b8c98; border-left: 1px solid #d2dce3; font-size: 11px; font-style: normal; }
.public-actions { min-width: 0; display: flex; gap: 6px; flex: 0 0 auto; }
.public-actions button, .public-actions a { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; color: #225a7d; border: 1px solid #bad0de; border-radius: 5px; background: #f7fbfd; font-size: 11px; font-weight: 800; text-decoration: none; cursor: pointer; }
.public-actions button:disabled { opacity: .6; cursor: wait; }
.public-actions .pin-toggle.active { color: #fff; border-color: var(--client-accent, #f2a11b); background: var(--client-accent, #e8950c); }
.live-color-control, .annotation-color-control { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; color: #315d78; border: 1px solid #bdced9; border-radius: 5px; background: #fff; font-size: 9px; font-weight: 850; cursor: pointer; }
.live-color-control { min-height: 38px; background: #f7fbfd; }
.live-color-control input, .annotation-color-control input { width: 26px; height: 26px; padding: 2px; border: 1px solid #b8cad6; border-radius: 4px; background: #fff; cursor: pointer; }
.public-main { height: calc(100dvh - 62px); display: grid; grid-template-columns: minmax(0, 1fr) var(--review-panel-width, 380px); }
.review-stage { position: relative; margin: 18px; overflow: hidden; border: 1px solid #aebfc9; background: #fff; box-shadow: 0 12px 30px rgba(29, 60, 81, .14); }
.review-stage iframe { width: 100%; height: 100%; border: 0; }
.pin-layer { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; background: rgba(34, 93, 129, .08); cursor: crosshair; }
.draw-layer { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.draw-hit-area { fill: rgba(34, 93, 129, .08); }
.draw-layer + .review-annotation-layer { z-index: 6; }
.marks-hidden-notice { position: absolute; top: 12px; left: 12px; z-index: 8; min-height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; color: #315d78; border: 1px solid #b9ccd8; border-radius: 4px; background: rgba(255,255,255,.94); box-shadow: 0 3px 10px rgba(28,55,73,.12); font: inherit; font-size: 9px; font-weight: 850; cursor: pointer; }
.comment-pin { position: absolute; z-index: 4; display: grid; width: 25px; height: 25px; place-items: center; transform: translate(-50%, -50%); color: #fff; border: 2px solid #fff; border-radius: 50% 50% 50% 4px; background: #e8950c; box-shadow: 0 2px 8px rgba(0,0,0,.24); font-size: 10px; font-weight: 900; pointer-events: none; }
.comment-pin.resolved { background: #8495a1; }
.comment-pin.draft { background: #2676a7; }
.public-review .comment-pin:not(.resolved) { background: var(--client-accent, #e8950c); }
.client-panel { height: 100%; position: relative; padding: 20px; overflow: auto; border-left: 1px solid #bdccd7; background: #f8fafb; }
.panel-size-toolbar { position: sticky; top: -20px; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -20px -20px 14px; padding: 10px 12px 10px 20px; border-bottom: 1px solid #ccd9e1; background: rgba(255,255,255,.97); box-shadow: 0 4px 12px rgba(31,61,80,.06); backdrop-filter: blur(8px); }
.panel-size-toolbar > strong { display: inline-flex; align-items: center; gap: 7px; color: #284f68; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.panel-size-toolbar > strong i { color: var(--client-accent, #e8950c); }
.panel-size-toolbar > div { display: flex; align-items: center; gap: 4px; }
.panel-size-toolbar button { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; color: #285d7d; border: 1px solid #bfd0da; border-radius: 4px; background: #f6fafc; font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
.panel-size-toolbar button:hover:not(:disabled), .panel-size-toolbar button:focus-visible { border-color: #2676a7; background: #eaf5fb; }
.panel-size-toolbar button:disabled { opacity: .42; cursor: default; }
.panel-size-toolbar em { min-width: 45px; color: #718692; font-size: 8px; font-style: normal; text-align: center; }
.panel-resizer { position: absolute; top: 0; left: -8px; z-index: 20; width: 16px; height: 100%; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: ew-resize; touch-action: none; }
.panel-resizer::before { content: ""; position: absolute; inset: 0 6px; background: transparent; transition: background .15s ease; }
.panel-resizer > span { position: sticky; top: calc(50% - 30px); z-index: 1; width: 5px; height: 60px; border: 1px solid #aebfca; border-radius: 6px; background: #fff; box-shadow: 0 2px 8px rgba(28, 57, 76, .18); }
.panel-resizer:hover::before, .panel-resizer:focus-visible::before { background: rgba(38, 118, 167, .28); }
.panel-resizer:hover > span, .panel-resizer:focus-visible > span { border-color: #2676a7; background: #eaf5fb; }
.panel-resizer:focus-visible { outline: 0; }
body.resizing-feedback-panel, body.resizing-feedback-panel * { cursor: ew-resize !important; user-select: none !important; }
.client-intro h2 { margin: 4px 0; font-size: 24px; letter-spacing: -.04em; }
.client-intro p { color: #718592; font-size: 12px; }
.review-deadline { margin-top: 12px; padding: 9px 10px; color: #6c4c14; border: 1px solid #efd59e; background: #fff7e6; font-size: 10px; font-weight: 700; }
.review-deadline i { margin-right: 6px; color: var(--client-accent, #d98c10); }
.client-notice { margin-top: 12px; padding: 9px 11px; color: #206746; background: #e5f5eb; font-size: 11px; font-weight: 700; }
.client-notice i { margin-right: 7px; }
.client-form { display: grid; gap: 6px; margin-top: 18px; padding: 16px; border: 1px solid #ccd9e1; background: #fff; }
.client-form label { margin-top: 4px; color: #5e7381; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.client-form label span { color: #d88706; }
.client-form input, .client-form textarea, .client-form select, .decision-box textarea, .public-gate-card input { width: 100%; padding: 10px; border: 1px solid #c5d3dc; border-radius: 4px; background: #fbfdfe; font: inherit; font-size: 12px; }
.client-form textarea { min-height: 76px; resize: vertical; }
.feedback-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.feedback-form-row label { display: grid; gap: 6px; }
.replying-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; color: #315d78; background: #eaf5fc; font-size: 10px; font-weight: 800; }
.replying-banner button { border: 0; background: none; color: #607d8d; cursor: pointer; }
.draft-screenshot { margin: 5px 0; padding: 8px; border: 1px solid #c7d8e2; background: #f3f8fb; }
.draft-screenshot .annotation-preview { margin: 0 0 7px; }
.draft-screenshot > div { display: flex; align-items: center; gap: 8px; }
.draft-screenshot span { margin-right: auto; color: #315d78; font-size: 9px; font-weight: 850; }
.draft-screenshot button { padding: 0; color: #1f6d99; border: 0; background: none; font: inherit; font-size: 8px; font-weight: 850; cursor: pointer; }
.client-comments { margin-top: 18px; }
.client-comments h3 { display: flex; justify-content: space-between; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.client-feedback-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; border: 1px solid #ccd9e1; background: #eef3f6; }
.client-feedback-tabs button { min-height: 40px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; color: #70838f; border: 0; border-bottom: 3px solid transparent; background: transparent; font: inherit; font-size: 9px; font-weight: 850; cursor: pointer; }
.client-feedback-tabs button + button { border-left: 1px solid #d2dde3; }
.client-feedback-tabs button.active { color: #245e81; border-bottom-color: var(--client-accent, #e8950c); background: #fff; }
.client-feedback-tabs button span { min-width: 19px; height: 19px; display: inline-grid; place-items: center; padding: 0 5px; border-radius: 10px; color: #617987; background: #dfe8ed; font-size: 8px; }
.client-feedback-tabs button.active span { color: #fff; background: var(--client-accent, #e8950c); }
.client-comments article { margin-top: 8px; padding: 11px; border: 1px solid #d5dfe5; background: #fff; }
.client-comments article.priority-urgent { border-left: 3px solid #d63c3c; }
.client-comments article.priority-high { border-left: 3px solid #e47726; }
.client-comments article.status-resolved { opacity: .78; border-left: 3px solid #6e9885; background: #fbfdfc; }
.client-comments article > div { display: flex; justify-content: space-between; }
.client-comments strong { font-size: 11px; }
.client-comments em { color: #8797a2; font-size: 9px; font-style: normal; text-transform: uppercase; }
.client-comments p { margin-top: 5px; color: #4d6575; font-size: 11px; }
.client-comments article > a { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; color: #1f6d99; font-size: 9px; font-weight: 800; }
.client-feedback-empty { min-height: 145px; display: grid; place-content: center; justify-items: center; gap: 5px; margin-top: 8px; padding: 20px; color: #7b8f9b; border: 1px dashed #c7d5dd; background: #fff; text-align: center; }
.client-feedback-empty i { margin-bottom: 4px; color: #8eb3a1; font-size: 24px; }
.client-feedback-empty strong { color: #486476; font-size: 11px; }
.client-feedback-empty p { margin: 0; font-size: 9px; }
.client-reply-action { display: block; margin-top: 9px; padding: 0; color: #1f6d99; border: 0; background: none; font: inherit; font-size: 9px; font-weight: 850; cursor: pointer; }
.client-thread { margin-top: 10px; padding-left: 10px; border-left: 2px solid #d8e3e9; }
.client-thread > div { margin-top: 7px; padding: 8px; background: #f5f8fa; }
.client-thread strong { color: #365b71; font-size: 9px; }
.client-thread p { margin-top: 4px; font-size: 10px; }
.client-thread a { color: #1f6d99; font-size: 8px; }

.screenshot-annotator-overlay { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 24px; background: rgba(15, 34, 48, .76); backdrop-filter: blur(8px); }
.screenshot-annotator { width: min(1100px, 96vw); max-height: 94dvh; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.65); background: #f7fafc; box-shadow: 0 28px 90px rgba(0,0,0,.38); }
.screenshot-annotator > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 17px 20px; border-bottom: 1px solid #cbd8df; background: #fff; }
.screenshot-annotator h2 { margin-top: 2px; color: #203b4e; font-size: 20px; }
.screenshot-annotator header p { margin-top: 3px; color: #718591; font-size: 10px; }
.screenshot-annotator header > button { width: 34px; height: 34px; border: 1px solid #ccd8df; background: #fff; color: #647b89; cursor: pointer; }
.annotation-toolbar { display: flex; align-items: center; gap: 7px; padding: 10px 20px; border-bottom: 1px solid #d2dde4; background: #f5f8fa; }
.annotation-toolbar button { min-height: 34px; padding: 0 12px; color: #315d78; border: 1px solid #bdced9; background: #fff; font: inherit; font-size: 10px; font-weight: 850; cursor: pointer; }
.annotation-toolbar button.active { color: #fff; border-color: #2676a7; background: #2676a7; }
.annotation-toolbar button:disabled { opacity: .45; }
.screenshot-editor-stage { min-height: 0; position: relative; flex: 1; margin: 16px 20px; overflow: auto; align-self: center; border: 1px solid #aebfc9; background: #dfe7ec; box-shadow: 0 8px 24px rgba(26, 53, 71, .18); }
.screenshot-editor-stage > img { max-width: 100%; max-height: calc(94dvh - 230px); display: block; object-fit: contain; }
.screenshot-draw-layer { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.screenshot-draw-layer .draw-hit-area { fill: transparent; }
.screenshot-draw-layer .draft-shape { stroke: #e14646; }
.screenshot-annotator > footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 20px; border-top: 1px solid #ccd9e0; background: #fff; }
.screenshot-annotator footer > span { color: #6d818d; font-size: 10px; }
.screenshot-annotator footer > span:not(:empty) { max-width: 62%; }
.screenshot-annotator footer > div { display: flex; gap: 8px; }
.decision-box { margin-top: 18px; padding: 16px; color: #fff; background: #174b6c; }
.decision-box h3 { margin-bottom: 8px; font-size: 14px; }
.decision-box textarea { min-height: 58px; resize: vertical; }
.decision-box > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 7px; }
.decision-box button { min-height: 38px; padding: 7px; color: #d9e8f1; border: 1px solid #5c829b; border-radius: 4px; background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.decision-box button.approve { color: #173c53; border-color: #f3b44d; background: #f3b44d; }
.public-review .decision-box button.approve { color: #fff; border-color: var(--client-accent, #f3b44d); background: var(--client-accent, #f3b44d); }
.client-panel footer { padding: 22px 0 4px; color: #8797a2; font-size: 10px; text-align: center; }
.public-gate { min-height: 100dvh; display: grid; place-items: center; padding: 20px; background: #e7edf1; }
.public-gate-card { width: min(400px, 100%); display: grid; gap: 13px; padding: 28px; border: 1px solid #b9cbd7; background: #fff; box-shadow: 0 20px 50px rgba(27, 57, 77, .18); }
.public-gate-card .login-brand-mark { display: grid; width: 44px; height: 44px; place-items: center; color: #fff; background: #f2a11b; }
.public-gate-card h1 { font-size: 26px; }
.public-gate-card p { color: #6f8391; font-size: 12px; }

/* ============================================
   SUPER ADMIN CONSOLE
   ============================================ */
.super-admin-launch { color: #174f74; border-color: #bbd3e1; background: #edf7fc; }
.super-admin-launch i { color: #e99a18; }
.super-admin-launch:hover { border-color: #85b1ca; background: #e3f2f9; }

.sa-shell {
    --sa-navy: #123f5e;
    --sa-blue: #176baf;
    --sa-orange: #e99a18;
    width: 100%; height: 100dvh; display: grid; grid-template-columns: 238px minmax(0, 1fr);
    color: #1e3545; background: #eef3f6; overflow: hidden;
}
.sa-sidebar { min-width: 0; display: flex; flex-direction: column; color: #dcebf4; background: #123f5e; border-right: 1px solid #0e344f; }
.sa-brand { height: 76px; display: flex; align-items: center; gap: 11px; padding: 0 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.sa-brand > span { display: grid; width: 37px; height: 37px; place-items: center; color: #153f5c; background: #f0a62e; font-size: 12px; font-weight: 900; }
.sa-brand > .sa-logo-window { width: 126px; height: 38px; display: block; overflow: hidden; border-radius: 3px; background: #fff; }
.sa-logo-window img { width: 126px; height: auto; display: block; transform: translateY(-10px); }
.sa-brand div { display: flex; flex-direction: column; line-height: 1.15; }
.sa-brand strong { color: #fff; font-size: 16px; }
.sa-brand small { color: #8fb0c4; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sa-access { display: flex; align-items: center; gap: 10px; margin: 18px 14px 12px; padding: 12px; border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.05); }
.sa-access > i { display: grid; width: 30px; height: 30px; place-items: center; color: #173f5b; background: #f1a42a; }
.sa-access div { display: flex; flex-direction: column; line-height: 1.3; }
.sa-access small { color: #91b1c5; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sa-access strong { color: #fff; font-size: 11px; }
.sa-sidebar nav { display: grid; gap: 3px; padding: 7px 10px; }
.sa-sidebar nav button, .sa-sidebar-foot button { width: 100%; min-height: 43px; display: flex; align-items: center; gap: 12px; padding: 0 13px; color: #acc5d4; border: 0; border-left: 3px solid transparent; background: transparent; font: inherit; font-size: 11px; font-weight: 700; text-align: left; cursor: pointer; }
.sa-sidebar nav button i { width: 18px; color: #80a7be; text-align: center; }
.sa-sidebar nav button:hover { color: #fff; background: rgba(255,255,255,.06); }
.sa-sidebar nav button.active { color: #fff; border-left-color: #f0a62e; background: rgba(255,255,255,.1); }
.sa-sidebar nav button.active i { color: #f0a62e; }
.sa-sidebar nav button b { display: grid; min-width: 20px; height: 20px; margin-left: auto; place-items: center; color: #173e59; border-radius: 20px; background: #f0a62e; font-size: 8px; }
.sa-sidebar-foot { display: grid; gap: 12px; margin-top: auto; padding: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.sa-sidebar-foot button { min-height: 36px; padding-left: 9px; border: 1px solid rgba(255,255,255,.12); }
.sa-sidebar-foot > div { display: flex; align-items: center; gap: 9px; }
.sa-sidebar-foot > div > span { display: grid; width: 32px; height: 32px; place-items: center; color: #16405d; border-radius: 50%; background: #f0a62e; font-size: 11px; font-weight: 900; }
.sa-sidebar-foot p { display: flex; flex-direction: column; line-height: 1.3; }
.sa-sidebar-foot p strong { color: #fff; font-size: 10px; }
.sa-sidebar-foot p small { color: #86aabd; font-size: 8px; text-transform: uppercase; }

.sa-main { min-width: 0; height: 100dvh; overflow: auto; }
.sa-header { min-height: 96px; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 30px; border-bottom: 1px solid #d5e0e7; background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
.sa-header .eyebrow, .sa-panel .eyebrow { color: #718a99; font-size: 8px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.sa-header h1 { margin: 1px 0; color: #18394f; font-size: 24px; line-height: 1.15; letter-spacing: -.035em; }
.sa-header p { color: #78909d; font-size: 10px; }
.sa-header > div:last-child { display: flex; align-items: center; gap: 8px; }
.sa-refresh, .sa-signout { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; color: #225b7e; border: 1px solid #bfd1dc; border-radius: 5px; background: #fff; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.sa-refresh:hover { background: #edf6fa; }
.sa-refresh:disabled { opacity: .6; cursor: wait; }
.sa-signout { width: 38px; padding: 0; color: #9c4d4d; border-color: #e9cbcb; }
.sa-content { display: grid; gap: 17px; padding: 22px 30px 36px; }
.sa-loading { min-height: calc(100dvh - 100px); display: grid; place-content: center; justify-items: center; gap: 10px; color: #728996; font-size: 11px; }
.sa-error { display: flex; align-items: center; gap: 10px; margin: 18px 30px 0; padding: 12px; color: #8a3535; border: 1px solid #edcaca; background: #fff1f1; font-size: 11px; }
.sa-error button { margin-left: auto; padding: 6px 10px; border: 1px solid #dbaaaa; background: #fff; cursor: pointer; }

.sa-hero { min-height: 175px; position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 28px 30px; overflow: hidden; color: #fff; background: linear-gradient(120deg, #123f5e, #176b8c); box-shadow: 0 14px 30px rgba(19,63,93,.14); }
.sa-hero::after { content:""; position:absolute; width:280px; height:280px; top:-140px; right:16%; border:1px solid rgba(255,255,255,.12); border-radius:50%; box-shadow:0 0 0 45px rgba(255,255,255,.025),0 0 0 90px rgba(255,255,255,.02); }
.sa-hero > div { position: relative; z-index: 1; }
.sa-hero > div:first-child > span { color: #9ed2e8; font-size: 8px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.sa-hero > div:first-child > span i { margin-right: 6px; color: #f0a62e; }
.sa-hero h2 { margin: 9px 0 7px; font-size: clamp(24px,3vw,36px); line-height: 1.08; letter-spacing: -.045em; }
.sa-hero p { color: #b9d2df; font-size: 11px; }
.sa-hero-stamp { min-width: 210px; display: grid; gap: 3px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); }
.sa-hero-stamp small { color: #91b9cb; font-size: 8px; text-transform: uppercase; }
.sa-hero-stamp strong { color: #fff; font-size: 11px; }
.sa-hero-stamp em { margin-top: 6px; color: #f5b64f; font-size: 9px; font-style: normal; font-weight: 800; text-transform: uppercase; }

.sa-metrics { display: grid; grid-template-columns: repeat(4,minmax(135px,1fr)); gap: 10px; }
.sa-metric { min-height: 80px; display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid #d4e0e7; background: #fff; box-shadow: 0 2px 7px rgba(25,58,80,.035); }
.sa-metric > span { display: grid; width: 38px; height: 38px; place-items: center; color: var(--metric-color); background: color-mix(in srgb, var(--metric-color) 11%, white); font-size: 13px; }
.sa-metric div { display: flex; flex-direction: column; line-height: 1.12; }
.sa-metric strong { color: #1b3c52; font-size: 21px; letter-spacing: -.035em; }
.sa-metric small { margin-top: 4px; color: #7d909c; font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sa-overview-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.sa-panel { border: 1px solid #d3dfe6; background: #fff; box-shadow: 0 3px 10px rgba(24,56,77,.035); }
.sa-panel-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 17px; border-bottom: 1px solid #e1e8ec; }
.sa-panel-head h3 { color: #1d4056; font-size: 15px; line-height: 1.25; }
.sa-panel-head > strong { color: #bd7300; font-size: 10px; text-transform: uppercase; }
.sa-panel-head button { color: #176baf; border: 0; background: transparent; font-size: 9px; font-weight: 800; cursor: pointer; }
.sa-panel-head button i { margin-left: 5px; }
.sa-plan-total { display: flex; align-items: baseline; gap: 7px; padding: 18px 18px 10px; }
.sa-plan-total strong { font-size: 28px; line-height: 1; }
.sa-plan-total span { color: #7a909d; font-size: 9px; text-transform: uppercase; }
.sa-plan-bar { height: 8px; margin: 0 18px 14px; overflow: hidden; background: #e4ebef; }
.sa-plan-bar span { display: block; height: 100%; min-width: 2px; background: linear-gradient(90deg,#dfa023,#f2bb51); }
.sa-plan-legend { display: flex; gap: 22px; padding: 0 18px 18px; color: #718692; font-size: 9px; }
.sa-plan-legend span { display: flex; align-items: center; gap: 6px; }
.sa-plan-legend i { width: 7px; height: 7px; border-radius: 50%; }
.sa-plan-legend i.solo { background: #e5a22b; }
.sa-plan-legend i.free { background: #cad7de; }
.sa-plan-legend b { color: #294a5f; }
.sa-operations > div:last-child { display: grid; grid-template-columns: repeat(3,1fr); padding: 20px 10px; }
.sa-operations > div:last-child span { display: grid; justify-items: center; gap: 4px; padding: 8px; border-right: 1px solid #e0e7eb; }
.sa-operations > div:last-child span:last-child { border-right: 0; }
.sa-operations i { color: #d9911d; font-size: 15px; }
.sa-operations b { color: #1c4158; font-size: 22px; }
.sa-operations small { color: #81939e; font-size: 8px; font-weight: 750; text-transform: uppercase; }

.sa-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #d3dfe6; background: #fff; }
.sa-search { min-width: 230px; max-width: 480px; flex: 1; position: relative; }
.sa-search i { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: #8297a3; font-size: 10px; }
.sa-search input, .sa-toolbar select { width: 100%; height: 38px; padding: 0 12px 0 34px; color: #29485b; border: 1px solid #cbd8df; border-radius: 4px; background: #f8fafb; font: inherit; font-size: 10px; }
.sa-toolbar select { width: 185px; padding: 0 9px; }
.sa-toolbar > span { margin-left: auto; color: #8597a2; font-size: 9px; font-weight: 750; text-transform: uppercase; }
.sa-table-card { overflow: auto; border: 1px solid #d3dfe6; background: #fff; }
.sa-table-card table { width: 100%; min-width: 850px; border-collapse: collapse; }
.sa-table-card th { height: 42px; padding: 0 14px; color: #718894; border-bottom: 1px solid #d9e3e8; background: #f7f9fa; font-size: 8px; font-weight: 850; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.sa-table-card td { height: 58px; padding: 9px 14px; color: #385668; border-bottom: 1px solid #e5ebee; font-size: 10px; vertical-align: middle; }
.sa-table-card tbody tr:hover { background: #f7fafc; }
.sa-table-card td > strong, .sa-table-card td > small { display: block; }
.sa-table-card td > strong { color: #23465d; font-size: 10px; }
.sa-table-card td > small { margin-top: 2px; color: #84959e; font-size: 8px; }
.sa-plan-pill, .sa-role-pill, .sa-content-pill, .sa-status, .sa-type-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 20px; font-size: 8px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.sa-plan-pill.solo { color: #845b0e; background: #fff1ce; }
.sa-plan-pill.free { color: #5f7481; background: #e9eef1; }
.sa-role-pill.super_admin { color: #fff; background: #174d6e; }
.sa-role-pill.user { color: #537083; background: #e8f0f4; }
.sa-content-pill { color: #286587; background: #e8f4fa; }
.sa-count-alert { display: inline-grid; min-width: 24px; height: 24px; place-items: center; color: #a94747; border-radius: 50%; background: #fbe7e7; font-weight: 850; }
.sa-user-cell { display: flex; align-items: center; gap: 9px; }
.sa-user-cell > span { display: grid; width: 29px; height: 29px; place-items: center; color: #fff; border-radius: 50%; background: #226b93; font-size: 9px; font-weight: 850; }
.sa-user-cell div { display: flex; flex-direction: column; }
.sa-user-cell small { color: #83949e; font-size: 8px; }

.sa-recent, .sa-all-activity { overflow: hidden; }
.sa-activity-list { display: grid; }
.sa-activity-row { min-height: 67px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 10px 15px; border-bottom: 1px solid #e3eaee; }
.sa-activity-row:last-child { border-bottom: 0; }
.sa-activity-row:hover { background: #f8fafb; }
.sa-activity-icon { display: grid; width: 32px; height: 32px; place-items: center; color: #236589; background: #e8f3f8; font-size: 10px; }
.sa-activity-icon.type-comment { color: #b36a05; background: #fff2d7; }
.sa-activity-icon.type-decision { color: #267b58; background: #e4f5ec; }
.sa-activity-icon.type-billing { color: #7553a4; background: #f0eafa; }
.sa-activity-copy { min-width: 0; }
.sa-activity-copy > div { display: flex; align-items: center; gap: 7px; }
.sa-activity-copy strong { overflow: hidden; color: #24475d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.sa-activity-copy p { overflow: hidden; color: #5f7786; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.sa-activity-copy p b { color: #395b70; }
.sa-activity-copy small { display: block; margin-top: 2px; color: #8a9ba5; font-size: 8px; }
.sa-type-chip { min-height: 18px; padding: 0 6px; color: #657e8e; background: #edf2f4; font-size: 7px; white-space: nowrap; }
.sa-status { color: #567181; background: #eaf0f3; white-space: nowrap; }
.sa-status.status-approved, .sa-status.status-show, .sa-status.status-active, .sa-status.status-created, .sa-status.status-processed { color: #287456; background: #e2f3e9; }
.sa-status.status-changes_requested, .sa-status.status-open { color: #a74a4a; background: #fae6e6; }
.sa-empty { min-height: 180px; display: grid; place-content: center; justify-items: center; gap: 5px; color: #81949f; font-size: 10px; text-align: center; }
.sa-empty i { margin-bottom: 5px; color: #b6c6ce; font-size: 24px; }
.sa-empty strong { color: #577181; font-size: 12px; }

@media (max-width: 1050px) {
    .sa-shell { grid-template-columns: 196px minmax(0,1fr); }
    .sa-metrics { grid-template-columns: repeat(2,minmax(135px,1fr)); }
    .review-workspace-page { grid-template-columns: minmax(0, 1fr) 340px; }
    .owner-panel-resizer, .owner-panel-size-controls { display: none; }
}

@media (max-width: 720px) {
    .sa-shell { display: block; }
    .sa-sidebar { width: 100%; height: 66px; position: fixed; z-index: 40; right: 0; bottom: 0; left: 0; display: block; border: 0; border-top: 1px solid #0e344f; }
    .sa-brand, .sa-access, .sa-sidebar-foot { display: none; }
    .sa-sidebar nav { height: 100%; display: grid; grid-template-columns: repeat(5,1fr); gap: 0; padding: 0; }
    .sa-sidebar nav button { min-height: 66px; justify-content: center; gap: 4px; padding: 7px 2px; border: 0; border-top: 3px solid transparent; flex-direction: column; font-size: 7px; text-align: center; }
    .sa-sidebar nav button.active { border-top-color: #f0a62e; border-left-color: transparent; }
    .sa-sidebar nav button i { width: auto; font-size: 12px; }
    .sa-sidebar nav button b { position: absolute; margin: -24px 0 0 27px; min-width: 17px; height: 17px; }
    .sa-main { height: calc(100dvh - 66px); padding-bottom: 0; }
    .sa-header { min-height: 88px; padding: 14px 16px; }
    .sa-header h1 { font-size: 20px; }
    .sa-header p { display: none; }
    .sa-refresh { width: 38px; padding: 0; font-size: 0; }
    .sa-refresh i { font-size: 10px; }
    .sa-content { padding: 14px 12px 24px; }
    .sa-hero { min-height: 210px; display: grid; padding: 22px; }
    .sa-hero h2 br { display: none; }
    .sa-hero-stamp { min-width: 0; }
    .sa-overview-grid { grid-template-columns: 1fr; }
    .sa-toolbar { flex-wrap: wrap; }
    .sa-search { min-width: 100%; }
    .sa-toolbar select { flex: 1; }
    .sa-activity-row { grid-template-columns: 32px minmax(0,1fr); }
    .sa-activity-row > .sa-status { display: none; }
}

@media (max-width: 430px) {
    .sa-metrics { grid-template-columns: 1fr 1fr; gap: 7px; }
    .sa-metric { min-height: 70px; gap: 8px; padding: 10px; }
    .sa-metric > span { width: 31px; height: 31px; }
    .sa-metric strong { font-size: 18px; }
    .sa-operations > div:last-child { grid-template-columns: 1fr; }
    .sa-operations > div:last-child span { border-right: 0; border-bottom: 1px solid #e0e7eb; }
}

@media (max-width: 800px) {
    .header .plan-chip small, .header .review-btn span, .header .inbox-btn span { display: none; }
    .account-menu-identity small { display: none; }
    .account-menu-identity { min-width: 62px; }
    .plan-grid { grid-template-columns: 1fr; }
    .usage-card { grid-template-columns: 1fr; gap: 10px; }
    .public-main { display: flex; height: calc(100dvh - 62px); overflow-x: auto; scroll-snap-type: x mandatory; }
    .review-stage, .client-panel { width: 100vw; min-width: 100vw; scroll-snap-align: start; }
    .review-stage { height: calc(100dvh - 98px); margin: 18px; min-width: calc(100vw - 36px); }
    .client-panel { border-left: 0; }
    .panel-resizer { display: none; }
    .panel-size-toolbar { display: none; }
    .inbox-summary { grid-template-columns: 1fr 1fr; }
    .client-report { width: calc(100% - 20px); min-height: 0; margin: 10px; padding: 28px; }
    .report-metrics { grid-template-columns: 1fr 1fr; }
    .report-metrics > div:nth-child(2) { border-right: 0; }
    .report-metrics > div:nth-child(-n+2) { border-bottom: 1px solid #cbd7df; }
    .brand-kit { grid-template-columns: 1fr 1fr; }
    .brand-kit .btn { width: 100%; }
    .review-workspace-page { grid-template-columns: 1fr; grid-template-rows: minmax(250px, .9fr) minmax(300px, 1.1fr); overflow: auto; }
    .owner-review-preview { padding: 10px; }
    .owner-review-preview-head { padding: 11px 13px; }
    .owner-review-preview-head h1 { font-size: 15px; }
    .owner-review-sidepanel { min-height: 300px; border-top: 1px solid #bdccd7; border-left: 0; }
    .owner-panel-resizer, .owner-panel-size-controls { display: none; }
}

@media (max-width: 680px) {
    .header-right { gap: 6px; }
    .account-menu-trigger { width: 42px; justify-content: center; padding: 3px; }
    .account-menu-trigger .user-avatar { display: flex; }
    .account-menu-identity, .account-chevron { display: none; }
    .account-attention { position: absolute; top: -5px; right: -5px; border: 2px solid #fff; }
    .account-dropdown { width: min(300px, calc(100vw - 84px)); right: -46px; }
    .super-admin-launch span { display: none; }
    .super-admin-launch { width: 38px; padding: 0; justify-content: center; }
    .login-form-panel { max-height: none; overflow: visible; }
    .login-page:has(#login-email) { overflow-y: auto; }
    .login-shell:has(#login-email) { min-height: 980px; }
    .login-shell:has(#login-email) .login-form { display: block; }
    .login-shell:has(#login-email) .login-form .form-group { min-height: 102px; }
    .login-shell:has(#login-email) .login-form label { padding-left: 16px; }
    .login-shell:has(#login-email) .login-form input { min-height: 52px; margin: 0 16px 12px; }
    .login-shell:has(#login-email) .login-submit-row { min-height: 128px; }
    .plan-modal { padding: 18px; }
    .price-card { min-height: 0; }
    .review-drawer-head { padding: 20px; }
    .review-tabs { padding: 0 20px; }
    .review-content { padding: 10px; }
    .public-brand em { display: none; }
    .public-actions .pin-toggle { font-size: 0; }
    .public-actions .pin-toggle i { font-size: 12px; }
    .live-color-control span { display: none; }
    .live-color-control { padding: 0 5px; }
    .brand-kit { grid-template-columns: 1fr; }
    .link-personalization { grid-template-columns: 1fr; }
}

@media print {
    @page { size: A4; margin: 12mm; }
    body { height: auto; overflow: visible; background: #fff; }
    body * { visibility: hidden !important; }
    .report-overlay, .report-overlay * { visibility: visible !important; }
    .report-overlay { position: static; display: block; padding: 0; background: #fff; }
    .report-shell { width: auto; box-shadow: none; background: #fff; }
    .report-toolbar { display: none; }
    .client-report { width: auto; min-height: 0; margin: 0; padding: 0; box-shadow: none; }
    .report-section, .report-feedback > div, .report-decisions > div { break-inside: avoid; }
}

/* Technical readiness review */
.readiness-nav { padding: 10px 24px; border-bottom: 1px solid #ddd; }
.readiness-panel { padding: 24px; overflow: auto; color: #263349; }
.readiness-panel > p { max-width: 960px; line-height: 1.6; }
.readiness-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 20px 0; }
.readiness-panel select, .readiness-panel textarea { padding: 10px; border: 1px solid #a9b3c1; border-radius: 6px; background: white; color: #263349; font: inherit; }
.readiness-category { max-width: 1100px; margin: 24px 0; }
.readiness-item { display: grid; gap: 10px; background: white; border: 1px solid #d5dce5; border-radius: 10px; padding: 18px; margin: 12px 0; line-height: 1.5; }
.readiness-item textarea { width: 100%; min-height: 85px; resize: vertical; box-sizing: border-box; }
.readiness-item > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.readiness-item select { width: fit-content; }
.readiness-panel [role=alert] { color: #9c2020; }
@media (max-width: 768px) {
    .app-layout:has(.readiness-panel) .sidebar { width: 64px !important; min-width: 64px; }
    .app-layout:has(.readiness-panel) .main-content { margin-left: 64px !important; width: calc(100% - 64px); min-width: 0; }
    .readiness-panel { padding: 16px; }
    .readiness-nav { padding: 10px 16px; }
    .readiness-item { padding: 12px; overflow-wrap: anywhere; }
    .readiness-controls label, .readiness-controls select { max-width: 100%; }
}
@media (max-width: 768px) {
    .app-layout:has(.readiness-panel) .main-content { max-width: calc(100vw - 64px); flex: 0 0 calc(100vw - 64px); }
    .readiness-panel { box-sizing: border-box; width: 100%; min-width: 0; }
    .readiness-panel h2 { overflow-wrap: anywhere; }
}

.readiness-agent { max-width: 1100px; }
.agent-intro, .agent-inputs, .agent-run { margin: 18px 0; padding: 20px; background: #fff; border: 1px solid #d5dce5; border-radius: 10px; }
.readiness-agent p { line-height: 1.6; margin: 10px 0; }
.agent-inputs { display: grid; gap: 12px; }
.agent-inputs textarea { width: 100%; min-height: 140px; box-sizing: border-box; resize: vertical; }
.agent-inputs > button { justify-self: start; }
.agent-checkbox { display: flex; align-items: center; gap: 8px; }
.agent-setup { padding: 14px; background: #fff4d9; border: 1px solid #ebd18e; border-radius: 8px; }
.agent-history { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.agent-history select { max-width: 100%; }
.agent-run-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.agent-events { padding-left: 22px; line-height: 1.8; margin: 16px 0; }
.agent-verdict { padding: 14px; background: #edf4fa; border-radius: 8px; }
.agent-run pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; padding: 12px; background: #f4f6f9; }
.agent-run summary { cursor: pointer; padding: 12px 0; }
@media (max-width: 768px) { .agent-intro, .agent-inputs, .agent-run { padding: 12px; } .readiness-agent { overflow-wrap: anywhere; } }
.agent-settings-dialog { width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow: auto; margin: auto; padding: 24px; border: 1px solid #cbd6e3; border-radius: 14px; color: #263349; background: #fff; box-shadow: 0 20px 70px #132e4c44; box-sizing: border-box; }
.agent-settings-dialog::backdrop { background: #10233688; }
.agent-settings-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.agent-settings-dialog p { line-height: 1.6; margin: 12px 0; }
.agent-settings-dialog form { display: grid; gap: 12px; }
.agent-settings-dialog label { display: grid; gap: 4px; font-weight: 600; }
.agent-settings-dialog small { color: #59687b; font-size: 12px; font-weight: 400; }
.agent-settings-dialog input { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid #a9b3c1; border-radius: 6px; font: inherit; }
.agent-setup-status { padding: 14px; background: #eff5fa; border-radius: 8px; }
.agent-settings-dialog [role=alert] { color: #a02222; }
.agent-inputs > input { padding: 11px; width: 100%; box-sizing: border-box; border: 1px solid #a9b3c1; border-radius: 6px; font: inherit; }
.agent-inputs details { overflow-wrap: anywhere; }
.agent-run > p { overflow-wrap: anywhere; }

.readiness-proof { margin: 12px 0; padding: 12px; border: 1px solid var(--border, #ccc); border-radius: 8px; overflow-wrap: anywhere; }
.readiness-proof summary { cursor: pointer; font-weight: 600; }
.readiness-proof pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; }