:root{--af-purple:        #35155D;--af-purple-light:  #512888;--af-purple-dark:   #220d3d;--af-cyan:          #00ecff;--af-cyan-dim:      rgba(0, 236, 255, 0.15);--af-red:           #F2485B;--af-red-dark:      #9D2235;--af-bg:            #0f0f13;--af-bg-mid:        #181820;--af-surface:       rgba(255,255,255,0.035);--af-surface-hover: rgba(255,255,255,0.065);--af-border:        rgba(255,255,255,0.08);--af-text:          #e8e8f0;--af-text-muted:    #8888aa;--af-white:         #ffffff;--af-radius:        14px;--af-radius-sm:     8px;--af-radius-pill:   999px;--af-shadow:        0 4px 32px rgba(0,0,0,0.5);--af-shadow-sm:     0 2px 12px rgba(0,0,0,0.3);--af-transition:    0.2s ease}*,*::before,*::after{box-sizing:border-box}body{font-family:'Roboto', sans-serif;background-color:var(--af-bg);background-image:radial-gradient(ellipse 80% 50% at 50% -10%, rgba(53,21,93,0.45) 0%, transparent 70%);color:var(--af-text);font-size:16px;font-weight:400;min-height:100vh}h1,h2,h3,h4,h5,h6{font-family:'Quicksand', sans-serif;font-weight:700;color:var(--af-white)}a{color:var(--af-cyan);text-decoration:none;transition:color var(--af-transition)}a:hover{color:var(--af-white)}hr{border-color:var(--af-border);opacity:1;margin:0}.main{max-width:1200px;padding:32px 20px;margin:0 auto}.glass-card{background:var(--af-surface);border:1px solid var(--af-border);border-radius:var(--af-radius);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--af-shadow)}.glass-card--white{background:rgba(255,255,255,0.97);border:1px solid rgba(255,255,255,0.15);border-radius:var(--af-radius);box-shadow:var(--af-shadow);color:#1a1a2e}.glass-card--white h1,.glass-card--white h2,.glass-card--white h3,.glass-card--white h4,.glass-card--white h5,.glass-card--white h6{color:var(--af-purple)}.glass-card--white p,.glass-card--white li,.glass-card--white label{color:#2a2a40}.glass-card--white a:not(.btn){color:var(--af-purple)}.glass-card--white hr{border-color:rgba(53,21,93,0.15)}.navbar{background:rgba(22,10,42,0.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--af-border);padding:0 24px;min-height:64px;position:sticky;top:0;z-index:1000}.nav-logo{max-height:40px;margin-right:4px}.navbar .nav-brand{font-family:'Quicksand', sans-serif;font-size:1.5rem;font-weight:700;color:var(--af-white);letter-spacing:-0.5px;text-decoration:none;margin:0 12px;transition:color var(--af-transition)}.navbar .nav-brand:hover{color:var(--af-cyan)}.navbar .nav-link{font-family:'Quicksand', sans-serif;font-size:0.95rem;font-weight:600;color:rgba(255,255,255,0.8) !important;padding:8px 14px !important;border-radius:var(--af-radius-sm);transition:color var(--af-transition),background var(--af-transition)}.navbar .nav-link:hover{color:var(--af-cyan) !important;background:var(--af-cyan-dim)}.toggler-icon{color:var(--af-white)}.navbar .btn-login{font-family:'Quicksand', sans-serif;font-weight:700;font-size:0.9rem;padding:8px 20px;border-radius:var(--af-radius-pill);border:2px solid var(--af-cyan);color:var(--af-cyan);background:transparent;transition:all var(--af-transition);text-decoration:none;display:inline-block}.navbar .btn-login:hover{background:var(--af-cyan);color:var(--af-purple-dark)}.navbar .btn-logout{font-family:'Quicksand', sans-serif;font-weight:700;font-size:0.9rem;padding:8px 20px;border-radius:var(--af-radius-pill);border:2px solid var(--af-red);color:var(--af-red);background:transparent;transition:all var(--af-transition);text-decoration:none;display:inline-block}.navbar .btn-logout:hover{background:var(--af-red);color:var(--af-white)}.react-button{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;font-size:14px;font-weight:700;font-family:'Quicksand', sans-serif;color:var(--af-white);border:none;border-radius:var(--af-radius-pill);cursor:pointer;transition:transform var(--af-transition),box-shadow var(--af-transition),filter var(--af-transition);box-shadow:0 3px 14px rgba(0,0,0,0.3);text-shadow:0 1px 2px rgba(0,0,0,0.25);white-space:nowrap}.react-button:hover{transform:translateY(-2px);filter:brightness(1.15);box-shadow:0 6px 20px rgba(0,0,0,0.4);color:var(--af-white)}.like-button{background:linear-gradient(135deg, #F2485B 0%, #9D2235 100%)}.comment-button{background:linear-gradient(135deg, #35155c 0%, #0d6dfb 100%)}.images-box{height:110px;overflow:hidden;display:flex;gap:4px;align-items:center;padding:4px 0}.images-box img{height:102px;width:102px;object-fit:cover;border-radius:8px;flex-shrink:0;opacity:0.85;transition:opacity var(--af-transition)}.images-box img:hover{opacity:1}.hero-section{text-align:center;padding:72px 24px 48px}.hero-section .hero-title{font-size:clamp(2.2rem, 5vw, 3.5rem);font-weight:700;background:linear-gradient(135deg, var(--af-white) 30%, var(--af-cyan) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.15;margin-bottom:16px}.hero-section .hero-subtitle{font-size:1.15rem;color:var(--af-text-muted);max-width:540px;margin:0 auto 36px;line-height:1.6}.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:20px;margin:36px 0}.feature-card{background:var(--af-surface);border:1px solid var(--af-border);border-radius:var(--af-radius);padding:28px 24px;transition:background var(--af-transition),border-color var(--af-transition),transform var(--af-transition)}.feature-card:hover{background:var(--af-surface-hover);border-color:rgba(0,236,255,0.2);transform:translateY(-3px)}.feature-card h3{font-size:1.1rem;margin-bottom:10px;color:var(--af-cyan)}.feature-card p{color:var(--af-text-muted);font-size:0.95rem;line-height:1.6;margin:0}.auth-wrapper{display:flex;justify-content:center;align-items:flex-start;padding:48px 20px}.auth-card{background:rgba(255,255,255,0.97);border-radius:var(--af-radius);box-shadow:var(--af-shadow);padding:40px;width:100%;max-width:460px;color:#1a1a2e}.auth-card h1{color:var(--af-purple);font-size:1.75rem;margin-bottom:24px;text-align:center}.auth-card h5{color:#2a2a40;margin-bottom:4px}.auth-divider{display:flex;align-items:center;gap:12px;color:#888;font-size:0.85rem;margin:20px 0}.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:rgba(53,21,93,0.15)}.form-control{border-radius:var(--af-radius-sm) !important;border:1px solid rgba(53,21,93,0.2) !important;font-size:0.95rem}.form-control:focus{border-color:var(--af-purple-light) !important;box-shadow:0 0 0 3px rgba(53,21,93,0.12) !important}.mark-card{background:rgba(255,255,255,0.97);border-radius:var(--af-radius);box-shadow:var(--af-shadow);overflow:hidden;margin-bottom:20px}.mark-card__header{padding:28px 32px 20px;border-bottom:1px solid rgba(53,21,93,0.1)}.mark-card__header h1{color:var(--af-purple);margin-bottom:4px}.mark-card__meta{color:#888;font-size:0.9rem}.mark-card__body{padding:24px 32px}.mark-card__body p{color:#2a2a40;line-height:1.7;font-size:1.05rem}.comments-card{background:rgba(255,255,255,0.97);border-radius:var(--af-radius);box-shadow:var(--af-shadow);overflow:hidden}.comments-card__header{padding:20px 32px 16px;border-bottom:1px solid rgba(53,21,93,0.1)}.comments-card__header h2{color:var(--af-purple);font-size:1.2rem;margin:0}.comment-item{padding:16px 32px;border-bottom:1px solid rgba(53,21,93,0.07);transition:background var(--af-transition)}.comment-item:hover{background:rgba(53,21,93,0.03)}.comment-item:last-child{border-bottom:none}.comment-item p{color:#2a2a40;margin:0 0 4px;line-height:1.6}.comment-item .comment-meta{font-size:0.8rem;color:#aaa;font-style:italic}.comment-form-area{padding:20px 32px;border-top:1px solid rgba(53,21,93,0.1);background:rgba(53,21,93,0.03);display:flex;align-items:center;gap:12px}.comment-form-area .form-control{border:1px solid rgba(53,21,93,0.2) !important;border-radius:var(--af-radius-pill) !important;padding:10px 18px !important;font-size:0.95rem;background:var(--af-white)}.claim-wrapper{display:grid;grid-template-columns:1fr 2fr 1fr;gap:20px;align-items:start}@media (max-width: 768px){.claim-wrapper{grid-template-columns:1fr}}.claim-sidebar{background:var(--af-surface);border:1px solid var(--af-border);border-radius:var(--af-radius);padding:24px;color:var(--af-text)}.claim-sidebar h2{font-size:1.15rem;color:var(--af-cyan);margin-bottom:12px}.claim-sidebar p{color:var(--af-text-muted);font-size:0.9rem;line-height:1.6}.claim-main{background:rgba(255,255,255,0.97);border-radius:var(--af-radius);box-shadow:var(--af-shadow);padding:32px;color:#1a1a2e}.claim-main h1{color:var(--af-purple);font-size:1.5rem;margin-bottom:4px}.claim-main p{color:#555}.claim-type-tabs{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}.claim-type-tab{padding:8px 20px;border-radius:var(--af-radius-pill);border:1.5px solid rgba(53,21,93,0.25);background:transparent;color:var(--af-purple);font-family:'Quicksand', sans-serif;font-weight:700;font-size:0.9rem;cursor:pointer;transition:all var(--af-transition)}.claim-type-tab:hover,.claim-type-tab.active{background:var(--af-purple);border-color:var(--af-purple);color:var(--af-white)}.claim-type-tab.disabled{opacity:0.35;cursor:not-allowed;pointer-events:none}.claim-image-preview{background:var(--af-surface);border:1px solid var(--af-border);border-radius:var(--af-radius);padding:16px;text-align:center}.claim-image-preview img{border-radius:var(--af-radius-sm);max-width:100%}.alert-success{background:rgba(0,236,255,0.08);border:1px solid rgba(0,236,255,0.25);color:var(--af-cyan);border-radius:var(--af-radius-sm)}.alert-danger{background:rgba(242,72,91,0.08);border:1px solid rgba(242,72,91,0.25);color:#f2485b;border-radius:var(--af-radius-sm)}footer{background:rgba(22,10,42,0.92);border-top:1px solid var(--af-border);padding:48px 24px 32px;color:var(--af-text-muted);font-size:0.9rem;margin-top:60px}footer h2{font-size:1.05rem;color:var(--af-white);margin-bottom:16px}footer ul{padding:0;margin:0}footer ul li{list-style:none;margin-bottom:8px}footer a{color:var(--af-text-muted);transition:color var(--af-transition)}footer a:hover{color:var(--af-cyan)}footer .social-links a i{font-size:20px;margin-right:6px}footer .logo{max-width:80px;display:block;opacity:0.85}footer .footer-legal{font-size:0.8rem;color:rgba(255,255,255,0.3);margin-top:8px}.info-card{background:rgba(255,255,255,0.97);border-radius:var(--af-radius);box-shadow:var(--af-shadow);padding:40px;color:#1a1a2e}.info-card h1{color:var(--af-purple);margin-bottom:24px}.info-card h2{color:var(--af-purple);font-size:1.4rem}.info-card h3,.info-card h4{color:var(--af-purple-light)}.info-card p,.info-card li{color:#2a2a40;line-height:1.7}.info-card ol,.info-card ul{padding-left:20px}.info-card a:not(.btn){color:var(--af-purple);text-decoration:underline;text-decoration-color:rgba(53,21,93,0.35);text-underline-offset:3px;font-weight:600;transition:color var(--af-transition),text-decoration-color var(--af-transition)}.info-card a:not(.btn):hover{color:var(--af-purple-light);text-decoration-color:var(--af-purple-light)}.info-card hr{border-color:rgba(53,21,93,0.15);margin:28px 0}.earn-card{background:var(--af-surface);border:1px solid var(--af-border);border-radius:var(--af-radius);padding:24px;margin-bottom:16px;transition:border-color var(--af-transition),background var(--af-transition)}.earn-card:hover{border-color:rgba(0,236,255,0.2);background:var(--af-surface-hover)}.text-cyan{color:var(--af-cyan)}.text-purple{color:var(--af-purple-light)}.text-muted-af{color:var(--af-text-muted)}.divider-purple{border-color:rgba(53,21,93,0.15)}.btn-primary{background:var(--af-purple) !important;border-color:var(--af-purple) !important;border-radius:var(--af-radius-pill) !important;font-family:'Quicksand', sans-serif;font-weight:700;transition:all var(--af-transition) !important}.btn-primary:hover{background:var(--af-purple-light) !important;border-color:var(--af-purple-light) !important;transform:translateY(-1px);box-shadow:0 4px 14px rgba(53,21,93,0.45) !important}.btn-danger{border-radius:var(--af-radius-pill) !important;font-family:'Quicksand', sans-serif;font-weight:700;transition:all var(--af-transition) !important}.btn-dark{border-radius:var(--af-radius-pill) !important;font-family:'Quicksand', sans-serif;font-weight:700;transition:all var(--af-transition) !important}.btn-outline-primary{color:var(--af-purple) !important;border-color:var(--af-purple) !important;border-radius:var(--af-radius-pill) !important;font-family:'Quicksand', sans-serif;font-weight:700}.btn-outline-primary:hover,.btn-outline-primary.active{background:var(--af-purple) !important;color:var(--af-white) !important}.btn-outline-light{border-radius:var(--af-radius-pill) !important;font-family:'Quicksand', sans-serif;font-weight:700;transition:all var(--af-transition) !important}@media (max-width: 768px){.main{padding:20px 12px}.auth-wrapper{padding:24px 12px}.auth-card{padding:24px 16px}.hero-section{padding:48px 16px 32px}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .btn,.hero-actions form{width:100%}.feature-grid{grid-template-columns:1fr;gap:12px}.claim-wrapper{display:block}.claim-main{padding:20px 16px}.claim-sidebar{margin-bottom:16px}.mark-card__header{flex-direction:column;gap:12px;padding-left:16px;padding-right:16px}.mark-card__body{padding-left:16px;padding-right:16px}.comments-card__header{padding-left:16px;padding-right:16px}.comment-item{padding-left:16px;padding-right:16px}.comment-form-area{flex-direction:column;padding:16px;gap:8px}.comment-form-area form{flex-direction:column;align-items:stretch !important}.comment-form-area .form-control{width:100%}.comment-form-area .react-button{width:100%;justify-content:center}.info-card{padding:24px 16px}footer{padding:32px 16px 24px;margin-top:40px}.navbar .navbar-collapse{padding:12px 0}.navbar .navbar-nav{gap:4px}.navbar .btn-login,.navbar .btn-logout{display:block;margin-top:8px}}