/* ====== a7lasnap dark elegant theme (loaded after style.css) ====== */
:root{--a7bg:#070809;--a7card:#11141b;--a7card2:#161a23;--a7line:#222734;--a7gold:#FFD400;--a7snap:#FFFC00;--a7txt:#eef1f6;--a7mut:#8b93a3}

body{background:#070809 !important;color:var(--a7txt) !important;
  background-image:radial-gradient(900px 420px at 50% -10%,rgba(255,212,0,.09),transparent 60%) !important;
  background-attachment:fixed !important;background-repeat:no-repeat !important;font-family:'Cairo',sans-serif}

/* ---- NAV ---- */
.navbar{background:transparent !important;border:0 !important;box-shadow:none !important;margin-bottom:0}
.navbar .container{border-bottom:1px solid var(--a7line);padding-top:6px;padding-bottom:6px}
.navbar-brand img{max-height:46px}
.navbar .dropdown-toggle{color:var(--a7txt) !important;border:1px solid var(--a7line);border-radius:10px;
  padding:8px 14px !important;font-weight:700;margin-top:8px;background:var(--a7card)}
.navbar .dropdown-menu{background:var(--a7card);border:1px solid var(--a7line)}
.navbar .dropdown-menu>li>a{color:var(--a7txt)}
.navbar .dropdown-menu>li>a:hover{background:var(--a7card2);color:var(--a7gold)}
/* beat style.css `nav.navbar .dropdown-menu li a{color:#000}` + light hover */
nav.navbar .dropdown-menu{background:var(--a7card) !important;border:1px solid var(--a7line) !important}
nav.navbar .dropdown-menu li a{color:var(--a7txt) !important}
nav.navbar .dropdown-menu li:hover{background-color:var(--a7card2) !important}
nav.navbar .dropdown-menu li:hover a,nav.navbar .dropdown-menu li a:hover{color:var(--a7gold) !important}

/* ---- TOOLBAR (search / filter / add) ---- */
.a7-toolbar{display:flex;gap:12px;align-items:center;max-width:820px;margin:34px auto 0;flex-wrap:wrap;justify-content:center}
.a7-search{flex:1;min-width:240px;display:flex;gap:8px}
.a7-search input{flex:1;background:var(--a7card);border:1px solid var(--a7line);border-radius:14px;
  padding:14px 18px;color:var(--a7txt);font-size:15px;font-family:'Cairo',sans-serif}
.a7-search input::placeholder{color:#5d6473}
.a7-search input:focus{outline:none;border-color:var(--a7gold)}
.a7-search-btn{background:linear-gradient(135deg,var(--a7snap),var(--a7gold));border:0;border-radius:14px;
  padding:0 20px;color:#0a0c12;font-weight:900;font-size:17px;cursor:pointer}
.a7-filter select{background:var(--a7card);border:1px solid var(--a7line);border-radius:14px;color:var(--a7txt);
  padding:13px 16px;font-size:14px;font-family:'Cairo',sans-serif;cursor:pointer;min-width:150px}
.a7-filter select:focus{outline:none;border-color:var(--a7gold)}
.a7-add{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--a7line);
  color:var(--a7txt);border-radius:30px;padding:13px 22px;font-weight:700;font-size:14px;cursor:pointer;font-family:'Cairo',sans-serif}
.a7-add i{color:var(--a7gold)}
.a7-add:hover{border-color:var(--a7gold)}

/* admin bar */
.a7-admin-bar{text-align:center;margin:16px auto 0;font-size:13.5px}
.a7-admin-bar a{color:var(--a7mut);text-decoration:none;margin:0 10px}
.a7-admin-bar a:hover{color:var(--a7gold)}

/* ---- SECTION HEADER ---- */
.a7-sec{display:flex;align-items:center;gap:10px;max-width:1024px;margin:42px auto 18px;padding:0 4px}
.a7-sec-ic{width:30px;height:30px;border-radius:9px;background:var(--a7gold);color:#0a0c12;display:grid;place-items:center;font-size:14px;flex:0 0 auto}
.a7-sec h2{font-size:19px;font-weight:800;margin:0;color:var(--a7txt)}
.a7-sec-note{color:var(--a7mut);font-size:12.5px;margin-right:auto}

/* ---- GRID + CARDS ---- */
.a7-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1024px;margin:0 auto;padding:0 4px}
.a7-card{background:var(--a7card);border:1px solid var(--a7line);border-radius:18px;padding:22px 14px 16px;
  text-align:center;transition:transform .15s,border-color .15s;position:relative}
.a7-card:hover{transform:translateY(-4px);border-color:rgba(255,212,0,.45)}
.a7-card-link{display:block;text-decoration:none;color:inherit}
.a7-card-link:hover,.a7-card-link:focus{text-decoration:none;color:inherit}
.a7-avwrap{position:relative;width:94px;height:94px;margin:0 auto 12px}
.a7-av{width:94px;height:94px;border-radius:50%;object-fit:cover;border:3px solid #2a2f3c;background:#0d0f15}
.a7-card.vf .a7-av{border-color:var(--a7gold)}
.a7-badge{position:absolute;bottom:-2px;left:-2px;width:29px;height:29px;border-radius:50%;background:var(--a7gold);
  color:#0a0c12;display:grid;place-items:center;font-size:14px;border:3px solid var(--a7card);box-shadow:0 2px 8px rgba(0,0,0,.45)}
.a7-nm{font-weight:800;font-size:15.5px;line-height:1.3;margin-bottom:2px;color:var(--a7txt)}
.a7-sn{color:var(--a7mut);font-size:12px;margin-bottom:11px;direction:ltr}
.a7-fol{display:inline-flex;align-items:center;gap:6px;background:rgba(255,212,0,.10);color:var(--a7gold);
  font-weight:800;font-size:12px;padding:5px 12px;border-radius:20px;margin-bottom:12px}
.a7-add-snap{display:block;background:#1c212c;border:1px solid var(--a7line);border-radius:11px;padding:9px;
  color:var(--a7txt);font-weight:700;font-size:12.5px;text-decoration:none}
.a7-add-snap i{color:var(--a7snap);margin-left:6px}
.a7-card:hover .a7-add-snap{background:linear-gradient(135deg,var(--a7snap),var(--a7gold));color:#0a0c12;border-color:transparent}
.a7-card:hover .a7-add-snap i{color:#0a0c12}

/* ---- FOOTER (3 clean centered lines) ---- */
footer{margin-top:54px !important;padding:22px 16px 8px !important;border-top:1px solid var(--a7line) !important;
  background-color:transparent !important;color:var(--a7mut) !important}
.a7-foot{max-width:680px;margin:0 auto;text-align:center;direction:rtl}
.a7-foot-line{font-size:14px;line-height:2;padding:3px 0}
.a7-foot a{color:var(--a7txt) !important;text-decoration:none}
.a7-foot a:hover{color:var(--a7gold) !important}
.a7-foot-snap{font-weight:800}
.a7-foot-snap a{color:var(--a7txt) !important}
.a7-foot-snap .fa{color:var(--a7snap);margin-left:6px}
.a7-foot-snap a:hover .fa{color:var(--a7gold)}
.a7-foot-help{color:var(--a7mut)}
.a7-foot-help a{color:var(--a7txt) !important;direction:ltr;display:inline-block}
.a7-foot-copy{color:var(--a7mut);font-size:13px}
.a7-foot-copy a{color:var(--a7txt) !important}

/* ---- SHARE WIDGET (account page) — dark Copy Link button + icons ---- */
.td-easy-social-share{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.td-easy-social-share .btn,.td-easy-social-share button{
  background:#1c212c !important;border:1px solid var(--a7line) !important;color:var(--a7txt) !important;
  border-radius:10px;padding:7px 16px;font-weight:700;font-size:13px;font-family:'Cairo',sans-serif;
  box-shadow:none;transition:background .15s,border-color .15s}
.td-easy-social-share .btn:hover,.td-easy-social-share button:hover{
  background:linear-gradient(135deg,var(--a7snap),var(--a7gold)) !important;color:#0a0c12 !important;border-color:transparent !important}
.td-easy-social-share a.fa{width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center;
  background:#1c212c;border:1px solid var(--a7line);color:var(--a7txt) !important;font-size:15px;text-decoration:none}
.td-easy-social-share a.fa:hover{background:var(--a7gold);color:#0a0c12 !important;border-color:transparent}

/* ---- MODALS (dark) ---- */
.modal-content{background:var(--a7card) !important;color:var(--a7txt);border:1px solid var(--a7line);border-radius:16px}
.modal-header{border-bottom:1px solid var(--a7line)}
.modal-title{color:var(--a7txt)}
.modal-body label{color:var(--a7mut);font-weight:700;font-size:13px}
.modal-content .form-control{background:var(--a7card2);border:1px solid var(--a7line);color:var(--a7txt)}
.modal-content .form-control:focus{border-color:var(--a7gold);box-shadow:none}
.modal-content .form-control::placeholder{color:#5d6473}
.modal-content .close{color:var(--a7txt);opacity:.7;text-shadow:none}
.modal-content .select-box select{background:var(--a7card2);border:1px solid var(--a7line);color:var(--a7txt)}
.modal-content .add-account,.modal-content .add-category,.modal-content .edit-account{
  background:linear-gradient(135deg,var(--a7snap),var(--a7gold));color:#0a0c12;border:0}

/* ---- ADD ACCOUNT: auto-fetch hint + read-only preview ---- */
.aa-hint{background:rgba(255,212,0,.08);border:1px solid rgba(255,212,0,.25);color:var(--a7txt);
  border-radius:12px;padding:11px 14px;font-size:13.5px;line-height:1.7;text-align:center;margin:0 0 16px}
.aa-hint .fa{color:var(--a7gold);margin-left:6px}
.aa-preview{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 18px;flex-wrap:wrap}
.aa-preview>img{width:110px;height:110px;border-radius:50%;object-fit:cover;border:3px solid var(--a7gold);background:#0d0f15}
.aa-preview .aa-snapcode{width:84px;height:84px;border-radius:14px;border:0;background:#fff;padding:4px}

/* ---- override style.css ID-specific light modal skin (blue header + white body) ---- */
#addAccount .modal-content,#addCategory .modal-content,#editAccount .modal-content,#editComment .modal-content{
  border-radius:16px !important;overflow:hidden;background:var(--a7card) !important;border:1px solid var(--a7line) !important}
#addAccount .modal-content .modal-header,#addCategory .modal-content .modal-header,
#editAccount .modal-content .modal-header,#editComment .modal-content .modal-header{
  background:transparent !important;color:var(--a7txt) !important;border-bottom:1px solid var(--a7line) !important}
#addAccount .modal-content .modal-header h4,#addCategory .modal-content .modal-header h4,
#editAccount .modal-content .modal-header h4,#editComment .modal-content .modal-header h4{
  color:var(--a7txt) !important;font-weight:800 !important;text-transform:none !important}
#addAccount .modal-content .modal-body,#addCategory .modal-content .modal-body,
#editAccount .modal-content .modal-body,#editComment .modal-content .modal-body{background:var(--a7card) !important}
#addAccount .modal-content .modal-body .fields label,#addCategory .modal-content .modal-body .fields label,
#editAccount .modal-content .modal-body .fields label,#editComment .modal-content .modal-body .fields label{color:var(--a7mut) !important}
#addAccount .modal-content .modal-body .fields input,#addAccount .modal-content .modal-body .fields textarea,
#addAccount .modal-content .modal-body .fields .select-box select,
#editAccount .modal-content .modal-body .fields input,#editAccount .modal-content .modal-body .fields textarea,
#editAccount .modal-content .modal-body .fields .select-box select{
  background:var(--a7card2) !important;border:1px solid var(--a7line) !important;color:var(--a7txt) !important}
#addAccount .modal-content .modal-body .fields button.add-account,
#addAccount .modal-content .modal-body .fields button.add-category,
#editAccount .modal-content .modal-body .fields button.edit-account,
#editComment .modal-content .modal-body .fields button.edit-comment,
#addCategory .modal-content .modal-body .fields button.add-category{
  background:linear-gradient(135deg,var(--a7snap),var(--a7gold)) !important;color:#0a0c12 !important;
  font-weight:800 !important;text-transform:none !important;width:100%;border-radius:11px !important}
#addAccount .modal-content .modal-header .close,#addCategory .modal-content .modal-header .close,
#editAccount .modal-content .modal-header .close,#editComment .modal-content .modal-header .close{
  color:var(--a7txt) !important;opacity:.8;text-shadow:none}

/* ---- kill leftover light backgrounds from style.css ---- */
.container{background:transparent !important}
.accounts,.accounts-block,.block-head,.feat-banner{background:transparent !important;box-shadow:none !important;border:0 !important}
.ng-view,[ng-view]{background:transparent !important}

/* ---- MOBILE ---- */
@media(max-width:900px){.a7-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){
  .a7-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .a7-toolbar{margin-top:24px}
  .a7-sec h2{font-size:17px}
}