/* externalized inline style v84 | source: resources/views/layouts/app.blade.php | style-id: no-id-2 | generated 20260728-080417 */
:root {
            --bg: #07101d;
            --bg-soft: #0d1728;
            --surface: #ffffff;
            --surface-soft: #f8fbff;
            --text: #0f172a;
            --muted: #64748b;
            --primary: #4f7cff;
            --primary-dark: #2447d8;
            --secondary: #8b5cf6;
            --success: #10b981;
            --warning: #f59e0b;
            --border: #e5ecf6;
            --shadow: 0 18px 45px rgba(15,23,42,.08);
            --radius-xl: 30px;
            --radius-lg: 20px;
            --radius-md: 14px;
            --gradient-main: linear-gradient(135deg, #07101d 0%, #0b1c38 50%, #0f2f67 100%);
            --gradient-accent: linear-gradient(135deg, #4f7cff 0%, #845ef7 100%);
            --gradient-success: linear-gradient(135deg, #18c58f 0%, #0ea371 100%);
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            font-family: Tahoma, Arial, sans-serif;
            background: linear-gradient(180deg, #f8fbff 0%, #f5f8fd 100%);
            color: var(--text);
            line-height: 1.95;
        }
        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; }
        .container { width: min(1180px, 92%); margin: 0 auto; }

        .nav {
            position: sticky;
            top: 0;
            z-index: 120;
            background: rgba(255,255,255,.86);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-bottom: 1px solid rgba(226,232,240,.92);
            box-shadow: 0 10px 32px rgba(15,23,42,.06);
        }
        .nav-inner {
            min-height: 84px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 10px 0;
        }
        .brand {
            font-weight: 900;
            font-size: 24px;
            color: var(--text);
            display: inline-flex;
            gap: 8px;
            align-items: center;
        }
        .brand-badge {
            width: 36px;
            height: 36px;
            border-radius: 12px;
            background: linear-gradient(135deg,#2563eb,#10b981);
            display: inline-block;
        }

        .menu {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .menu a,
        .menu button {
            font-family: inherit;
            font-size: 14px;
            border: 0;
            background: none;
            cursor: pointer;
            color: #334155;
        }
        .menu a:not(.btn):not(.nav-auth-link),
        .menu button:not(.btn) {
            padding: 9px 12px;
            border-radius: 12px;
            transition: .18s ease;
        }
        .menu a:not(.btn):not(.nav-auth-link):hover,
        .menu button:not(.btn):hover {
            background: #eff6ff;
            color: #1d4ed8;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 46px;
            padding: 10px 18px;
            border-radius: 14px;
            background: var(--gradient-accent);
            color: white !important;
            font-weight: 800;
            border: 1px solid transparent;
            cursor: pointer;
            font-family: inherit;
            box-shadow: 0 14px 28px rgba(79,124,255,.18);
            transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
        }
        .btn:hover { transform: translateY(-1px); box-shadow: 0 18px 32px rgba(79,124,255,.22); }
        .btn.secondary {
            background: #eef3ff;
            color: #17326a !important;
            box-shadow: none;
            border-color: #d6e3ff;
        }
        .btn.green {
            background: var(--gradient-success);
            color: #fff !important;
            box-shadow: 0 14px 30px rgba(16,185,129,.20);
        }
        .btn.orange {
            background: linear-gradient(135deg,#fb923c,#f97316);
            color: #fff !important;
            box-shadow: 0 14px 30px rgba(249,115,22,.20);
        }
        .btn.small { min-height: 36px; padding: 6px 12px; font-size: 13px; border-radius: 12px; }
        .nav .primary-create-project {
            background: var(--gradient-success);
            color: #fff !important;
            box-shadow: 0 14px 28px rgba(16,185,129,.22);
        }

        .nav-auth-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 10px 16px;
            border-radius: 14px;
            font-weight: 800;
            transition: .18s ease;
        }
        .nav-auth-login {
            border: 1px solid #cbd5e1;
            background: #fff;
            color: #0f172a !important;
        }
        .nav-auth-login:hover {
            border-color: #94a3b8;
            background: #f8fafc;
        }
        .nav-auth-register {
            background: var(--gradient-accent) !important;
            color: #fff !important;
        }

        input.money-input { direction:ltr; text-align:left; font-family:Tahoma, Arial, sans-serif; }
        .hero { padding: 80px 0; background: radial-gradient(circle at top right,#dbeafe,transparent 35%), linear-gradient(135deg,#0f172a,#1e293b); color:white; }
        .hero h1 { font-size:44px; line-height:1.5; margin:0 0 16px; max-width:760px; }
        .hero p { color:#dbeafe; max-width:720px; font-size:18px; }
        .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
        .grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
        .card {
            background:#fff;
            border:1px solid var(--border);
            border-radius:24px;
            padding:22px;
            box-shadow: var(--shadow);
        }
        .card.highlight { border-color:#c7d8ff; box-shadow: 0 20px 40px rgba(79,124,255,.10); }
        .card.pinned { border-color:#bdeccc; box-shadow: 0 18px 38px rgba(16,185,129,.10); }
        .section { padding: 42px 0; }
        .title { font-size: 28px; margin:0 0 20px; }
        .muted { color: var(--muted); }
        .tag {
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:6px 12px;
            border-radius:999px;
            background:#eff6ff;
            color:#1d4ed8;
            font-size:12px;
            font-weight:800;
        }
        .tag.green { background:#ecfdf5; color:#047857; }
        .tag.orange { background:#fff7ed; color:#c2410c; }
        .tag.dark { background:#0f172a; color:#fff; }
        .badge { display:inline-flex; align-items:center; gap:4px; padding:5px 10px; border-radius:999px; background:#f0fdf4; color:#166534; font-size:12px; font-weight:700; margin:3px; }
        .price { font-weight:900; color:#059669; }
        input, textarea, select {
            width:100%;
            min-height:50px;
            border:1px solid #d9e4f2;
            border-radius:14px;
            padding:12px 14px;
            font-family:inherit;
            font-size:14px;
            background:#fff;
            transition: border-color .16s ease, box-shadow .16s ease;
        }
        input:focus, textarea:focus, select:focus {
            outline: none;
            border-color: #8fb1ff;
            box-shadow: 0 0 0 4px rgba(79,124,255,.10);
        }
        input[type="checkbox"] { width:auto; min-height:auto; transform:scale(1.15); margin-left:8px; }
        textarea { min-height: 140px; resize: vertical; }
        label { display:block; font-weight:700; margin:0 0 8px; }
        .form-row { margin-bottom:16px; }
        .alert { padding:14px 16px; border-radius:14px; margin:18px 0; border:1px solid transparent; }
        .alert.success { background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
        .alert.error { background:#fef2f2; border-color:#fecaca; color:#991b1b; }
        .alert.info { background:#eff6ff; border-color:#bfdbfe; color:#1e40af; }
        .errors { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; padding:14px 18px; border-radius:14px; margin-bottom:18px; }
        .stat { font-size:32px; font-weight:900; color:#2563eb; }
        table { width:100%; border-collapse:collapse; }
        th, td { text-align:right; padding:12px; border-bottom:1px solid var(--border); }

        .footer {
            margin-top: 58px;
            background: var(--gradient-main);
            color: #dbe6ff;
            position: relative;
            overflow: hidden;
        }
        .footer::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 15% 20%, rgba(79,124,255,.18), transparent 26%), radial-gradient(circle at 85% 10%, rgba(16,185,129,.12), transparent 22%);
            pointer-events: none;
        }
        .footer-inner {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1.2fr .9fr .9fr .95fr;
            gap: 24px;
            padding: 42px 0 20px;
            align-items: start;
        }
        .footer-brand h3 {
            margin: 0 0 10px;
            color: #fff;
            font-size: 24px;
        }
        .footer-brand p,
        .footer-col p,
        .footer-col li,
        .footer-bottom,
        .footer-note { color: #bfd0ef; }
        .footer-col h4 {
            margin: 0 0 14px;
            font-size: 17px;
            color: #fff;
        }
        .footer-links,
        .footer-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .footer-list a,
        .footer-links a {
            color: #dbe6ff;
            opacity: .92;
            transition: .18s ease;
        }
        .footer-list a:hover,
        .footer-links a:hover { color: #fff; opacity: 1; transform: translateX(-2px); }
        .footer-seal {
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.10);
            border-radius: 22px;
            padding: 18px;
            box-shadow: 0 18px 45px rgba(0,0,0,.16);
        }
        .footer-seal h4 { margin: 0 0 8px; color: #fff; }
        .footer-seal p { margin: 0 0 12px; font-size: 13px; line-height: 2; }
        .trust-seal { display:flex; justify-content:flex-end; }
        .trust-seal img {
            max-width: 122px;
            background:#fff;
            border-radius:16px;
            padding:8px;
            border:1px solid rgba(255,255,255,.15);
        }
        .footer-bottom {
            position: relative;
            z-index: 1;
            border-top: 1px solid rgba(255,255,255,.08);
            padding: 16px 0 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            font-size: 13px;
        }
        .footer-bottom-links {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
        }
        .footer-bottom-links a { color: #dbe6ff; }

        .notification-wrap { position:relative; display:inline-flex; align-items:center; }
        .notification-dropdown { position:absolute; top:44px; left:0; width:min(390px, 92vw); background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:0 22px 60px rgba(15,23,42,.16); padding:10px; z-index:50; display:none; }
        .notification-wrap.open .notification-dropdown { display:block; }
        .notification-bell { width:42px; height:42px; border-radius:14px; background:#f8fafc !important; border:1px solid #e2e8f0 !important; display:inline-flex; align-items:center; justify-content:center; color:#0f172a !important; position:relative; }
        .notification-bell-count { position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#ef4444; color:white; font-size:11px; line-height:20px; text-align:center; font-weight:900; }
        .notification-item-btn { width:100%; text-align:right; border:0; background:transparent; padding:10px; border-radius:12px; cursor:pointer; font-family:inherit; color:#111827; }
        .notification-item-btn:hover { background:#f8fafc; }
        .notification-item-btn.unread { background:#eff6ff; }
        .notification-title-row { display:flex; justify-content:space-between; align-items:center; gap:8px; }
        .notification-title-row strong { font-size:13px; }
        .notification-body { display:block; color:#64748b; font-size:12px; margin-top:4px; line-height:1.8; }
        .notification-time { color:#94a3b8; font-size:11px; white-space:nowrap; }
        .notification-footer { display:flex; justify-content:space-between; gap:8px; border-top:1px solid var(--border); padding-top:10px; margin-top:8px; }
        .verification-bell { background:#fff7ed !important; border-color:#fed7aa !important; color:#9a3412 !important; }
        .verification-bell .notification-bell-count { background:#f97316; }
        .chat-bell { background:#ecfeff !important; border-color:#a5f3fc !important; color:#155e75 !important; }
        .chat-bell .notification-bell-count { background:#0891b2; }
        .chat-item-badge { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#0891b2; color:#fff; font-size:11px; font-weight:900; margin-right:6px; }

        .auth-shell {
            max-width: 1080px;
            margin: 24px auto 0;
            padding: 0 14px;
        }
        .auth-grid {
            display: grid;
            grid-template-columns: minmax(0,.92fr) minmax(340px,1fr);
            gap: 22px;
            align-items: stretch;
        }
        .auth-side {
            border-radius: 32px;
            padding: 30px;
            background: var(--gradient-main);
            color: #fff;
            position: relative;
            overflow: hidden;
            box-shadow: 0 24px 60px rgba(15,23,42,.18);
        }
        .auth-side::before {
            content: "";
            position: absolute;
            width: 340px;
            height: 340px;
            left: -90px;
            bottom: -140px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(79,124,255,.22), transparent 68%);
        }
        .auth-side h1 {
            margin: 12px 0 12px;
            font-size: 34px;
            line-height: 1.6;
        }
        .auth-side p { color: #d8e4ff; margin: 0 0 18px; }
        .auth-side ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
        .auth-side li {
            background: rgba(255,255,255,.08);
            border: 1px solid rgba(255,255,255,.09);
            border-radius: 18px;
            padding: 14px 14px;
            color: #e7efff;
        }
        .auth-card {
            border-radius: 30px;
            background: #fff;
            border: 1px solid #e8eef9;
            padding: 28px;
            box-shadow: 0 20px 52px rgba(15,23,42,.08);
        }
        .auth-steps { display:flex; gap:8px; flex-wrap:wrap; margin: 14px 0 18px; }
        .auth-step {
            padding: 6px 12px;
            border-radius: 999px;
            background: #eef3ff;
            color: #2447d8;
            font-size: 12px;
            font-weight: 800;
        }
        .auth-step.active { background: #0f172a; color: #fff; }
        .auth-title { margin: 0 0 10px; font-size: 28px; }
        .auth-subtitle { margin: 0 0 18px; color: #64748b; }
        .auth-inline-links { display:flex; gap:14px; flex-wrap:wrap; margin-top: 16px; }
        .auth-inline-links a { color:#2447d8; font-weight:700; }
        .auth-role-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:10px; }
        .auth-role-card {
            cursor:pointer;
            padding:16px;
            border:1px solid #dbe4f1;
            border-radius:20px;
            background:#fff;
            transition:.18s ease;
        }
        .auth-role-card:hover { border-color:#9db4ff; box-shadow:0 14px 28px rgba(79,124,255,.10); transform:translateY(-1px); }
        .auth-role-card input { width:auto; min-height:auto; margin-left:8px; }
        .auth-role-card strong { display:block; margin-bottom:6px; }

        @media (max-width: 980px) {
            .grid, .grid-2, .footer-inner, .auth-grid { grid-template-columns: 1fr; }
            .footer-inner { gap: 18px; }
        }

        @media (max-width: 800px) {
            .hero h1 { font-size:32px; }
            .nav { position: static; }
            .nav-inner { min-height:auto; padding:12px 0; flex-direction:column; align-items:stretch; gap:10px; }
            .brand { font-size:20px; }
            .brand-badge { width:30px; height:30px; border-radius:10px; }
            .menu {
                width:100%;
                display:flex;
                flex-wrap:nowrap;
                gap:8px;
                overflow-x:auto;
                padding:4px 0 8px;
                -webkit-overflow-scrolling:touch;
                scrollbar-width:thin;
                justify-content:flex-start;
            }
            .menu a, .menu button { flex:0 0 auto; white-space:nowrap; }
            .menu a:not(.btn):not(.nav-auth-link), .menu button:not(.btn) {
                font-size:12.5px;
                padding:8px 10px;
                border-radius:10px;
                background:#f8fafc;
            }
            .menu .btn, .menu .primary-create-project, .nav-auth-link { min-height:38px; padding:8px 12px; }
            .notification-wrap { flex:0 0 auto; }
            .notification-dropdown { position:fixed; top:70px; left:4%; right:4%; width:auto; max-height:70vh; overflow:auto; }
            .auth-side, .auth-card { padding: 22px; border-radius: 24px; }
            .auth-side h1 { font-size: 28px; }
        }